Link to home
Start Free TrialLog in
Avatar of CCBRONET
CCBRONET

asked on

Ajax Form

I have an ajax form with 2 tabs. On the first tab there is a textbox to enter the number of employees and in the 2nd tab the user has to enter the details of employees. Now, if I enter no. of employees = 5 in the first tab then the second tab has to allow to enter that many employees details.

How do I do this in ajax using arrays??
Or is there a better way??
Avatar of nap0leon
nap0leon

If the tabs are on the same HTML page, you do not need AJAX.  When the user enters the number of employees, you simply create that many "employee containers" on the second tab.  

Here is an example that you should be able to modify fairly easily to your needs.  This is from an order form that I built.  The order form starts off with one row containing 5 fields.  When the user clicks "Add Another", this function creates an additional row in the table to create the necessary form elements.  So that each form field has a unique name, the function uses the numeric index of each row as part of the field names, like "product_name_5" is the name of the product in the 5th row.  It gets the count of current records by looking at the number of items that have class="orderRow" (you could name yours "employeeRow" or similar).  Also, instead of appending the new rows to "theorderForm", you would, of course, look for the ID of the DIV containing your employee rows.

	    function addRecord(){
		var fieldsetBody = document.getElementById("theorderForm");
		if (! fieldsetBody ) {
			//alert("theorderForm not found");
		}else{
			//fieldset exist - proceed
			var numberOfRecords = parseInt($('.orderRow').length);
			var newRecordNum = numberOfRecords + 1;

			//alert('You have ' + numberOfRecords + ' so far, adding number ' + newRecordNum);

			//the row
			var wrapper = $('<tr id="orderRow_' + newRecordNum + '" class="orderRow"></tr>');
			//the td elements
			var types = $('<td><select class="selType" name="product_types_' + newRecordNum + '" id="product_types_' + newRecordNum + '" onChange="getProductNames(this)"></select></td>');
			var names = $('<td><select class="selName" name="product_names_' + newRecordNum + '" id="product_names_' + newRecordNum + '" onChange="getProductAttributes(this)"></select></td>');
			var quantity = $('<td><select class="selQty" name="quantity_' + newRecordNum + '" id="quantity_' + newRecordNum + '" onChange="setSubTotal(this)"></select></td>');
			var price = $('<td><input type="text" class="price" name="price_' + newRecordNum + '" id="price_' + newRecordNum + '" readonly="true" onChange="" /></td>');
			var subtotal = $('<td><input type="text" class="subtotal" name="subtotal_' + newRecordNum + '" id="subtotal_' + newRecordNum + '" readonly="true" onChange="" /></td>');

			//add inputs to wrapper
			wrapper.append(types);
			wrapper.append(names);
			wrapper.append(quantity);
			wrapper.append(price);
			wrapper.append(subtotal);

			//add wrapper to fieldset
			$('#theorderForm').append(wrapper);
			getProductTypes('product_types_' + newRecordNum); //fill the "product_types" dropdown with options
		}
	    }

Open in new window


To add multiple rows at the same time, you would simply call this function multiple times, for example:

function addRows(num) {
  for (i=0;i<num;i++){
    addRecord()
  }
}

Open in new window

Avatar of CCBRONET

ASKER

On the second tab there are 3 textboxes to enter first name,last name and age of the employee.

How to add , modify and store temporary data in ajax.
ASKER CERTIFIED SOLUTION
Avatar of nap0leon
nap0leon

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Will try and get back to you....