CODEWITHSUNDEEP
javascriptjqueryhtml
NickF
NickF

Reputation: 5747

jQuery - dynamic form

I'm trying to build a HTML form that contains: 1. textfield 2. select 3. check box 4. button to add 1-3 as another table row, see the jFiddle

my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>
        td {
            padding: 10px;
            margin-left:auto;
            margin-right:auto;
        }
    </style>

    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#first").clone(false).removeAttr("id").appendTo($("table"));
            });
        });

    </script>
</head>
<body>
    <div id="wrapper">
        <form>
            <div class="field-section">
                <table>
                    <tr>
                        <th>Field name</th>
                        <th>Field type</th>
                        <th>Required</th>
                    </tr>
                    <tr id="first">
                        <td><input type="text"/></td>
                        <td>
                            <select>
                                <option>Text</option>
                                <option>Email</option>
                            </select>
                        </td>
                        <td><input type="checkbox"></td>
                    </tr>
                </table>
                <button>+</button>
            </div>
            <input type="submit" value="create">
        </form>
    </div>
</body>
</html>

It seems that each click submits the form.
Questions:
1. How solve this problem?
2. What is the best way to send the data from that table?

Upvotes: 0

Views: 587

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42746

since the button is within the form it defaults to a submit button you need to either return false or use the preventDefault() function within the click handler, Either one of these will prevent the default action of the element to trigger. 

$(document).ready(function(){
    $("button").click(function(){
        $("#first").clone(false).removeAttr("id").appendTo($("table"));
        return false;
    });
});

JSFiddle

To collect the data just use jQuery's serialize(), if needing to send like through .ajax. 

var data = $("#formID").serialize()

serialize will give you a name-value pair string of all elements.

Or to use the fields in your javascript use like $("#formId input") and $("#formId select") to capture all the input, select elements.

Upvotes: 1

Satpal
Satpal

Reputation: 133453

As button is in form its default behavior is submit

So you have to add type="button" to button like

 <button type="button" >+</button>

DEMO

OR

You need to use either return false or use the preventDefault()

$(document).ready(function(){
    $("button").click(function(){
        $("#first").clone(false).removeAttr("id").appendTo($("table"));
        return false;
    });
});

DEMO

Upvotes: 1

Related Questions