Avatar of 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??
MySQL ServerAJAXJavaScript

Avatar of undefined
Last Comment

8/22/2022 - Mon

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");
			//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

			//add wrapper to fieldset
			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++){

Open in new window


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.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

Will try and get back to you....
Your help has saved me hundreds of hours of internet surfing.