Jquery to select input from specific form

Question

0.00/5 (No votes)

See more:

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 26-Nov-14 11:16am

vguzman

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sergey Alexandrovich Kryukov · Answer 1 · 2014-11-26T11:47:00

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