Dynamic JavaScript form with select list
I am new to javascript and have almost no experience with jquery. The
following allows you to repeat a form for multiple candidates, most of it
works fine however I require help attaching the select list in the
following to the relevant row and the remove button does not at the moment
remove each select list:
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
<script>
(function($) {
$newcountForms = 1;
$.fn.newaddForms = function() {
var newform = "<table>" + "<tr>" + "<td>First Name:
<input type='text' name='FirstName[" + $newcountForms
+ "]'></td>" + "<td>Last Name: <input type='text'
name='LastName[" + $newcountForms + "]'></td>" +
"<td>Sex:</td><td> <input type='radio' name='Sex[" +
$newcountForms + "]' value='Male'>Male<br>" + "<input
type='radio' name='Sex[" + $newcountForms + "]'
value='Female'>Female</td>" +
"<td><button>remove</button></td>" + "</tr>" +
"</table>";
newform1 = $("<div>" + newform + "</div>");
$("button", $(newform1)).click(function() {
$(this).parent().parent().remove();
});
$(this).append(newform1);
var s = $('<select/>');
var o = [1, 2, 3];
for (var i in o) {
s.append($('<option/>').html(o[i]));
}
$("button", $(s)).click(function() {
$(this).parent().parent().remove();
});
$(this).append(s);
$newcountForms++;
};
})(jQuery);
$(function() {
$("#newbutton").bind("click", function() {
$("#newcands").newaddForms();
});
});
</script>
</head>
<body>
<!-- Button For New Candidates -->
<button id="newbutton">
New Candidate
</button>
<form>
<p>
<div id="newcands"></div>
</p>
</form>
</body>
</html>
No comments:
Post a Comment