We have already disucssed with examples the power of Jquery, whether it is Jquery with Ajax, image uploading, form validation etc. We can very easily add fields dynamically to our html code dynamically.
This means a virtual HTML code is inserted into your HTML code. The basic fundamental is that we are just appending required HTML code on demand.
I used the word appending because this is the function name being used by Jquery itself i.e. “append()”.
Lets go through a simple example to show how this can be done and can be used in variety of ways.
Click here to view this in action
Case study
We are providing a form on the website in which a user can fill in a “Word” and its definition. The user can click on the “Add More” link to add more words with definition.
Simple task which can be done very easily through Jquery.
Following are the steps involved-
1. A simple form which contains textbox and a textarea with naming convention as an array i.e. <input type=”text” name=”word_txt[]“>
This is done because we will be adding multiple textboxes and textareas.
2. We link “Add More” will contain a call to a javascript function to add more textboxes.
3. We will be also providing a remove link with every new text boxes added. The remove link will call a remove javascript function.
4. VERY IMP: A <div> element to which we will append our additional fields.
5. A hidden field to store the counter “id”. This is used to provide unique name to our textbox and textarea.
6. Finally the form will be submitted to a PHP file to get all the submitted values.
Here is what you are looking for-:
HTML file with javascript code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function addFormField()
{
var id = document.getElementById("id").value;
//JQUERY CODE
$("#fields").append("<p valign='top' id='row" + id + "'>word <input type='text' size='20' name='word_txt[]' id='word_" + id + "'> Meaning <textarea name='meaning_txt[]' rows='3' cols='20' id='meaning_" + id + "'></textarea><a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a></p>");
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
//REMOVE FUNCTION
function removeFormField(id) {
$(id).remove();
}
</script>
<style>
body{
font-type: verdana;
font-size: 12px;
}
table{
border:1px solid #dddddd;
}
</style>
<body>
<table width="50%" align="center">
<tr>
<td>
<form action="get_add_new_fields.php" method="post" id="form1">
<p>
Click on the Add More link below to add words and and their meaning.
<p> </p><p> </p>
</p>
<!--HIDDEN FIELD, AS A COUNTER-->
<input type="hidden" id="id" value="1">
Word <input type='text' size='20' name='word_txt[]'> Meaning <textarea name='meaning_txt[]' rows='3' cols='20'></textarea>
<!---THE CODE WILL APPEND THE ADDITION VALUES TO THE FOLLOWING DIV-->
<div id="fields"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
</td>
</tr>
<tr>
<td>
<p> </p><p> </p>
<p>
<a href="#" onClick="addFormField(); return false;">Click here to add more...</a>
</p>
</td>
</tr>
</table>
</body>
</html>
PHP file to accept the values:
<?php
//Get the values of all the fields
$meaning_txt = $_POST["meaning_txt"];
$word_txt = $_POST["word_txt"];
foreach($word_txt as $key=>$val)
{
echo "Word: " . $val . " ; With Meaning As: " . $meaning_txt[$key];
echo "<br>";
}
?>
That’s it. Easy. Things with Jquery are endless. Endless to an extend to make our task easier than ever.
It is a really good read for me, should admit that you’re one of the best bloggers I ever saw. Thanks for posting this informative article UncleCode.Com – Technology Blog | Jquery Add New Text Fields Dynamically . Keep up the great work, I have added you to my blogroll.
UncleCode.Com – Technology Blog | Jquery Add New Text Fields Dynamically was a nice article, thank you for sharing this informative news. It is always good when you cannot only be informed, but also be entertained! I will visit your blog often for the newest stuff.
Thanks a lot for any quite clear and practical submit. I’m unquestionably a violator of many of these rules. I frequently identify me conflicted when writing a weblog posting because I see myself personally writing greater than many people choose to read, but I really feel that I have got to do the topic matter rights by thoroughly addressing it. I experience that by pursuing a number of these principles I conclude up cutting out very important aspects on the discussion. I guess you’ve got to notice a balance.
Can i take a one small pic from your site?
Hi, I have already seen it somethere…
AlexAxe