CODEWITHSUNDEEP
javascriptjquery
JCD
JCD

Reputation: 297

Jquery, Pass an input value to a cloned input field

I have a form with a few input fields used to create an address book. If the user wants to add another set of names, they can click on add more. If the users have the same username, instead of typing it over and over again, i added a checkbox.

If the user selects the checkbox, it will pass the value from the first username input field to ALL username input fields.

The code below works on the second set of input fields but when i click on add more, it doesnt pass the values. 

$('#check1, #addmore').click(function(){
    if (this.checked) {
        $('.pass').val($('.original').val());
    }
});

here's the full code.

Upvotes: 1

Views: 1338

Answers (2)

Larry Lane
Larry Lane

Reputation: 2191

You can use the class you already have assigned to your button which is the .add_field_button class. Then you just have you can assign the value to each input box value with an id that starts with username as long as the #check1 element is checked.

//changed the selector, you already had this class present in your markup
$('.add_field_button').on(
"click",function(){

    //if the check1 checkbox is checked
    if ($("#check1").is(":checked")) {


         /*select every id that starts with "username" and sets it value
           to the .original input text box value*/
         $("[id^=username]").val($(".original").val());


    }
});

After reviewing your jsfiddle I found some additional errors:

You are using html comments in your JavaScript. Instead of <!--my comment--> you will need to use either // for single line comments or /* my comment */ for multi-line comments.

After removing the comment syntax errors I may have came across some unexpected behavior when using my original answer. The if then statement still applies but I moved it to inside your add_more button event because it was only cloning the username after the third set of inputs was being added.

Live Example: http://codepen.io/larryjoelane/pen/rxKZYm?editors=1010

Updated JavaScript:

    $(document).ready(function() {

  Number.prototype.pad = function(size) {
    var s = String(this);
    while (s.length < (size || 0)) {
      s = "0" + s;
    }
    return s;
  }

  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var c = 9;
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      c++;
      $(wrapper).append('<div><label><span>Template Id :</span><input type="text" name="templateid' + x + '" id="templateid' + x + '"></label><br><label><span>UNC Path :</span><input type="text" name="uncpath' + x + '" id="uncpath' + x + '"></label><br><label><span>Username :</span><input type="text" class="pass" name="username' + x + '" id="username' + x + '"></label><br><label><span>Password :</span><input type="text" name="password' + x + '" id="password' + x + '"></label><br><label><span>Name :</span><input type="text" name="scantoname' + x + '" id="scantoname' + x + '"></label><a href="#" class="remove_field btn btn-primary">Remove</a></div>'); //add input box

      /*add input value to 'how many field*/
      $.each($('input[name="howmany[]"]'), function() {

        $(this).val(x);
      });

      /*add input value to 'templateid field*/
      $('input[name="templateid' + x + '"]').each(function() {
        $(this).val((x).pad(3, 0));
      });

    }

    //////////added code////////////////
    //if the check1 checkbox is checked
    if ($("#check1").is(":checked")) {

      /*select every id that starts with "username" and sets it value
       to the .original input text box value*/
      $("[id^=username]").val($(".original").val());

    }
    //////////added code////////////////

  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

Upvotes: 2

smdsgn
smdsgn

Reputation: 1746

First you need to add the id #addmore to your button in the HTML

<button id="addmore" class="add_field_button btn btn-primary">Add More</button>

Then just modify your click function like this : 

$('#check1, #addmore').click(function(){
    if($('#check1').is(':checked')) {
         $('.pass').val($('.original').val());
    }
});

Upvotes: 1

Related Questions