Javascript not working when innerhtml is added

[68thorby68]

Many thanks if you are looking at this.

I have a simple order form that allows users to place an order for an item. The form also allows the user to add more items, calling a javascript function that utilizes innerhtml.

Included in each order form, are dates. I am using a jquery calendar to populate the dates.

When the original form is loaded, the calendar works fine, but when I call the function to add items via the innerhtml, the calendar does not work, either on the original form text fields, or the form text fields added by the innerhtml function.

When the form loads for the first time I have, wrapped in a div with id=image_details, 2 form fields, below:

<div><label>Collection Date:</label></div>
<div><input type="text" name="1_colct" id="date" class="required"/></div>
<div><label>Delivery Date:</label></div>
<div><input type="text" name="1_dlvr" id="datea" class="required"/></div>
<div><a href='#' onclick='addInput()'>Add Another Parcel</a></div>

When the form text field is clicked it calls the following jquery to display an interactive calendar

$(function() {
$("#date").datepicker({ showOtherMonths: true });
$("#datea").datepicker({ showOtherMonths: true });
$("#date"+newnumber+"").datepicker({ showOtherMonths: true });
$("#datea"+newnumber+"").datepicker({ showOtherMonths: true });
});

every is fine up to this point

If I select Add Another Parcel, this calls javascript function addInput, below (note I'm using the newnumber variable to prefix name and id to create unique values that will be used later).

function addInput() {	
var number=2;
var newnumber = number+fields;
document.getElementById('image_details').innerHTML += "<div><label>Collection Date:</label></div><div><input type='text' name='"+newnumber+"_colct' id='date"+newnumber"' class='required'/></div><div><label>Delivery Date:</label></div><div><input type='text' name='"+newnumber+"_dlvr' id='datea"+newnumber"' class='required'/></div>";
fields += 1;
}

This is where it all goes wrong.
I cannot call the calendar from the original id="date" or id="datea" (as I could before)
and the html added via innerhtml will not allow me to call the calendar from id='date"+newnumber"' or id='datea"+newnumber"'

Also, as it seems that the innerhtml function does not output the html in the conventional way, therefore I cannot use the view source function of the browser to assist in the debug.

Can anyone help?

[Troy III]

Many thanks if you are looking at this.

I have a simple order form that allows users to place an order for an item. The form also allows the user to add more items, calling a javascript function that utilizes innerhtml.

Included in each order form, are dates. I am using a jquery calendar to populate the dates.

When the original form is loaded, the calendar works fine, but when I call the function to add items via the innerhtml, the calendar does not work, either on the original form text fields, or the form text fields added by the innerhtml function.

When the form loads for the first time I have, wrapped in a div with id=image_details, 2 form fields, below:

<div><label>Collection Date:</label></div>
<div><input type="text" name="1_colct" id="date" class="required"/></div>
<div><label>Delivery Date:</label></div>
<div><input type="text" name="1_dlvr" id="datea" class="required"/></div>
<div><a href='#' onclick='addInput()'>Add Another Parcel</a></div>

When the form text field is clicked it calls the following jquery to display an interactive calendar

$(function() {
$("#date").datepicker({ showOtherMonths: true });
$("#datea").datepicker({ showOtherMonths: true });
$("#date"+newnumber+"").datepicker({ showOtherMonths: true });
$("#datea"+newnumber+"").datepicker({ showOtherMonths: true });
});

every is fine up to this point

If I select Add Another Parcel, this calls javascript function addInput, below (note I'm using the newnumber variable to prefix name and id to create unique values that will be used later).

function addInput() {	
var number=2;
var newnumber = number+fields;
document.getElementById('image_details').innerHTML += "<div><label>Collection Date:</label></div><div><input type='text' name='"+newnumber+"_colct' id='date"+newnumber"' class='required'/></div><div><label>Delivery Date:</label></div><div><input type='text' name='"+newnumber+"_dlvr' id='datea"+newnumber"' class='required'/></div>";
fields += 1;
}

This is where it all goes wrong.
I cannot call the calendar from the original id="date" or id="datea" (as I could before)
and the html added via innerhtml will not allow me to call the calendar from id='date"+newnumber"' or id='datea"+newnumber"'

Also, as it seems that the innerhtml function does not output the html in the conventional way, therefore I cannot use the view source function of the browser to assist in the debug.

Can anyone help?

That's all nice but what are

<div><label>Collection Date:</label></div>
<div><input type="text" name="1_colct" id="date" class="required"/></div>
<div><label>Delivery Date:</label></div>
<div><input type="text" name="1_dlvr" id="datea" class="required"/></div>
<div><a href='#' onclick='addInput()'>Add Another Parcel</a></div>

all those divs there for?!

The command

console.log( [container].innerHTML )

will give you an exact copy of your dhtml code, so you can inspect and compare it.

!NOTE:
IDs and (their old predecessors once deprecated) NAMEs -must begin with a letter [a-z, A-Z] or underscore! -No leading digits, or other special meaning characters allowed.

More true to a correct HTML[5] code would be:

<label>Collection Date:<br>
<input type=text name=colct_1 id=date class=required></label><br>
<label>Delivery Date:<br>
<input type=text name=dlvr_1 id=datea class=required></label><br>
<a href=# onclick='addInput()'>Add Another Parcel</a><br>

This will also enable you to click on the Label for your input feed.

So you should try your script with the corrections I've made, than we'll see...

[68thorby68]

Many thanks Troy,

First I've tidied most of my CSS, the CSS and html pages will be about a third of original size once finished, and far easier to manage.

Using the IE developer tools and viewing the HTML I can see that when the page originally loads, JQuery (triggered by the id and class of the form input field) places additional code in the relevant form input field. However, when the innerhtml is appended to the page, the relevant call to JQuery is not activated (i.e. additional code in the relevant form input field is not added).

I've tried to hard code the "additional code" to the innerhtml statement, but this still doesn't trigger calendar in the newly created form input field.

I've checked the created id's and classes to ensure they confirm to the required standards that part is OK.

It seems that when the page loads, some javascript or Jquery binds the relevant input filed and the Jquery/javascript together, however the binding does not occur when the innerhtml is appended.

Unfortunately I do not know enough about javascript or jquery to even start to think about how this can be resolved. Any ideas?

[Troy III]

sorry, cant fix jQuery. And since I don't see or know by hart how is jQuery hacking the existing html code to achieve its functionality, there's not much I can add, except that maybe names and ids used as as a couple are confusing the browser api.

[tekwalker]

please call that callender function again, after the innerHTML insert