strange javascript form behaviour.

Question

I am generating the following html form with this php:

echo "<form name=\"userForm\">
Username:
<input type=\"text\" name=\"username\" />
<br />
First name:
<input type=\"text\" name=\"firstname\" />
<br />
Last name:
<input type=\"text\" name=\"lastname\" />
<br />
<input name=\"Submit\" type=\"submit\" value=\"Update\" onclick=\"submitUserInfo();return false\"/>
</form>";

Which is handled by submitUserInfo, which is here:

function submitUserInfo() {
    url = "edit_user.php?cmd=submitinfo&username="+document.userForm.username.value+"&firstname="+document.userForm.firstname.value+"&lastname="+document.userForm.lastname.value;
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp.responseText == 'true') {
     alert(url);
     xmlHttp.open("GET",url,true);
     xmlHttp.send(null);
     //updateByUser(username);
    }
}

I clearly have url defined as beginning with

edit_user.php?cmd=submitinfo&username

however when pressing the submit button, it tries to send the url as

edit_user.php?username=

and I cannot figure out why. I have used the above technique succusfully with other forms on my site, and can not find any reason that cmd=submitinfo& is being excluded.

Answer 1

Use a tool like Firebug to determine if the browser is sending it without cmd=submitinfo& or if it's being lost on the server side.

Answer 2

Change:

url = "edit_user.php?cmd=submitinfo&username="+document.userForm.username.value+"&firstname="+document.userForm.firstname.value+"&lastname="+document.userForm.lastname.value;

to:

var url = "edit_user.php?cmd=submitinfo&username="+document.userForm.username.value+"&firstname="+document.userForm.firstname.value+"&lastname="+document.userForm.lastname.value;

You must declare your url variable before you try to use it.

Also, avoid echoing straight HTML to the page. The way you've done it is going to be an absolute pain to debug, update, and stylize.

Answer 3

Frameworks like jQuery is not really needed for such simple tasks, although I would suggest you taking a look if you plan to implement more JavaScript on your site.

Your code, using jQuery, would look like this:

$("#<id of form goes here>").submit(function ()
{
    $.ajax({
        data: {
            "username": $("#<id of username-input goes here>").val(),
            "firstname": $("#<id of firstname-input goes here>").val(),
            "lastname": $("#<id of lastname-input goes here>").val()
        },

        url: "edit_user.php"
    });

    return false;
});

Looks a bit nicer, I think :)


Also; using frameworks - not jQuery in particular - takes care of browser work-arounds.. so you won't have to.. take care of 'em, that is :)

Answer 4

I think you need to change the type of the button from "submit" to "button":

<input name=\"Submit\" type=\"button\" value=\"Update\" onclick=\"submitUserInfo();return false\"/>