CODEWITHSUNDEEP
javascriptjqueryinputappend
planet x
planet x

Reputation: 1607

add input type upon button click

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.

Upvotes: 0

Views: 2137

Answers (1)

Will
Will

Reputation: 20235

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>

Upvotes: 3

Related Questions