javascript clone textfield с добавленной строкой

Question

У меня есть форма, содержащая 4 текстовых поля. JS гарантирует, что имя, фамилия и имя заполнены эффективно ... но я хочу, чтобы файл изображения поля содержал полное имя с расширением .jpg. Позволяет мне изменить поле файла изображения вручную, когда это необходимо.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <form id="form"> 

     <label for="fname">First Name</label> 
     <input type="text" id="fname" /> 
     <hr> 

     <label for="lname">Last Name</label> 
     <input type="text" id="lname" /> 
     <hr> 


     <label for="fullname">Full Name</label> 
     <input type="text" id="fullname" /> 

     <label for="picturefile">picture file</label> 
     <input type="text" id="picturefile" /> 
    </form> 

Javascript код

jQuery(document).ready(UserInfoCtrl); 
    function UserInfoCtrl($) 
     { 
      var self = this; 

      var form = $('#form'); 
      var fname = $('#fname'); 
      var lname = $('#lname'); 
      var fullname = $('#fullname'); 

      self.updateFirstName = function(firstName) { 
      var _lname = lname.val() || (fullname.val() || '').trim().split(' ').pop(); 
      fullname.val(firstName + ' ' + _lname); 
      }; 

      self.updateLastName = function(lastName) { 
      var _fname = fname.val() || (fullname.val() || '').trim().split(' ').shift(); 
      fullname.val(_fname + ' ' + lastName); 
      }; 

      self.updateFullName = function(fullName) { 
      var _fullname = (fullName || '').trim().split(' '); 

      fname.val((_fullname[0] || '')); 
      lname.val((_fullname[1] || '')); 
      }; 

      self.onFieldChange = function(e) { 
      switch(this.id) { 
       case 'fname': 
       self.updateFirstName(this.value); 
       break; 

       case 'lname': 
       self.updateLastName(this.value); 
       break; 

       case 'fullname': 
       self.updateFullName(this.value); 
       break; 
      } 
      }; 

      fname.add(lname).add(fullname).change(self.onFieldChange); 

      form.submit(function(e) { 
      e.preventDefault(); 
      return false; 
      }); 
     } 

Answer 1

Я думаю, что вам нужно сделать что-то подобное

<script> 
    jQuery(document).ready(UserInfoCtrl); 
    function UserInfoCtrl($) 
     { 
      var self = this; 

      var form = $('#form'); 
      var fname = $('#fname'); 
      var lname = $('#lname'); 
      var fullname = $('#fullname'); 

      self.updateFirstName = function(firstName) { 
      var _lname = lname.val() || (fullname.val() || '').trim().split(' ').pop(); 
      fullname.val(firstName + ' ' + _lname); 
      UpdateImage(); 
      }; 

      self.updateLastName = function(lastName) { 
      var _fname = fname.val() || (fullname.val() || '').trim().split(' ').shift(); 
      fullname.val(_fname + ' ' + lastName); 
      UpdateImage(); 
      }; 

      self.updateFullName = function(fullName) { 
      var _fullname = (fullName || '').trim().split(' '); 

      fname.val((_fullname[0] || '')); 
      lname.val((_fullname[1] || '')); 
      }; 

      self.onFieldChange = function(e) { 
      switch(this.id) { 
       case 'fname': 
       self.updateFirstName(this.value); 
       break; 

       case 'lname': 
       self.updateLastName(this.value); 
       break; 

       case 'fullname': 
       self.updateFullName(this.value); 

       break; 
      } 
      }; 
      function UpdateImage(){ 
      $('#picturefile').val(jQuery('#fullname').val() + ".jpg"); 
      } 



      fname.add(lname).add(fullname).change(self.onFieldChange); 

      form.submit(function(e) { 
      e.preventDefault(); 
      return false; 
      }); 
     } 
</script>