문자열이 추가 된 javascript 복제 텍스트 필드

-1

4 개의 텍스트 필드가 포함 된 양식이 있습니다. JS는 firstname, lastname 및 fullname이 효과적으로 채워지는지 확인하고 있지만 필자는 필드 그림 파일에 확장명 .jpg가있는 fullname 값이 포함되기를 원합니다. 필요할 때 수동으로 그림 파일 필드를 변경하도록 허용합니다.문자열이 추가 된 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; 
      }); 
     }

출처

2016-08-18 MK69

뭔가를 할 필요가 있다고 생각 자바 스크립트 코드

<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>

는 사용자가 확장자를 변경할 수 있나요? – trincot

fullname과 마찬가지로 그림 파일을 변경하면 변경 내용이 성/이름으로 다시 전달됩니까? – trincot

설명을 위해이 질문에 대한 답이없는 이유는 무엇입니까? – trincot

나는 당신이

<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>

출처

2016-08-18 15:14:02 AnasSafi

칩니다 .. 완벽하게 작동합니다! – MK69

문자열이 추가 된 javascript 복제 텍스트 필드

답변

관련 문제