javascript 克隆文本字段并添加一个字符串

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>

javascript 克隆文本字段并添加一个字符串

javascript clone textfield with a string added

javascript

forms

copy-paste

onchange

cloning