Click here to Skip to main content
15,919,178 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have several forms in one page, I need to select the inputs on the form where the submit button is being clicked and send it via ajax to a php page.
This is what I have:
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
$(document).ready(function(){	
	$('[name="Submit"]').click(function() {
		var $this = $(this);
		var tzip = 'zip=' + $this.parent().find('#zip').val() + '&Date1=' + $this.parent('form').find('Date1').val() + '&Date2=' + $this.parent('form').find('#Date2').val() + 'Date3=' + $this.parent().find('#Date3').val() + '&Date4=' + $(this).find('#Date4').val() + 'Date5=' + $(this).find('#Date5').val() + '&Date6=' + $(this).find('#Date6').val();
		alert (tzip);
        $.ajax({
			url: 'updateZipcodes.php?',
			data: tzip,
			dataType: 'html',
			cache: false,
			type: 'GET',
			success: function(response) {
				successCallback(response);
			}
		});
		function successCallback(responseObj){
			//do something like read the response and show data 
			$('#ZipsResult').html(responseObj);
		}
	});
});
</script>

All the forms look like this one:
<form id="form" name="form" >
				<th>20723</th>
				<td><input name='Date1' id='Date1' type='text' value='' maxlength='10' size='10'  /></td>
				<td><input name='Date2' id='Date2' type='text' value='' maxlength='10' size='10'  /></td>
				<td><input name='Date3' id='Date3' type='text' value='' maxlength='10' size='10' /></td>
				<td><input name='Date4' id='Date4' type='text' value='' maxlength='10' size='10' /></td>
				<td><input name='Date5' id='Date5' type='text' value='' maxlength='10' size='10' /></td>
				<td><input name='Date6' id='Date6' type='text' value='' maxlength='10' size='10' /></td>
				<td><input name="zip" id="zip" type="hidden" value="20723" /><input name='Submit' type='button' value='Submit' /></td>
				</form>


I get the value for the 'zip' input but not the following inputs. How can I fix this ? Thanks,
Posted
Comments
vguzman 26-Nov-14 17:21pm    
This is what I get from that form:

zip=20723&Date1=undefined&Date2=undefinedDate3=undefined&Date4=undefinedDate5=undefined&Date6=undefined
Sergey Alexandrovich Kryukov 26-Nov-14 17:35pm    
No wonder, you didn't put any data...
—SA
Sergey Alexandrovich Kryukov 26-Nov-14 17:32pm    
Why not using the form submit functionality? If you cannot use it, get rid of the element "form" at all...
—SA
vguzman 26-Nov-14 18:33pm    
Hi Sergey, thanks for your information. I probably wasn't clear on how the page works. I have SEVERAL forms on it, it could be one or two or 20 on it with the same exact layout (inputs named 'zip', 'Date1', 'Date2', etc). Each for has its own 'Submit' button and I want to send the form inputs separate, meaning form by form. All the forms have input on them.
I can get the value from the 'zip' input but it doesn't work for the other inputs on the same form.
any ideas why ? Thanks.
Sergey Alexandrovich Kryukov 26-Nov-14 19:14pm    
It does not matter at all. I explained in my answer, that effectively you don't have any forms at all, you have "form" elements which do not affect anything and therefore redundant. Therefore, forget about forms (or use them, which is a different approach). If you do Ajax and forget forms, you merely have some sub-sets of your page's set of controls. And each of your buttons (which are not "submit" controls) can deal with one or another subset of control to get data for Ajax. I hope it's now clear.
—SA

1 solution

It's not clear why you don't use the form functionality itself with the button of the "submit" type, which is designed specifically to send request to the server. The request is not Ajax, but it is composed in a standard way, by key-value pairs, where the keys values are based on the values of the name attributes of input control. If the server part is yours, this is the simplest and standard way to send HTTP requests already fully implemented for you.

I can imagine that you cannot do it though. For example, if the server part is not yours and expects what it expects, the HTTP request data in some exact form, using the "get" method. Then you may really need Ajax. But in this case, the element form would do nothing. Get rid of it. Moreover, you don't need those name attributes. As soon as you don't have an input of "submit" type, the form element is redundant by definition. I would advise to use only the id; don't forget they should be unique in the page.

Collecting the data using jQuery is quite simple. First, you need to get all jQuery wrappers of the controls in question. As I advised you to use the id, you will need ID selectors, for example, you will have the wrappers as $("#Date1"), $("#Date1"), etc. Please see:
http://api.jquery.com/id-selector/[^].
If you still want to use the name attributes, you can use the name selectors: http://api.jquery.com/attribute-equals-selector/[^];
please see other selectors: http://api.jquery.com/category/selectors[^].

And then you get read values of the input controls using jQuery .val(). For example:
JavaScript
firstText = $("#Date1");
// ...
firstText.val();
// ...


Please see: http://api.jquery.com/val[^].

—SA
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900