如何使用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.

Answer 1

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> 

Answer 2

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

Answer 3

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(','));
    };
  });
});