How to assign value to dynamically created input box using javascript/Jquery

Question

I am creating some input field dynamically using Jquery but need to assign value at the time of creation. I am explaining my code below.

<input type="hidden" id="alldepdates" value="1,2,3,4">
<ul class="date_list input_fields_wrap">
<li><input type="text" name="ddates" id="ddates" value="1" readonly >
<a href="#" id="addbtn"><span style="margin-left:5px;min-width:20px;"><i class="fa fa-arrow-circle-down" style="font-size:18px;"></i></span></a><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>
</ul>

Here I have some comma separated string value inside hidden input field and 1st element of that comma separated string is displayed in read only field.

 <script>
    $(function(){ 
        var wrapper = $(".input_fields_wrap");
        var addButton = $("#addbtn");
        $(addButton).click(function(){
           var alld=$("#alldepdates").val();
           var alldsplit=alld.split(",");
           var restArr=alldsplit.shift();
           if(restArr.length > 0){
               $(wrapper).append("<li><input type="text" name="ddates" id="ddates" value="+restArr[0]+" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>");                                                      

$("#alldepdates").val(restArr.join(","));
          };
    });
    })
    </script>;

Here my need is when user will click on down-arraow icon new field will created and always the first value of that comma separated string will assign to new field and when all value will be assigned then no field will create again.

You only use double quotes... Use single quotes to delimit the string to be appended. — Louys Patrice Bessette, Nov 13 '18 at 06:24
Possible duplicate of [When to use double or single quotes in JavaScript?](https://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript) — Louys Patrice Bessette, Nov 13 '18 at 06:25
replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join()); — Ashish Singhal, Nov 13 '18 at 06:36

Mamun · Accepted Answer · 2018-11-13T07:58:57.667

You are not formatting the htmlString correctly. Should be:

'<li><input type="text" name="ddates" id="ddates" value="'+alldsplit[0]+'" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>'

Though I prefer using Template Literals which allows embedded expressions.

To attach event on dynamically created element you have to use on().

$(function(){ 
  var wrapper = $(".input_fields_wrap");
  $('body').on('click', 'a', function(){
     var alld=$("#alldepdates").val();
     var alldsplit=alld.split(",");
     alldsplit.shift();
     if(alldsplit.length > 0){
         $(wrapper).append(`<li><input type="text" name="ddates" id="ddates" value="${alldsplit[0]}" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>`);                                                            $("#alldepdates").val(alldsplit.join(","));
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="alldepdates" value="1,2,3,4">
<ul class="date_list input_fields_wrap">
<li><input type="text" name="ddates" id="ddates" value="1" readonly >
<a href="#" id="addbtn"><span style="margin-left:5px;min-width:20px;"><i class="fa fa-arrow-circle-down" style="font-size:18px;"></i></span></a><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>
</ul>

Yes, it looks good now but in my case in one click its creating all field as per array. — , Nov 13 '18 at 06:46
@subhra, do you mean to create all the possible elements with a single click? — Mamun, Nov 13 '18 at 06:50
yes, proper values are assigning to each field but in single click its creating all field which should not happen. — , Nov 13 '18 at 06:52
any way I solved in using `$(addButton).unbind().click` and thanks for your solutions. — , Nov 13 '18 at 06:54

Ashish Singhal · Answer 2 · 2018-11-13T06:43:07.407

$(document).on('click', "#addbtn", function() {
   var alld=$("#alldepdates").val();
   var alldsplit=alld.split(",");
   var restArr=alldsplit.shift();
   if(restArr.length > 0){
       $(wrapper).append('<li><input type="text" name="ddates" id="ddates" value="'+restArr[0]+'" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>');                                                           
       $("#alldepdates").val(alldsplit.join());
  };

score 0 · Answer 3 · answered Nov 13 '18 at 06:47

You can do it easily. You just need to know that array.shift removes and returns the first element of array.

$(function () {
  var wrapper = $('.input_fields_wrap');
  var addButton = $('#addbtn');

  $(addButton).click(function () {
    var alld = $('#alldepdates').val();
    var alldsplit = alld.split(',');
    var removedArrayElement = alldsplit.shift();
    if (alldsplit.length > 0) {

      var inputMarkup = '<input type="text" name="ddates" id="ddates_' + alldsplit.length + '" value="' + removedArrayElement + '" readonly />';
      var anchorMarkup = '<a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a>';

      $(wrapper).append('<li>' + inputMarkup + anchorMarkup + '</li>');

      $("#alldepdates").val(alldsplit.join(','));
    };
  });
});

How to assign value to dynamically created input box using javascript/Jquery

3 Answers3