Click the Submit button twice for the AJAX request to trigger the form submission
My HTML form looks like this.
<form novalidate action="register.php" method="post" >
<label for="username">Username</label>
<input type="text" name="username" required placeholder="Your username" autofocus/>
<input type="submit" name="register" value="Register" cid="submit" />
</form>
And my jQuery looks like this
$("form").submit(function(e) {
var $form = $(this);
var serializedData = $form.serialize();
request = $.ajax({
url: "check.php",
type: "post",
data: { formData: serializedData },
datetype: "JSON"
});
request.done(function(response, textStatus, jqXHR) {
console.log("HELLO");
$('form').unbind();
$('form').submit();
});
e.preventDefault();
});
The sad thing is that it writes hello
to the console but never submits the form with a single click of the submit button. I need to press twice to send the button.
Can anyone please tell me about the problem and how can I fix it so that 1 click is enough to submit the form.
NOTE. Form data is submitted for validation not actually for submission. If the details like email, username, etc. are Valid, I want the form to be submitted with one click.
source to share
First of all, I think it would be easier to use the success function instead of the .done () function. For example:
$("form").submit(function(e) {
e.preventDefault();
var $form = $(this);
var serializedData = $form.serialize();
request = $.ajax({
// Merge the check.php and register.php into one file so you don't have to 'send' the data twice.
url: "register.php",
type: "post",
data: { formData: serializedData },
datetype: "JSON",
success: function() {
console.log("This form has been submitted via AJAX");
}
});
});
Note that I have removed the .unbind () function as I suspect this may be the reason your code is in effect. It removes event handlers from the form regardless of their type (see http://api.jquery.com/unbind/ ). Also, I put e.preventDefault () at the beginning. I suggest you try this edited piece of code and let us know if it works or doesn't work.
EDIT: Oh, and yes, you don't need to post it when you post data via AJAX.
source to share
Try it.
$("form").submit(function(e) {
var $form = $(this);
var serializedData = $form.serialize();
request = $.ajax({
url: "check.php",
type: "post",
data: { formData: serializedData },
datetype: "JSON"
});
request.done(function(response, textStatus, jqXHR) {
console.log("HELLO");
$('form').unbind();
$('form').submit();
});
});
$("form").submit(function(e) {
e.preventDefault();
var $form = $(this);
var serializedData = $form.serialize();
$.ajax({
url: "check.php",
type: "post",
data: { formData: serializedData },
datatype: "JSON",
success: function(data) {
return data;
}
});
});
So, break it down.
Stop submitting the form with preventDefault ().
Get the form data and submit it to the script validator.
The return value is, I suppose, a boolean value. If verified, it will be true or false.
Return a value that will continue or end the form submission.
NB: This is a terrible way to validate your forms. I will be validating my forms on the server with the form submission because javascript can be decapitated terribly easily. Everything from a forced response from the server to disable the dispatch event listener.
source to share
You don't need to call submit()
as you are sending your data via ajax.
EDIT You may need to adjust the options contentType
and / or other ajax options depending on your needs. The PHP example is very simple. Your shape is likely much more complex. Also, you will want to misinform any php data - don't rely only on$_POST
JQuery
$("form").submit(function(e) {
$.ajax({
'type': 'post',
'contentType': 'application/json',
'url': 'post.php',
'dataType': 'json',
'data': { formData: $(this).serialize},
'timeout': 50000
).done(function(data) {
// Response from your validation script
if (data === true)
{
// SUCCESS!
}
else
{
// Something happened.
}
).fail(function(error) {
console.log(error);
});
e.preventDefault();
});
PHP
$is_valid = FALSE;
$name = $_POST['name'];
if ($name !== '')
{
$is_valid = TRUE;
}
else
{
return FALSE;
}
if ($is_valid)
{
// insert into db or email or whatver
return TRUE;
}
source to share