Page 1 of 1

Dynamically Adding Form Elements

Posted: Thu Jun 24, 2010 2:02 pm
by Nikas
I am trying to create a dynamic form textfield to work with jQuery UI Calender.

My HTML:

Code: Select all

<fieldset style="azimuth:center; padding:10px; width:90%"><legend class="FieldsetLabel">Education</legend>
<div id="input1" class="clonedInput">

<table border="0" cellpadding="2" cellspacing="2">
<tr><td colspan="2">
</td></tr>
<tr><td class="FormLabel">Graduation Date: </td><td><input type="text" name="grad_datepicker1" id="grad_datepicker1" value="<?php if (isset($_POST['grad_datepicker1'])) echo $_POST['grad_datepicker1']; ?>" /> </td></tr>

<tr><td class="FormLabel">Course Title: </td><td><input type="text" name="course" id="course" value="<?php if (isset($_POST['course'])) echo $_POST['course']; ?>" /></td></tr>

<tr><td class="FormLabel">Name Of Institution: </td><td><input type="text" name="institution" id="institution" value="<?php if (isset($_POST['institution'])) echo $_POST['institution']; ?>" /></td></tr>

</table>
</div>
<input type="button" id="btnAdd" value="Add Field" />
<input type="button" id="btnDel" value="Remove Field" />
</fieldset>
jQuery:

Code: Select all

	$(document).ready(function() {
		$('#btnAdd').click(function() {
			var num		= $('.clonedInput').length;	// how many "duplicatable" input fields we currently have
			var newNum	= new Number(num + 1);		// the numeric ID of the new input field being added

			// create the new element via clone(), and manipulate it's ID using newNum value
			var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

			// manipulate the name/id values of the input inside the new element
			// newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
			
			newElem.find(':input').each(function() {
				  var name = $(this).attr('name').replace(/\d+$/, '');
				  $(this).attr({id: name + newNum, name: name + newNum});
			});


			// insert the new element after the last "duplicatable" input field
			$('#input' + num).after(newElem);

			// enable the "remove" button
			$('#btnDel').attr('disabled','');

			// business rule: you can only add 5 names
			if (newNum == 5)
				$('#btnAdd').attr('disabled','disabled');
		});

		$('#btnDel').click(function() {
			var num	= $('.clonedInput').length;	// how many "duplicatable" input fields we currently have
			$('#input' + num).remove();		// remove the last element

			// enable the "add" button
			$('#btnAdd').attr('disabled','');

			// if only one element remains, disable the "remove" button
			if (num-1 == 1)
				$('#btnDel').attr('disabled','disabled');
		});

		$('#btnDel').attr('disabled','disabled');
	}); 

$(function(){

	// Datepicker
	$('#grad_datepicker1').datepicker({
		dateFormat: 'MM yy'
	});
});
Now that I can add the 3 textfield onclicking the add button, it works with no issue.
However, I am unable to select the date (jQuery UI Cal) from the 2nd one onwards.

What is the issue?

Re: Dynamically Adding Form Elements

Posted: Mon Jun 28, 2010 12:40 pm
by Nikas
Anyone on this?

Re: Dynamically Adding Form Elements

Posted: Sun Jul 04, 2010 12:03 pm
by Nikas
Anyone on this please.

Or post me an alternative script/solution.

Thank you.

Re: Dynamically Adding Form Elements

Posted: Tue Jul 06, 2010 11:53 am
by Nikas
Looks like no one can solve it?