I am new to jQuery and I have the following lines of jQuery. My intention is 'on submit' to check if the input text values are filled and check to see if the radio buttons are checked or selected and make the text red if they aren't but i am not sure on how to combine the two.
Right now it is kind of buggy because it submits IF the text is filled and it ignores the radio buttons BUT it makes the text red before it submits. so it is working just not how I would like it to.
jQuery
$('#form3096').submit(function (e) {
if (!$('#check-sm input:text').filter(function () {
return $.trim(this.value) != ""
}).length) {
$('.social-heading').css('color','red');
}
});
$('#form3096').submit(function(e) {
if ($('input:radio', this).is(':checked')) {
// everything's fine...
} else {
$('.radio-options').css('color','red');
}
});
Call e.preventDefault() to prevent the normal form submission.
$('#form3096').submit(function (e) {
if (!$('#check-sm input:text').filter(function () {
return $.trim(this.value) != ""
}).length) {
$('.social-heading').css('color','red');
e.preventDefault();
}
});
$('#form3096').submit(function(e) {
if ($('input:radio', this).is(':checked')) {
// everything's fine...
} else {
$('.radio-options').css('color','red');
e.preventDefault();
}
});
I like to separate my validations into single units and combine them at the end. It makes it easier to read, maintain and test.
$('#form3096').submit(function (e) {
var isFieldPopulated, isRadioChecked;
isFieldPopulated = $('#check-sm input:text').filter(function () {
return $.trim(this.value) !== "";
}).length > 0;
if (!isFieldPopulated) {
$('.social-heading').css('color','red');
}
isRadioChecked = $('input:radio', this).is(':checked');
if (!isRadioChecked) {
$('.radio-options').css('color','red');
}
return isFieldPopulated && isRadioChecked;
});
you can try this
$('#form3096').submit(function (e) {
var len = $('#check-sm input:text').filter(function () {
return $.trim(this.value) != ""
}).length;
if (!len) {
$('.social-heading').css('color','red');
e.preventDefault();
}
if(!$('input:radio', this).is(':checked')){
$('.radio-options').css('color','red');
e.preventDefault();
}
});
$('#form3096').submit(function (e) {
if (!$.trim($('#check-sm input:text').val()) {
$('.social-heading').css('color','red');
return false;
}
if ($('input:radio', this).is(':checked')) {
// everything's fine...
return true;
} else {
$('.radio-options').css('color','red');
return false;
}
});
Related
The function I have only responded to a button click but not the image click. Can anyone tell me what would I need to modify in the function so that it responds to both button & image clicks?
function clickMe(a,b) {
$("#q"+b+" input[type='button']").click(function(event) {
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
if(b !== $(".qc").length) {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250);
});
} else {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250, function() {
loading(0);
});
});
}
});
}
You are probably expecting this $("#q"+b+" input[type='button'], #q"+b+" input[type='image']")
function clickMe(a,b) {
$("#q"+b+" input[type='button'], #q"+b+" input[type='image']").click(function(event) {
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
if(b !== $(".qc").length) {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250);
});
} else {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250, function() {
loading(0);
});
});
}
});
}
I hope this solves your problem. If not then no worries :) just update/add your html in the test case bellow:
https://codebrace.com/editor/b02f036fa
I have a form on FormAssembly, and I would like to stop someone submitting the form if they select the 'No' Radio Button for the question 'Are you an employer?'. I have put what I have so far in a jsfiddle.
JS:
$(document).ready(function() {
$('input#tfa_1904').click(function() {
if ($('#tfa_1904').is(':checked') {
submitButton.disabled = true;
}
else {
submitButton.disabled = false;
}
});
});
submitButton code:
document.addEventListener("DOMContentLoaded", function() {
var warning = document.getElementById("javascript-warning");
if (warning != null) {
warning.parentNode.removeChild(warning);
}
var oldRecaptchaCheck = parseInt('0');
if (oldRecaptchaCheck !== -1) {
var explanation = document.getElementById('disabled-explanation');
var submitButton = document.getElementById('submit_button');
if (submitButton != null) {
submitButton.disabled = true;
if (explanation != null) {
explanation.style.display = 'block';
}
}
}
});
In your case you don't need to check whether the radio button is checked as only one will be checked at a time. So, just capturing the click will suffice.
$(document).ready(function() {
$('input#tfa_1904').click(function() {
$('#submit_button').prop('disabled', true);
});
$('input#tfa_1903').click(function() {
$('#submit_button').prop('disabled', false);
});
});
Updated fiddle:
https://jsfiddle.net/h5r8gud1/8/
I have written this function to validate that all form fields and check boxes in a form are filled out. The script automatically disables the submit button and then watches for the moment at which it can be re-enabled. My debugger statements are landing me in all of the proper places, but for some reason, the DOM element is not being updated. I'm sure I am just making a stupid mistake, but can't seem to find a solution. Thank you in advance for any help!
Specifically looking at this section:
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
Here is the whole script below.
$(document).ready(function() {
validateInput();
$('.validate').keyup(function(event){
validateInput();
});
$('[type=checkbox]').click(function(event){
validateInput();
});
function validateInput() {
var valid = 0;
var checkBox = $('[type=checkbox]');
var inputFields = $('input.validate');
var inputLength = inputFields.length + checkBox.length;
inputFields.each(function() {
if($(this).val() !== '') {
valid++ ;
}
});
checkBox.each(function() {
if($(this).prop('checked')) {
valid++ ;
}
});
if(valid === inputLength) {
updateBtnStatus('enable')
} else {
updateBtnStatus('disable')
}
}
function updateBtnStatus(status) {
var btn = $('input[type="submit"]');
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
}
});
I have these JQuery functions:
function CheckRequired() {
$(".required").each(function(event) {
var check = $(this).val();
if(check == '') {
event.preventDefault();
alert("One or more fields cannot be blank");
//alert($(this).attr("id"));
return false;
}
return true;
});
}
$(document).ready(function() {
$("form").each(function() {
$(this).submit(function(event) {
CheckRequired();
});
});
});
so my required fields have a class of required but when submitting a form, its showing the alert error but it still submits the form
how can i stop it submitting the form if there is an error
The result of CheckRequired() is not being returned from the submit handler.
return CheckRequired();
You might also pass the event into that function and in the case that you do not want the submit to happen, inside CheckRequired do
event.preventDefault();
I'll redo the code block...
function CheckRequired(event) {
var $form = $(this);
if ($form.find('.required').filter(function(){ return this.value === '' }).length > 0) {
event.preventDefault();
alert("One or more fields cannot be blank");
return false;
}
}
$(document).ready(function () {
$('form').on('submit', CheckRequired);
});
Try this:
$(document).ready(function() {
$("form").submit(function(event) {
if ( !CheckRequired() ){
event.preventDefault();
}
});
});
And I am smelling bug in the code. You are looping through each form, and for checking required you are doing a global find for .required
and here's the little refactor you can do to the CheckRequired function:
function CheckRequired() {
var field_with_empty_ip = $(".required").filter(function(){
return ( $(this).val() == "" );
});
return ( field_with_empty_ip.length < 0 );
}
The code below are to validate a set of selectbox, however, it will not post and go to that post page after it pass the validation, how to fix it? I have added return true; at the end but it seems not working, Thank you.
var $selects = $('form select[name^=select]'),
values = [];
$(':submit').click(function(e) {
e.preventDefault();
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
return false;
}
return true;
});
$(':submit').click(function(e) {
//e.preventDefault(); delete this.
It's preventing the default behavior of the submit button- submitting the form...
return false Does e.preventDefault(); + e.stopPropagation();
there is something that blocks to your event listener default action
var $selects = $('form select[name^=select]'),
values = [];
$(':submit').click(function(e) {
//e.preventDefault(); <--remove this line
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
e.preventDefault(); //<--PUT IT HERE~!!!
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
e.preventDefault(); //<-- AND PUT IT HERE~!!!
return false;
}
return true;
});
When you want to submit it you need $('form').submit().