add input type upon button click

Question

I am trying to add an type upon clicking the button.

Here is my jquery script:

$(function(){
  $("#add").click(function(){
  $("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name' /></td></tr>");
  })
});

Then my HTML markup:

<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table cellpadding="0" cellspacing="0" style="text-align:center;">
<thead>
    <tr>
        <th colspan="7">Add subject on the list of available subjects</th>
    </tr>
</thead>
    <tbody id="inputboxes">
        <tr class="dark">
            <td colspan="7">
                <input type="button" id="add" value="Click to add a subject" />
            </td>
        </tr>
    </tbody>
<tbody>
    <tr class="dark">
        <td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
    </tr>
</tbody>
</table>
</form>

#on page top
if(isset($_GET['submit']) print_r($_GET); // the only entry of array is the [submit'] => "Submit"

I can successfully generate an box, however it seems that whenever I hit submit, the box doesn't seem to be passed. Also how can I generate an increment in the name="" of generated box.

For the record, I found the workaround for this, moved the form tag outside of the table. Thanks everyone.

Is this not working for you? What is the problem that you are facing? — Vincent Ramdhanie
– Vincent Ramdhanie, Commented Dec 4, 2011 at 14:31
I edited my post, I accidentally submitted the question without having finishing it. — planet x
– planet x, Commented Dec 4, 2011 at 14:35

Will · Accepted Answer · 2011-12-04 14:41:21Z

3

For the submit button to work, you need to put your inputs in a form. You can add an increment in the name if you want to, but it is not necessary. If you submit inputs with the same name, they will be submitted as an array.

Adding increment:

$(function(){
    var i = 1;
    $("#add").click(function(){
        $("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name" + (i++) + "' /></td></tr>");
    })
});

Adding form:

<form action="url" method="POST">
    <table>
        <tbody id="inputboxes">
            <tr class="dark">
                <td colspan="7"><input type="button" id="add" value="Click to add a subject" /></td>
            </tr>
        </tbody>
        <tbody>
            <tr class="dark">
                <td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
            </tr>
        </tbody>
    </table>
</form>

answered Dec 4, 2011 at 14:41

Will

20.4k7 gold badges50 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

planet x Over a year ago

I used get as method of the form, edited my question. Thanks for the incrementing of name on generated box.

Bergi Over a year ago

Why don't you initialize i with zero?

Will Over a year ago

@Dee are you still having problems submitting the inputs? Bergi, You can if you want, I just chose to initialize i with one.

planet x Over a year ago

I just now. Thanks William. I moved the <form> outside of the <table>, this fix the issue. Inputs are now submitted properly.

Collectives™ on Stack Overflow

add input type upon button click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related