In this article I’ll discuss how to add an unlimited number of additional form elements to a form and then save to a database. The latter part is the key here as a variety of tutorials exist on adding form elements, but I have yet to see anywhere that actually explains how to manipulate these added form fields. For example, how to get values to store them in a MySQL datbase. In the example we’ll have a simple user signup form where the user can add multiple fields to describe their favourite websites. The basic Form HTML is as follows (nothing amazing, just a simple html form):
<script src="js/jquery.js" type="text/javascript"></script>
<h1>New User Signup</h1>
<form action="index.php" method="post">
<label for="name">Username:</label>
<input id="name" name="name" type="text" />
<label for="name">Password:</label>
<input id="password" name="password" type="text" />
<div id="container">
<a href="#"><span>» Add your favourite links.....</span></a>
</div>
<input id="go" class="btn" name="btnSubmit" type="submit" value="Signup" />
</form>
The only part that isn’t standard is highlighted above. This is simply the link users click to add additional form fields on the fly. To make that happen we’ll need some JQuery:
var count = 0;
$(function(){
$('p#add_field').click(function(){
count += 1;
$('#container').append('<strong>Link #' + count + '</strong>'+ '<input id="field_' + count + '" name="fields[]' + '" type="text" />' );
});
});
Continue reading Adding Unlimited Form Fields With JQuery and Saving to a Database