Jump to content

[SOLVED] document.getElementId('childCare').innerHTML not working


unkwntech

Recommended Posts

This is in the <head>:

<script type="text/javascript">
var num;
function buildForm(num)
{
	var divContent = '';
var i;
	if(num >= 5)
	 {
		document.getElementById('notice').innerHTML = '<br /><h4>For more then 5 children please contact haqq.childcare@gmail.com</h4><br />';
	 }
for (i=0;i<num; i=i+1) 
 {
 	if(i == 0)
 	 {
 		divContent = divContent +'<strong>First Child:</strong><br />';
 	 }
 	if(i == 1)
 	 {
 		divContent = divContent +'<strong>Second Child:</strong><br />';
 	 }
 	if(i == 2)
 	 {
 		divContent = divContent +'<strong>Third Child:</strong><br />';
 	 }
 	if(i == 3)
 	 {
 		divContent = divContent +'<strong>Fourth Child:</strong><br />';
 	 }
 	if(i == 4)
 	 {
 		divContent = divContent +'<strong>Fifth Child:</strong><br />';
 	 }
    	divContent = divContent +'Name: <input type="text" name="name' +i +'"><br />Age: <input type="text" name="age' +i +'" maxlength="2" size="4"><br />	Gender: <select name="gender' +i +'"><option value="male">Male</option><option value="female">Female</option></select><br /><br />';
 }
document.getElementById('childCare').innerHTML = '';
document.getElementById('childCare').innerHTML = divContent;
}
</script>

and this in the body:

<form action="index.php/childcareregistration/" method="POST">
Number of Children: 
<select>
	 <option value='1' onclick="buildForm('1');" selected>1</option>
 <option value='2' onclick="buildForm('2');">2</option>
 <option value='3' onclick="buildForm('3');">3</option>
 <option value='4' onclick="buildForm('4');">4</option>
 <option value='5' onclick="buildForm('5');">5</option>
</select><br /><br />
Your Name: <input type="text" name="parentName"><br />
Your Phone Number: <input type="text" name='parentPH'><br />
<div id='childCare'>...</div>

This works great as I want it to in FF, but it does not work at all in IE/Chrome.

The code is in place here: http://www.qabeelathaqq.com/index.php/childcare/

Link to comment
Share on other sites

FF recognizes the onclick event on a select menu; where IE does not seem to - I don't know about Chrome; I haven't designer beta tested it yet; so I don't know much about it, but it seems (from what you are saying) - it is the same way. You want to totally do away with the onclick() event and add a onchange() event to your select tag and set the num parameter to this.value; example below:

 

<form action='index.php/childcareregistration/' method="POST">
Number of Children: 
<select onchange='buildForm(this.value)'>
	 <option value='1' selected>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
 <option value='5'>5</option>
</select><br /><br />
Your Name: <input type='text' name='parentName'><br>
Your Phone Number: <input type='text' name='parentPH'><br>
<div id='childCare'>...</div>
<div id='notice'>...</div>

</form>

 

This works in FF & IE; you'll have to test it for yourself in Chrome, but it should work in all three browsers.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.