Reputation: 5747
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
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;
});
});
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
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>
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;
});
});
Upvotes: 1