Page 1 of 1

Problem creating new form elements using javascript

Posted: Sat Jul 25, 2009 5:38 pm
by ronnietherocket
I am trying to write a script that inserts new input fields while the person is filling out a form. While I can do this, placement of the submit button is awkward as a result of trying to work around a bug.

This is the html that I would like to use, when inserting a new field, it would get added to the end of the current table of fields.

Code: Select all

 
<form action="forming.php" name="form" id="form" method="post">
<table id="table">
    <tr><td><a href="javascript&#058;newField();">New Element</a></td></tr>
    <tr><td><input type="text" name="name[]"></input></td></tr>
</table>
        <input type="submit" value="Try!" />
</form>
 
However, in order to get it to work I have to use this:

Code: Select all

 
<table id="table">
<form action="forming.php" name="form" id="form" method="post">
    <tr><td><input type="submit" value="Try!" />
    <tr><td><a href="javascript&#058;newField();">New Element</a></td></tr>
    <tr><td><input type="text" name="name[]"></input></td></tr>
</form>
</table>
 
This puts the submit button at the top of the form, which I want to avoid.

Here is my javascript code

Code: Select all

 
function newField()
{
    var form=document.getElementById("form");
    var tr=document.createElement('tr');
    var td=document.createElement('td');
    var input=document.createElement('input');
            
    input.setAttribute("type", "text");
    input.setAttribute("name", "name[]");
                
    form.appendChild(tr);
    tr.appendChild(td);
    td.appendChild(input);
}
 
Btw, the resultant php code works as expected.

Re: Problem creating new form elements using javascript

Posted: Sat Jul 25, 2009 8:15 pm
by jackpf
That's an awfully odd way of going about things.

So let me get this straight...you want to add a new input, but want the submit button below it?

If so, why not create an empty span tag above the submit button but below the input, and append the elements to that?

Re: Problem creating new form elements using javascript

Posted: Sat Jul 25, 2009 9:30 pm
by ronnietherocket
jackpf wrote: [1]That's an awfully odd way of going about things.

[2]So let me get this straight...you want to add a new input, but want the submit button below it?

[3]If so, why not create an empty span tag above the submit button but below the input, and append the elements to that?
1) It is the only way I could think of doing it, but what method would be less odd?
2) Yes.
3) When I tried this, it didn't work. However, using the <tbody></tbody> tags, it did. I am guessing this is the case as the thead and tfoot elements are supposed to be constant irrespective of the content inside the page, while tbody is supposed to represent data that can generated "dynamically", through php, asp.net or any similiar language. Whereas if you don't use it, the browser can't tell where to insert the new row. This last little explanation was in the event that anybody else has a similiar problem, but I am not entirely certain as to its correctness.

Re: Problem creating new form elements using javascript

Posted: Sat Jul 25, 2009 9:52 pm
by jackpf
ronnietherocket wrote:When I tried this, it didn't work.

Code: Select all

<script>
    function new_input()
    {
        var e = document.createElement('input');
        
        e.type = 'text';
        
        var span = document.getElementById('new_input');
        
        span.appendChild(e);
        span.innerHTML += '<br />';
    }
</script>
 
<form>
<input type="text" /><br />
<span id="new_input"></span><br />
<a href="#" onclick="new_input();">clicky</a><br />
<input type="submit" />
</form>
There you go, like that.