I have the following source:
$('#loginnow').click(function() {
var login_useroremail = $('input[name="login_useroremail"]').val();
var login_password = $('input[name="login_password"]').val();
$.ajax({
type: "POST",
url: "http://www.example.com/login.php",
data: {
login_useroremail: login_useroremail,
login_password: login_password
},
dataType: 'text',
success: function(data) {
if(data == 'ok')
{
alert('Registration successful!');
}
else
{
alert('Registration failed. Try again later.');
}
},
error: function(data) {
alert('Registration failed. Try again later.');
}
});
});
I know those alerts and conditions are nasty, but as I'm in an early project state, I will refine that later. ;) I'm working with jQuery, jQuery Mobile and PHPTAL.
When I call the example and login was indeed successful (=server returns "ok"), everything is finde.
My question: Why is it that when I call the example and login is not successful, in my URL bar the parameters are automatically appended? After the call it looks like:
www.example.com/index.php?user=blah&pw=yadda&...
Sometimes it also has an anchor like
www.example.com/index.php#ui-state=dialog
At least I can imagine what that is for, I think it helps remembering what you are currently doing in the mobile app.
OK, now here we go.
I found out what was happening and it's a bit tricky.
When using the AJAX request above, I used data from a normal HTML-Form. In the form tag opening the HTML-form I hadn't provided an action- or method-attribute. It was just like
<form name="bla">
...
</form>
Now what happened? I pressed the submit button of the form. The jQuery-event got triggered. But at the same time, the normal form event also got triggered. As I had set no action or method, it automatically assumed
<form name="bla" method="get">
...
</form>
That's what finished me off because the GET-paramers of course appeared in the URL afterwards. :)
I now use .preventDefault() in the jquery script to avoid the normal form getting submitted any other way than via AJAX.