www.webdeveloper.com
Results 1 to 6 of 6

Thread: Adding multiple fields by clicking a button

  1. #1
    Join Date
    Oct 2012
    Posts
    27

    Adding multiple fields by clicking a button

    Hi. I have a form where I want to be able to add two consecutive fields for five times.

    Code:
    <script language="javascript">
    fields = 0;
    function addInput() {
    if (fields != 5) {
    document.getElementById('text').innerHTML += "<br>Name: <input type='text' name='name' /><br />Email: 
    <input type='text' name='email' /><br>";
    fields += 1;
    } else {
    document.getElementById('text').innerHTML += "<br />Olny five participants allowed. Thank you.";
    document.form.add.disabled=true;
    }
    }
    </script>
    But it is complaining about this line:
    Code:
    document.getElementById('text').innerHTML += "<br>Name: <input type='text' name='name' /><br />Email: 
    <input type='text' name='email' /><br>";
    Looks like it is not correct to write those field names before the input tag. If not, how should that be done?

    Thanks in advance.

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    There wasn't much wrong with the code except that you are not allowed to have strings spanning over multiple lines in the source code. If you want to do that you would need to break them up and concatenate them again afterwards.

    Code:
    <div id="text"></div>
    
    <script type="text/javascript">
    
    	var fields = 0;
    	function addInput()
    	{
    		var text = document.getElementById('text');
    		if (fields++ < 5) {
    			text.innerHTML += '<br />Name: <input type="text" name="name" /><br />Email: <input type="text" name="email" /><br />';
    		} else {
    			text.innerHTML += '<br />Only five participants allowed. Thank you.';
    			document.form.add.disabled = true;
    		}
    	}
    
    	addInput();
    	addInput();
    	addInput();
    	addInput();
    	addInput();
    	addInput();
    	addInput();
    	addInput();
    
    </script>
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Oct 2012
    Posts
    27
    Thanks alot bionoid. Now it works fine. One more question; I want to have those inputs inside <tr> and <td> tags, but the code seems to ignore them. When I look ad the browser's source code, they are not applied. Is there a way I could do this? This is my shot, but doesn't work.

    Code:
    text.innerHTML += '<br /><tr><td>Name: </td><td><input type="text" name="name" /><br /></td></tr><tr><td>Email: </td><input type="text" name="email" /></td></tr><br />';

  4. #4
    Join Date
    Oct 2012
    Posts
    27
    Got it working. Had to add the <table> tags. That easy.

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Cool. Sorry, I had forgotten to come back to this thread before.

    As you are using a <table> now, don't forget to remove the <br /> tags in that string.
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Oct 2012
    Posts
    27
    No problem. Yep, I removed those <br /> tags. Thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles