using jquery to get html form input values in raw html

Question

How do you use jquery (or anything else for that matter) to get the form values from the argument in the callback of a jquery.get() call provided it is html?

for instance, say the following call:

$.get('somePage.aspx', function (data) {  
     alert('here');
            });

called the callback function with the following html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
    <form name="form1" method="post" action="frmMontageWait.aspx?action=checkStatus&amp;guid=a224b7c3-fec8-4b55-870e-a33f15bad629" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTc5NTA2NTY5NmRkyx3R93TAvDqSvxEh6aKHeTSr0ZI=" />
</div><div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLA8/fiDgLP15SfBAKG69WwDBRTCbRBksmbw/qTkRQ4tx/K3bES" />
</div>
        <input type="hidden" name="hdnInput1" id="hdnInput1" value="100" />
        <input type="hidden" name="hdnInput2" id="hdnInput2" value="99" />
    </form>
</body>
</html>

How do you go about getting the values of hdnInput1 and hdnInput2 in the callback?

Jasper · Accepted Answer · 2012-01-17 20:52:57Z

4

The data variable in your code stores the server-response, you can parse it for the information you want. By default this server response will be in plain text, so you have to parse that string into a jQuery object which will create DOM elements out of the string:

//DOM-ize the server-response
data = $(data);

//now we can search the server-response like it is in the DOM (but it isn't)
var inputOne = data.find('#hdnInput1').val(),
    inputTwo = data.find('#hdnInput2').val();

This code goes in your success callback for your AJAX call.

Here is a demo: http://jsfiddle.net/PDHbV/

I'm not 100% sure that the HTML you posted is stored in the data variable, if it isn't then that mean the HTML is already in the DOM and you can search for it normally:

var inputOne = $('#hdnInput1').val(),
    inputTwo = $('#hdnInput2').val();

edited Jan 17, 2012 at 20:52

answered Jan 17, 2012 at 20:47

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kristian · Accepted Answer · 2012-01-17 20:48:55Z

1

val1 = $('#hdnInput1').val();
val2 = $('#hdnInput2').val();

answered Jan 17, 2012 at 20:48

Kristian

22k19 gold badges108 silver badges184 bronze badges

1 Comment

Jasper Over a year ago

This would create global variables (which isn't necessary). To put the variables in the correct scope, use the var statement: var val1 = $('#hdnInput1').val(), val2 = $('#hdnInput2').val();

Collectives™ on Stack Overflow

using jquery to get html form input values in raw html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related