Menu
I have a problem with posting the user input from the following code. The information gets posted only after the submit button has been clicked twice. Please take a look at my code and tell me if there is anything I need to change.
<script>
function validate(form) {
fail = validateName(form.name.value)
fail += validateEmail(form.email.value)
fail += validateCity(form.city.value)
if (fail == "") {
$(function () {
$('#submitbtn').click(function (event) {
event.preventDefault();
var form = $(this).closest('form'),
action = form.attr('action');
$.post(action, form.serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
});
});
}
else {
document.getElementById('errors').innerHTML = fail;
}
return false
}
function validateName(field) {
if (field == "") return "No name was entered.<br/>"
else if (field.length < 3) return "Please enter a valid name.<br/>"
else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
return ""
}
function validateEmail(field) {
if (field == "") return "No email was entered.<br/>"
else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
return ""
}
function validateCity(field) {
if (field == "") return "No city was entered.<br/>"
else if (field.length < 3) return "Please enter a valid city.<br/>"
else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
return ""
}
</script>
</head>
<body id="body-results-page">
<div class="modalDialog" id="openModal">
<div>
<a class="close" href="#close" title="Close">X</a>
<h2>Newsletter Sign-Up</h2>
<form action="" name="subscribe1" id="subscribe1" method="POST" autocomplete="off" onSubmit="return validate(this)">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>
<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>
<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset"/>
<button type="submit" name="submit" id="submitbtn" class="submitbtn" value="Submit this!">Subscribe Now!</button>
<br style="clear:both;">
</div>
<input type="hidden" name="MM_insert" value="subscribe1">
</form>
453
onsubmit = function () { if (allowSubmit) allowSubmit = false; else return false; } })(); (well, as sure-fire as you can get with JS enabled anyway). You could disabled the button as a visual confirmation to the end user that the form can only be submit once too. Very correct.
The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form. Clicking on a link, prevent the link from following the URL.
The form will be submitted to the server and the browser will redirect away to the current address of the browser and append as query string parameters the values of the input fields.
Because you are calling function validate(form) on submit and adding submit handler to button after it but not calling it .
Solution - Call submit handler after attaching click submit handler to button.
$('#submitbtn').click();
Like this
if (fail == "") {
$(function () {
$('#submitbtn').click(function (event) {
event.preventDefault();
var form = $(this).closest('form'),
action = form.attr('action');
$.post(action, form.serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
}).click();
});
}
or
Better don't attach submit handler just run the AJAX request direct if condition is true .
like this
if (fail == "") {
action = $(form).attr('action');
$.post(action, $(form).serialize(), function (data) {
$('#errors').html("You have been successfully subscribed to our newsletter.");
})
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
