javascript clone textfield with a string added

Question

I have a form containing 4 text fields. JS is making sure that firstname, lastname and fullname are filled in effectively... but I want the field picture file to contain the fullname value with the extension .jpg. Allowing me to change the picture file field manually when there is a need for it.

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

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;
          });
        }

Should a change to the picture file propagate those changes back to the first/last name, like you do with fullname? — trincot, Aug 18 '16 at 15:28
Yes the user is allowed to change the extension. No propagation is required. A user without the JS adds would had to put in the firstname, then lastname, then the fullname and last also the picture...The JS adds makes this form easier to fill in. — MK69, Aug 18 '16 at 21:29
So what if the user has all filled in, then changes the picturefile input, and then makes a correction to the first name? Should the picturefile be updated automatically, thereby forgetting the changes made manually to it? Or did you have another behaviour in mind? — trincot, Aug 18 '16 at 21:38

score 0 · Accepted Answer · answered Aug 18 '16 at 15:14

I think you need to do something like that

<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 clone textfield with a string added

1 Answers1