get input value from html in ajax response

Question

To get the html response of the page, I use:

var theUrl = "https://example.com/users/22";
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send();
var html = xmlHttp.responseText;

This will now return a 535 line html page. If we simply had that source code on our current page, to get the value of the tag (12345) as shown below:

<input name="token" type="hidden" value="12345" />

we would simply use:

document.getElementsByName("token")[0].value;

But since the HTML is in the ajax response as a variable named html how do I get the value of the input with name token? Can I somehow convert it to a DOM element and then run that code? javascript only please, no jQuery. Thanks.

This answer might help you with your problem: stackoverflow.com/questions/9598791/… — Wa Kai
– Wa Kai, Commented Dec 21, 2015 at 14:34

Chizzle · Accepted Answer · 2015-12-21 14:58:40Z

2

Try creating an HTML element, adding the response, and then parse it. We need to add a class name to select specific inputs with getElementsByClassName, or, if you want to select all inputs, you could use getElementsByTagName

var responseText = '<input name="token" class="token" type="hidden" value="12345" />'
var el = document.createElement( 'html' );
el.innerHTML = responseText;
console.log(el.getElementsByClassName("token")[0].value);

edited Dec 21, 2015 at 14:58

answered Dec 21, 2015 at 14:34

Chizzle

1,7151 gold badge18 silver badges26 bronze badges

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

2 Comments

bobby sapp Over a year ago

Getting: Uncaught TypeError: el.getElementsByName is not a function.

Chizzle Over a year ago

Looks like you can only call getElmentsByName on the document. We can call getElemetnsByClassName though on the response

Chizzle · Accepted Answer · 2015-12-21 17:42:33Z

1

You can parse your xmltHttp.response text like this:

 var xmlString = "<input name='token1' type='hidden' value='12345' />"; // Use your xmlHttp.responseText here. This is for demonstration purposes
 var parser = new DOMParser();
 var element = parser.parseFromString(xmlString, "text/html");
 console.log(element.querySelectorAll('[name="token1"]')[0].value);

answered Dec 21, 2015 at 17:42

Chizzle

1,7151 gold badge18 silver badges26 bronze badges

Collectives™ on Stack Overflow

get input value from html in ajax response

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related