Submitting canceling form submit from inside second function call - javascript

I'm trying to stop my form from submitting when the confirmation message is cancelled, but how can I cancel my form’s submission from inside the each()?
$('#myForm').submit(function() {
var inputs = $(this).find('input:checked');
inputs.each(function() {
var inputId = $(this).attr('id');
if(inputId != undefined && inputId.substring(0, 8) == 'inputName') {
var r = confirm("Are you sure you want to continue?");
if (r == true) {
return true;
} else {
// This doesn't stop the form submit
return false;
}
}
});
return true;
});

You can use the event argument that’s passed to event listeners instead; it has a method named preventDefault() that stops the default action from being performed.
$('#myForm').submit(function (e) {
var inputs = $(this).find('input:checked');
inputs.each(function () {
var inputId = this.id;
if (inputId != undefined && inputId.substring(0, 8) == 'inputName') {
var r = confirm("Are you sure you want to continue?");
if (!r) {
e.preventDefault();
}
}
});
});

Related

how to change the parent location window when successfully checking using jquery

I have a problem in my code. I make a simple form using the checkbox. when the checkbox is clicked, the data will be validated. then if validation is successful then the checkbox will still be checked and window.location will change, if it fails, the checkbox will be unchecked and window.location will change.
$(document).ready(function () {
$(".publish").click(function () {
var data = $(this).attr("data-identity");
if ($(this).attr('checked', true)) {
var url = "/Manager/AdminApprove/";
}
$.ajax({
url: url + data
}).done(function (data) { //refresh after click
$(document).change(function () {
if ($(".publish").prop('checked', true)) { //if data succes validation
var error_succes = "Succes";
}
else {
var error_succes = "Error";
}
window.parent.location = "/Manager/Admin?" + error_succes;
});
});
});
});
var error_succes = "";
if (data == "True"){
var error_succes = "Succes";
}
else {
var error_succes = "Error";
}
window.parent.location = "/Manager/Admin?" + error_succes;

Reset event.preventDefault()

I'm building validation for form fields for a form. So, I need to do a validation which I do like this :
$(document).ready(function() {
$('#submitbutton').click(function() {
if (validateField()) {
$('form.checkout_form_validate').submit(function(event) {
return true;
});
}
else {
$('form.checkout_form_validate').submit(function(event) {
event.preventDefault();
return false;
});
}
});
function validateField() {
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var shipping_address = $('#shipping_address_1').val();
var city = $('#city').val();
var state = $('#state').val();
var phone = $('#phone').val();
if (first_name == "" || last_name == "" || shipping_address == "" || city == "" || state == "" || phone == "") {
$('#errorcontainer').html('Fill out all the required fields <br/>');
$('#errorcontainer').fadeIn('fast');
return false;
} else {
return true;
}
}
});
So, If a user just press the submit button, it will throw an error and Form will not submit, But, If after doing this, the user fills out the entire form and then hit submit, Nothing will happen even when validateField() is true.
How to "reset" it? Any ideas ?
On each click on submit button, you are binding new form submit
handler. Don't nest events...
You validation logic should be:
$(function() {
$('form.checkout_form_validate').submit(function(event) {
return validateField();
});
});
function validateField() {
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var shipping_address = $('#shipping_address_1').val();
var city = $('#city').val();
var state = $('#state').val();
var phone = $('#phone').val();
if (first_name == "" || last_name == "" || shipping_address == "" || city == "" || state == "" || phone == "") {
$('#errorcontainer').html('Fill out all the required fields <br/>');
$('#errorcontainer').fadeIn('fast');
return false;
} else {
return true;
}
}
You don't need e.preventDefault(); and a return false; statement, they do the same thing
return false within a jQuery event handler = e.preventDefault() and e.stopPropagation()

Validation gets removed after calling event.preventDefault()

Validation gets removed from SSN textbox after calling event.preventDefault(); in $("form").submit(function (event)
Validation gets fired and than removed
function CheckSSN() {
var sender = $("#SSN");
var value = $(sender).val();
var errorSpan = $(sender).siblings("span[data-valmsg-for='SSN']");
var message = "SSN is required.";
var validAliasPatt = /^[0-9]{9}$/;
if (!value || value == "" || value == null) {
enableValidationUI(sender, errorSpan, message);
return false;
}
else if (!validAliasPatt.test(value)) {
message = "SSN should be a 9 digit number.";
enableValidationUI(sender, errorSpan, message);
return false;
}
else {
disableValidationUI(sender, errorSpan);
return true;
}
}
----------
("form").submit(function (event) {
var submit = true;
if (!CheckSSN()) {
event.preventDefault();
var submit = false;
}
if (submit) {
$("form").submit();
}
else {
event.preventDefault();
return;
}
});
The issue was with using ("form").submit(function (event) which ended up creating endless loop. After changing to ('button').click fixed this issue.

Javascript while loop in FTL page

I am validating the drop down lists selections on the FTL page. I could not make it to work on the click function on submit button, so I am trying to enable/disable the submit button until some selection is made in both drop down lists. I am using while loop for that and it is not working. Both javascript and FTL pages are new to me. Please help.
document.getElementById("add_officevisits_button").disabled = true;
var ddvalid= false;
// loop until all is validated
do {
ddvalid = validate_dropdownlists();
}
while (ddvalid = false) ;
// if yes, let the user proceed
if (ddvalid) {
//$j('#add_officevisits_button').show();
document.getElementById("add_officevisits_button").disabled = false;
}
function validate_dropdownlists(){
var validated =false;
// visittype
var visittype = false;
if ($j('#officevisits_visitTypeID').val() == "") {
visittype = false;
}
else {
visittype = true;
}
validated = visittype;
//outcome
var OutcomeValid = true;
if ($j('#officevisits_visitOutcomeID').val() == "") {
OutcomeValid = false;
}
else {
OutcomeValid = true;
}
validated = OutcomeValid && validated;
return validated;
}

Returning false in Javascript/Jquery within an if statement

I've got this function to check my form:
function checkFrm() {
$.each($('select'), function() {
var $this = $(this);
if( $this.val() === 'null') {
// do nothing
} else {
if($this.next('input').val().length < 1) {
return false;
}
}
});
}
When the user submits this, it runs this code, and ideally if the criteria is met the form won't submit because of the 'return false;' bit.
However, for some reason it's completley ignoring this!
If I set a return variable at the start like 'var toreturn = true;' then set 'toreturn = false' when the trigger is hit, then 'return toreturn;' right at the end it stops the form submitting just fine... however that's not much use, as the alerts and checks I run in between are all triggered at once which would be completely overwhelming for the user.
Any suggestions please?
Cheers :)
Returning false from the each will not return false from the function.
You will need to set a var to return false from the function also. You can still break out of the each by using return false as soon as your condition fails.
function checkFrm() {
var retVal=true;
$.each($('select'), function() {
var $this = $(this);
if( $this.val() === 'null') {
// do nothing
} else {
if($this.next('input').val().length < 1) {
//set the var to return from the function
retval = false;
//exit out of the each
return false;
}
}
});
return retVal;
}
When you call return false; it refurns false for the function
function() {
var $this = $(this);
if( $this.val() === 'null') {
// do nothing
} else {
if($this.next('input').val().length < 1) {
return false;
}
}
}
That is not work for you.
You better get an array of selects like this:
var selectsArray=document.getElementsByTagName("select");
and work with them in a loop.
for(var i=0; i< selectsArray.length;i++){
if( selectsArray[i].value === 'null') {
// do nothing
} else {
if(selectsArray[i].next('input').val().length < 1) {
return false;
}
}
}

Categories