how to invoke datepicker, multiple inputs, same form

[peppericious]

I'm trying to invoke jquery datepicker for multiple "inv_date" inputs in the same form but it's only appearing for the first instance.

 

My form is like this:

		<form method='post' action=''>
			<div id='inputs_wrapper'>
				<div class='inputs'>
					<div class='element'>
						<label for='company'>Company</label>
						<input type='text' class='ind_input' name='company[]' value='' />
					</div>
					<div class='element'>
					  <label for='inv_date'>Invoice Date</label>
					  <input type='text' name='inv_date[]' class='ind_input' value=''/>
					</div>
					<div class='element'>
						<label for='inv_no'>Invoice #</label>
							<input type='text' class='ind_input price' name='inv_no[]' value='' />
					</div>
					<div class='element'>
						<label for='description'>Description</label>
							<input type='text' class='ind_input' name='description[]' value='' />
					</div>
					<div class='element'>
						<label for='inv_total'>Invoice Total</label>
							<input type='text' class='ind_input price' name='inv_total[]' value='' />
					</div>
					<!-- new elements start -->
					<div class='element'>
					  <select name='payt_type[]' id='payt_type'>
					      <option value='' selected='selected'>Payment Method...</option>
					      <option value='vd'>Visa Debit</option>
					      <option value='v'>Visa</option>
					      <option value='so'>Standing Order</option>
					      <option value='c'>Cash</option>
					  </select>
					</div>
					<div class='element'>
					  <select name='category[]' id='category'>
					    <option selected='selected' value=''>Category...</option>
					    <option value='tr'>Translation</option>
					    <option value='pr'>Printing</option>
					    <option value='pp'>P&P</option>
					    <option value='ad'>Advertising</option>
					    <option value='hd'>Hardware</option>
					    <option value='sw'>Software</option>
					    <option value='cns'>Consumables</option>
					    <option value='comm'>Communications</option>
					    <option value='snd'>Sundries</option>
					  </select>
					</div>
					<div class='element'>
						<div class='radios'>VAT:   <label style='display:inline'><input type='radio' name='vat_rate[]_0' value='0' id='vat_rate_0' />0</label>   <label style='display:inline'><input type='radio' name='vat_rate[]_0' value='.23' id='vat_rate_1' />23</label>   <label style='display:inline'><input type='radio' name='vat_rate[]_0' value='.135' id='vat_rate_2' />13.5</label>
					</div>
					
					<!-- new elements end -->
					<!-- <a href='#' class='removeclass' style='position: absolute; right: 10px;'>X</a> -->
				</div>
			</div> <!-- inputs collection end -->
		<div class='clearer'> </div>
	</div> <!-- inputs wrapper end -->
	<input type='submit' name='submit' value='Submit' />
	</form>

... and I'm appending additional inputs with this:

<script type='text/javascript'>
	$(document).ready(function() {

		// select input text on click
		$(function(){
	        $(document).on('click','input[type=text]',function(){ this.select(); });
	    });
	    ///////////


	    $(function() {
		    $('input[name^="inv_date"]').each(function()
		    {
				    $(this).datepicker();
				});
		});

		var max_inputs       = 8; //maximum input boxes allowed
		var inputs_wrapper   = $("#inputs_wrapper"); //Input boxes wrapper ID
		var add_button       = $("#add_more_inputs"); //Add button ID

		var x = inputs_wrapper.length; //initlal text box count
		var field_count=1; //to keep track of text box added

		$(add_button).click(function (e)  //on add input button click
		{
		        if(x <= max_inputs) //max input box allowed
		        {
		            field_count++; //text box added increment
		            //add input box

		            $(inputs_wrapper).append("<div class='inputs'><div class='element'><label for='company'>Company</label><input type='text' class='ind_input' name='company[]' value='' /></div><div class='element'><label for='inv_date'>Invoice Date</label><input type='text' name='inv_date[]' class='ind_input' value=''/></div><div class='element'><label for='inv_no'>Invoice #</label><input type='text' class='ind_input price' name='inv_no[]' value='' /></div><div class='element'><label for='description'>Description</label><input type='text' class='ind_input' name='description[]' value='' /></div><div class='element'><label for='inv_total'>Invoice Total</label><input type='text' class='ind_input price' name='inv_total[]' value='' /></div><div class='element'><select name='payt_type[]'>  <option value='' selected='selected'>Payment Method...</option>  <option value='vd'>Visa Debit</option>  <option value='v'>Visa</option>  <option value='so'>Standing Order</option>  <option value='c'>Cash</option></select></div><div class='element'><select name='category[]'><option selected='selected' value=''>Category...</option><option value='tr'>Translation</option><option value='pr'>Printing</option><option value='pp'>P&P</option><option value='ad'>Advertising</option><option value='hd'>Hardware</option><option value='sw'>Software</option><option value='cns'>Consumables</option><option value='comm'>Communications</option><option value='snd'>Sundries</option></select></div><div class='element'><div class='radios'>VAT:   <label style='display:inline'><input type='radio' name='vat_rate[]_"+field_count+"' value='0' id='vat_rate_"+field_count+"' />0</label>   <label style='display:inline'><input type='radio' name='vat_rate[]_"+field_count+"' value='.23' id='vat_rate_"+field_count+"' />23</label>   <label style=display:inline'><input type='radio' name='vat_rate[]_"+field_count+"' value='.135' id='vat_rate_"+field_count+"' />13.5</label></div></div><a href='#' class='removeclass' style='position: absolute; right: 10px;'>X</a></div>");
		            x++; //text box increment

		        }
		return false;
		});

		$("body").on("click",".removeclass", function(e){ //user click on remove text
		        if( x > 1 ) {
		                $(this).parent('div').remove(); //remove text box
		                x--; //decrement textbox
		        }
		return false;
		}) 

	});
</script>

... but the datepicker is appearing for only the first "inv_date" instance, as I said.

 

Can anyone tell me what I'm doing wrong?

 

TIA.

[kicken]

As part of your function to add the new inputs, you need to initialize the datepicker on the new inputs. This bit of code you have:

	    $(function() {
		    $('input[name^="inv_date"]').each(function()
		    {
				    $(this).datepicker();
				});
		});

Will only initialize the inputs which exist at the time the page is loaded. Any elements added later are not affected.

[peppericious]

As part of your function to add the new inputs, you need to initialize the datepicker on the new inputs. This bit of code you have:

	    $(function() {
		    $('input[name^="inv_date"]').each(function()
		    {
				    $(this).datepicker();
				});
		});

Will only initialize the inputs which exist at the time the page is loaded. Any elements added later are not affected.

 

 

 

... ahh, easy when explained. I've initialised the datepicker now, too, for the additional inputs and everything is working perfectly. Much appreciated, thanks.