CODEWITHSUNDEEP
javascripthtmlajaxforms
ragebunny
ragebunny

Reputation: 1760

Ajax, how to get data from an HTML form

I'm driving myself crazy with Ajax at the moment, there is something that im not getting.

I want a user to input their password, then their new password twice, but i want to use Ajax to send that data to a PHP script to check it and to store the new password in the database if needed.

I just don't understand how to get the data from the HTML form to the Ajax script. Everywhere i look on the internet the information just seems to confuse me that little but more, this always seems to be the case when trying to find help with Java related product i feel.

So heres teh Ajax:

ajaxRequest.onreadystatechange = function()
{
    if(ajaxRequest.readyState == 4){
        //document.myForm.time.value = ajaxRequest.responseText;
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}

var queryString = "?oldpass=" + oldpass + "&newpass=" + newpass + "&newpassretype="     + newpassretype;

ajaxRequest.open("post", "serverTime.php", true);
ajaxRequest.send(queryString); //Would use this to send post data (passwords) to the script

I have missed out all the broswer specific stuff because im sure you've seen it all before.

<form>
<input type="password" name="oldpass" id="oldpass" />
<input type="password" name="newpass" id="newpass" />
<input type="password" name="newpassretype" id="newpassretype" />
<input type="submit" onclick="ajaxFunction('oldpass', 'newpass', 'newpassretype')" name="button2" id="button2" value="Change Password" />
<div id="txtHint"></div></form>

I think i miss something here, but i haven't got a clue what it is! ANy ideas?

thanks for your time and i hope this isn't something silly.

Upvotes: 0

Views: 2073

Answers (2)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Just change this one line and it will work...

var queryString = "?oldpass=" + document.forms[0]["oldpass"].value +
    "&newpass=" + document.forms[0]["newpass"].value +
    "&newpassretype=" + document.forms[0]["newpassretype"].value;

2 things though...

  1. You're passing the password and the confirmation in the URL. That's not needed as you should check that they're the same at client side, rather than send them to be checked at server side.

  2. You shouldn't send password information in a URL as it's the easiest thing in the world to capture.

Upvotes: 3

Quentin
Quentin

Reputation: 943769

You have hard coded strings that you are passing to ajaxFunction, you need to use DOM to access the form fields and get their values. You also need to run encodeURIComponent over them to make them safe to drop into the query string.

Upvotes: 1

Related Questions