PDA

View Full Version : Javascript fails to update in IE



CarbonX
13 Dec 2007, 04:35 PM
Hello everyone, this is my first post here. I've been looking around other forums for an answer to this problem but I'm yet to find anything worthwhile on the subject. So I decided to join up and see if you guys can help me.

I have written a short script that is supposed to add some inputs inside a div tag. Everything works fine in FireFox and Safari. But IE is having some problems with it. The first one will only update if you click the button, then click off of it, the second part just plain doesn't work.

Here is the Javascript:

var nomination = '<h2>ENTER THE INFORMATION OF YOUR NOMINEE</h2><br/><table border="0" cellpadding="3"><tr><td>Name:</td><td><input type="text" name="Nominee_Name" required></input></td></tr><tr><td>Company:</td><td><input type="text" name="Nominee_Company" required></input></td></tr><tr><td>Address:</td><td><input type="text" name="Nominee_Address" required></input></td></tr><tr><td>Phone Number:</td><td><input type="text" name="Nominee_Phone" required></input></td></tr><tr><td>E-Mail:</td><td><input type="text" name="Nominee_Email" required></input></td></tr></table><br/>';

var administrator = '<h2>ENTER YOUR ADMINISTRATIVE ASSISTANT\'S INFORMATION</h2><br/><table border="0" cellpadding="3"><tr><td>Name:</td><td><input type="text" name="Administrator_Name" required></input></td></tr><tr><td>Title:</td><td><input type="text" name="Administrator_Title" required></input></td></tr><tr><td>Address:</td><td><input type="text" name="Administrator_Address" required></input></td></tr><tr><td>Phone Number:</td><td><input type="text" name="Administrator_Phone" required></input></td></tr><tr><td>E-Mail:</td><td><input type="text" name="Administrator_Email" required></input></td></tr><tr><td>Comments:</td><td><textarea name="Comments" rows="10" cols="25"></textarea></td></tr></table><br/>';

var blank = false;

function change(text, id)
{
var element = document.getElementById(id);
element.innerHTML = text;
}

function change_toggle(text, id)
{
var element = document.getElementById(id);
if(!blank)
{
element.innerHTML = text;
blank = true;
}
else
{
element.innerHTML = '';
blank = false;
}
}
</script>

And here is the HTML that it is used in:

<form onsubmit="return checkRequired(this)">
<h2>PLEASE ENTER YOUR CONTACT INFORMATION</h2><br/>
<table border="0" cellpadding="3">
<tr>
<td>Name:</td>
<td><input type="text" name="Name" required></input></td>
</tr>
<tr>
<td>Title:</td>
<td><input type="text" name="Title" required></input></td>
</tr>
<tr>
<td>Company:</td>
<td><input type="text" name="Company" required></input></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="Address" required></input></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="Phone" required></input></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input type="text" name="Email" required></input></td>
</tr>
</table><br/>
<input type="radio" name="attending" value="attending" onchange="change('', 'nominee')" checked>I will attend</input><br/>
<input type="radio" name="attending" value="nominating" onchange="change(nomination, 'nominee')">I will not attend, but am nominating another person</input><br/>
<input type="radio" name="attending" value="not_attending" onchange="change('', 'nominee')">I will not attend</input><br/>

<div id="nominee">

</div><br/>

<input type="checkbox" name="travel" value="arrangements" onchange="change_toggle(administrator, 'travel')">Check this box for premade travel arangements</input><br/>

<div id="travel">

</div><br/>

<input type="submit" name="submit"></input>
</form>

I know the form doesn't actually do anything yet, I just want to get the script working before I write the backend stuff. Cheers! :drink:

-CarbonX