1

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.

Improve this question
3
  • You only use double quotes... Use single quotes to delimit the string to be appended. Commented Nov 13, 2018 at 6:24
  • 1
    Possible duplicate of When to use double or single quotes in JavaScript? Commented Nov 13, 2018 at 6:25
  • replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join()); Commented Nov 13, 2018 at 6:36

3 Answers 3

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

No, its assigning the same value to each field.
Yes, it looks good now but in my case in one click its creating all field as per array.
@subhra, do you mean to create all the possible elements with a single click?
yes, proper values are assigning to each field but in single click its creating all field which should not happen.
any way I solved in using $(addButton).unbind().click and thanks for your solutions.
1 
$(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());
  };
Improve this answer

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.