how to add the date field in a form using addmore function javascript

Question

I have to add multiple date field using add more image, but when i click "Date field" calender appears.

But when i add more date fields (Date 2,Date3...).Calender not appears in that date fields.

No errors throughs in firebug.

My code is here.Please refer atachment.Calender not showing in "Date 2" text field.

    <script>
$(function() {
    $(".dp").datepicker();

  });

    fields = 2;
    function addInput() 
    {    
        document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label>  <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'>    <input type='image' value='Remove'   src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
        document.getElementById('count_off').value=fields;
        fields += 1;     
    }
    </script>   

    <div>
        <input id='date_1' class='dp' type='text' placeholder='Date'>  
        <a href="javascript:void(0);" id="addButton"  onclick="addInput();">
        <img src="img/addmore.png" width="" height="25px"></a>  
    </div>

    <div id="text" ></div>

Roshan · Accepted Answer · 2014-07-26 07:35:40Z

1

Assigning Id to all the datepicker field may create problem for you to handle it.So its better to assign class and do all the stuff with help of class. I have just written code to add datepicker.

$(".dp").datepicker();

$(document).on('click', '.add', function() {
    var appendTxt = '<input class="dp"  type="text" /><button class="add">Add</button>';
    $("#container").append(appendTxt);
    $(".dp").datepicker();

});

HTML is

<div id="container">
<input class="dp" type="text"></input><button class="add">Add</button>
</div>

SEE DEMO HERE

answered Jul 26, 2014 at 7:35

Roshan

2,1942 gold badges17 silver badges28 bronze badges

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

Comments

Satish Sharma · Accepted Answer · 2014-07-26 07:06:08Z

1

apply jquery function $(".dp").datepicker(); in your function addInput like this

function addInput() 
    {    
        document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label>  <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'>    <input type='image' value='Remove'   src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
        document.getElementById('count_off').value=fields;

        $(".dp").datepicker(); // add this line

    }

UPDATE 2 :

function addInput() 
    {    
        document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label>  <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'>    <input type='image' value='Remove'   src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
        document.getElementById('count_off').value=fields;

        $("date_"+fields).datepicker(); // add this line
        fields += 1;
    }

edited Jul 26, 2014 at 7:06

answered Jul 26, 2014 at 6:55

Satish Sharma

9,6356 gold badges31 silver badges52 bronze badges

3 Comments

John Ken Over a year ago

thanks sathish.If we add Date2,Date3, Date4 fields,calender appears only in Date 4. Date 2,date 3 not showing.which means last added field only showing calender.any other solution to solve

Satish Sharma Over a year ago

one more idea is use unique id instead of class .dp try my update2

Satish Sharma Over a year ago

can you put this into js fiddle. i think problem is some other.

Collectives™ on Stack Overflow

how to add the date field in a form using addmore function javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related