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












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.










share|improve this question
























  • You only use double quotes... Use single quotes to delimit the string to be appended.
    – Louys Patrice Bessette
    Nov 13 '18 at 6:24






  • 1




    Possible duplicate of When to use double or single quotes in JavaScript?
    – Louys Patrice Bessette
    Nov 13 '18 at 6:25










  • replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join());
    – Ashish Singhal
    Nov 13 '18 at 6:36
















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.










share|improve this question
























  • You only use double quotes... Use single quotes to delimit the string to be appended.
    – Louys Patrice Bessette
    Nov 13 '18 at 6:24






  • 1




    Possible duplicate of When to use double or single quotes in JavaScript?
    – Louys Patrice Bessette
    Nov 13 '18 at 6:25










  • replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join());
    – Ashish Singhal
    Nov 13 '18 at 6:36














1












1








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.










share|improve this 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.







javascript jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 13 '18 at 6:21







subhra

















asked Nov 13 '18 at 6:15









subhrasubhra

1,34411134




1,34411134












  • You only use double quotes... Use single quotes to delimit the string to be appended.
    – Louys Patrice Bessette
    Nov 13 '18 at 6:24






  • 1




    Possible duplicate of When to use double or single quotes in JavaScript?
    – Louys Patrice Bessette
    Nov 13 '18 at 6:25










  • replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join());
    – Ashish Singhal
    Nov 13 '18 at 6:36


















  • You only use double quotes... Use single quotes to delimit the string to be appended.
    – Louys Patrice Bessette
    Nov 13 '18 at 6:24






  • 1




    Possible duplicate of When to use double or single quotes in JavaScript?
    – Louys Patrice Bessette
    Nov 13 '18 at 6:25










  • replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join());
    – Ashish Singhal
    Nov 13 '18 at 6:36
















You only use double quotes... Use single quotes to delimit the string to be appended.
– Louys Patrice Bessette
Nov 13 '18 at 6:24




You only use double quotes... Use single quotes to delimit the string to be appended.
– Louys Patrice Bessette
Nov 13 '18 at 6:24




1




1




Possible duplicate of When to use double or single quotes in JavaScript?
– Louys Patrice Bessette
Nov 13 '18 at 6:25




Possible duplicate of When to use double or single quotes in JavaScript?
– Louys Patrice Bessette
Nov 13 '18 at 6:25












replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join());
– Ashish Singhal
Nov 13 '18 at 6:36




replace $("#alldepdates").val(restArr.join(",")); with $("#alldepdates").val(alldsplit.join());
– Ashish Singhal
Nov 13 '18 at 6:36












3 Answers
3






active

oldest

votes


















2














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>








share|improve this answer



















  • 1




    No, its assigning the same value to each field.
    – subhra
    Nov 13 '18 at 6:35










  • @subhra, updated the answer....please check...
    – Mamun
    Nov 13 '18 at 6:40






  • 1




    Yes, it looks good now but in my case in one click its creating all field as per array.
    – subhra
    Nov 13 '18 at 6:46










  • @subhra, do you mean to create all the possible elements with a single click?
    – Mamun
    Nov 13 '18 at 6:50






  • 1




    any way I solved in using $(addButton).unbind().click and thanks for your solutions.
    – subhra
    Nov 13 '18 at 6:54



















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





share|improve this answer































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





    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274893%2fhow-to-assign-value-to-dynamically-created-input-box-using-javascript-jquery%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      2














      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>








      share|improve this answer



















      • 1




        No, its assigning the same value to each field.
        – subhra
        Nov 13 '18 at 6:35










      • @subhra, updated the answer....please check...
        – Mamun
        Nov 13 '18 at 6:40






      • 1




        Yes, it looks good now but in my case in one click its creating all field as per array.
        – subhra
        Nov 13 '18 at 6:46










      • @subhra, do you mean to create all the possible elements with a single click?
        – Mamun
        Nov 13 '18 at 6:50






      • 1




        any way I solved in using $(addButton).unbind().click and thanks for your solutions.
        – subhra
        Nov 13 '18 at 6:54
















      2














      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>








      share|improve this answer



















      • 1




        No, its assigning the same value to each field.
        – subhra
        Nov 13 '18 at 6:35










      • @subhra, updated the answer....please check...
        – Mamun
        Nov 13 '18 at 6:40






      • 1




        Yes, it looks good now but in my case in one click its creating all field as per array.
        – subhra
        Nov 13 '18 at 6:46










      • @subhra, do you mean to create all the possible elements with a single click?
        – Mamun
        Nov 13 '18 at 6:50






      • 1




        any way I solved in using $(addButton).unbind().click and thanks for your solutions.
        – subhra
        Nov 13 '18 at 6:54














      2












      2








      2






      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>








      share|improve this answer














      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>








      $(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>





      $(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>






      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Nov 13 '18 at 7:58

























      answered Nov 13 '18 at 6:32









      MamunMamun

      25.6k71428




      25.6k71428








      • 1




        No, its assigning the same value to each field.
        – subhra
        Nov 13 '18 at 6:35










      • @subhra, updated the answer....please check...
        – Mamun
        Nov 13 '18 at 6:40






      • 1




        Yes, it looks good now but in my case in one click its creating all field as per array.
        – subhra
        Nov 13 '18 at 6:46










      • @subhra, do you mean to create all the possible elements with a single click?
        – Mamun
        Nov 13 '18 at 6:50






      • 1




        any way I solved in using $(addButton).unbind().click and thanks for your solutions.
        – subhra
        Nov 13 '18 at 6:54














      • 1




        No, its assigning the same value to each field.
        – subhra
        Nov 13 '18 at 6:35










      • @subhra, updated the answer....please check...
        – Mamun
        Nov 13 '18 at 6:40






      • 1




        Yes, it looks good now but in my case in one click its creating all field as per array.
        – subhra
        Nov 13 '18 at 6:46










      • @subhra, do you mean to create all the possible elements with a single click?
        – Mamun
        Nov 13 '18 at 6:50






      • 1




        any way I solved in using $(addButton).unbind().click and thanks for your solutions.
        – subhra
        Nov 13 '18 at 6:54








      1




      1




      No, its assigning the same value to each field.
      – subhra
      Nov 13 '18 at 6:35




      No, its assigning the same value to each field.
      – subhra
      Nov 13 '18 at 6:35












      @subhra, updated the answer....please check...
      – Mamun
      Nov 13 '18 at 6:40




      @subhra, updated the answer....please check...
      – Mamun
      Nov 13 '18 at 6:40




      1




      1




      Yes, it looks good now but in my case in one click its creating all field as per array.
      – subhra
      Nov 13 '18 at 6:46




      Yes, it looks good now but in my case in one click its creating all field as per array.
      – subhra
      Nov 13 '18 at 6:46












      @subhra, do you mean to create all the possible elements with a single click?
      – Mamun
      Nov 13 '18 at 6:50




      @subhra, do you mean to create all the possible elements with a single click?
      – Mamun
      Nov 13 '18 at 6:50




      1




      1




      any way I solved in using $(addButton).unbind().click and thanks for your solutions.
      – subhra
      Nov 13 '18 at 6:54




      any way I solved in using $(addButton).unbind().click and thanks for your solutions.
      – subhra
      Nov 13 '18 at 6:54













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





      share|improve this answer




























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





        share|improve this answer


























          1












          1








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





          share|improve this answer














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






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 13 '18 at 6:43

























          answered Nov 13 '18 at 6:35









          Ashish SinghalAshish Singhal

          184115




          184115























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





              share|improve this answer


























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





                share|improve this answer
























                  0












                  0








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





                  share|improve this answer












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






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 13 '18 at 6:47









                  Muhammad ZaibMuhammad Zaib

                  1517




                  1517






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274893%2fhow-to-assign-value-to-dynamically-created-input-box-using-javascript-jquery%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      這個網誌中的熱門文章

                      Xamarin.form Move up view when keyboard appear

                      Post-Redirect-Get with Spring WebFlux and Thymeleaf

                      Anylogic : not able to use stopDelay()