I am trying to prevent a radio button not to be checked if a false is returned from the onclick.
Following is the jsbin link for the code I am using.
http://jsbin.com/oruliz/2/
Is there anything I am missing; BTW, I am trying to use JS with no framework.
However, if pure js has this issue is there a workaround for prototyoe.js ?
Try this
function propertyDamageType_click(elem) {
if(yourconditionfails){ // or if(yourconditionfails && !elem.checked)
elem.checked = false;
alert('Please select an incident type');
}
}
Demo
You should user return propertyDamageType_click() .
See the http://jsbin.com/uvopek/1/edit
You can use a flag and return false whenever the pre codition is not met....
var IsIncidenntTypeSelected = 0; // flag - sets to 1 when pre condition is met
$("input[type='radio']").click(function()
{
if(IsIncidenntTypeSelected == 0)
return false;
}
Related
I'm trying to display a warning message when a user types certain text into an input box. The problem is I only want to return false one time so the user can submit the form on the second click even if they don't change the text. I've tried adding a counter but jquery is not remembering the count on a second sumbit click. What is the best way to go about this?
if (email.val().indexOf("gmail") > -1))
{
$('input[name=email]').css('border-color','red');
$("#submit").after('<p>Error - Do you want to use a gmail account?</p>');
return false;
}
I would use a flag to determine if they have already tried to submit, and if they haven't, then you give them the warning and return false:
var triedSubmit = false;
$(/* Your jQuery Object */).click(function() {
if (email.val().indexOf("gmail") > -1))
{
if (!triedSubmit){
$('input[name=email]').css('border-color','red');
$("#submit").after('<p>Error - Do you want to use a gmail account?</p>');
triedSubmit = true;
return false;
}
}
}
Just set up some kind of flag
var flags = {}; // in some higher scope
// then later, in your verification function
if (email.val().indexOf("gmail") > -1 && !flags.warnedGmail) {
$('input[name=email]').css('border-color','red');
$("#submit").after('<p>Error - Do you want to use a gmail account?</p>');
flags.warnedGmail = true;
return false;
}
Why don't you put a class on your text box and remove it in the first failure? Thus when you look for it with jQuery a second time you won't be able to find it it and won't be able to apply the rule. I implmented it like so:
var submit = function()
{
var email = $('.emailFirstTry')
if (email.length > 0 && email.val().indexOf("gmail") > -1)
{
$('input[name=email]').css('border-color','red');
$("#submit").text('Error - Do you want to use a gmail account');
$('.emailFirstTry').removeClass('emailFirstTry');
return false;
}
$('input[name=email]').css('border-color','none');
$("#submit").text('Success!');
return true;
};
You can see it in action on this fiddle right here: http://jsfiddle.net/ozrevulsion/39wjbwcr/
Hope the helps :)
I have form that has input fields that are required, I point this out with made up class name.
I have piece of code that kind of works. If I focus on required input and then press submit, that input will become red, if empty (which I want). But it only works only on one at a time and if I have focus on the input.
My code is as follows:
function checkIfEmpty(){
$('#register-form input.gv-form-required').blur(function(){
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
return false;
}else{
return true;
}
});
}
I am almost certain that the blur() method is not suitable for my situation.
So help a man out here, please.
Try this : You have to use .each() to check every input inside form and put removeClass in else condition.
function checkIfEmpty(){
var empty = false;
$('#register-form input.gv-form-required').each(function(){
if($(this).val().trim()==""){
empty = true;
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
return empty;
}
The blur event indeed doesn't seem right in your situation. What I would do is that I would itterate through each field and checked whether it is filled or not. If it is, remove (if any) has-error class. If it isn't filled, give it the has-error class
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if($(this).val() === ""){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
change your code to the following:
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if( !$(this).is(':empty')){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
try
in else condition
$(this).parent().parent().removeClass("has-error");
js code
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
I am using if else condition in jQuery to handle check boxes.
My condition is that at least one check box is selected and after that alert if condition is running and not the other one. Here is my code
$(document).ready(function() {
$('#outer_menu').click(function() {
var $fields = $(this).find('input[name="mychoice"]:checked');
if (!$fields.length) {
alert('You must check at least one box!');
if(".a:checked "){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal:checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
return false;
}
});
});
our else if condition is not working when if condition false
I think what you are trying to do is to check whether the element with class a or a_original is checked, for that you need
if ($(".a").is(":checked ") {
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal").is(":checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
use .is() to check whether the element satisfies the given selector
you need to fetch the jQuery object for the target element
Look at this line of code:
if(".a:checked ")
I believe it should be:
if ($(".a:checked "))
That might not be the end of your issues though, unless a is a class rather than you intending to select links.
Same problem here:
else if (".a_orignal:checked")
Change to:
if($(".a").is(":checked")){
and:
else if ($(".a_orignal").is(":checked")){
The .prop() method gets the property value for the first element in the matched set.
Write:
if(".a").prop("checked"){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
}
else if (".a_orignal").prop("checked"){
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
}
<script>
function no_email_confirm() {
if (document.getElementsByName("no_email")[0].checked == false) {
return true;
} else {
var box= confirm("Sure?");
if (box==true)
return true;
else
document.getElementsByName("no_email")[0].checked == false;
}
}
</script>
And here is my HTML for the checkbox:
<input type="checkbox" id="no_email" name="no_email" onchange="no_email_confirm()"></input>
For some reason, this gives me the confirm pop up the first time I check the box, but not for any click after that. Also, even if I click "Cancel" it still checks the check box. I've searched on here and for some reason, no matter what I try, I can't get it to work properly.
It should confirm if they really want to check the box, if they select "Yes" then it checks it, if not, then it doesn't check it. I can get it to work without the name no_email, but I can't change that..
Anyone have any ideas?
Looks like you've got several errors in there, most notably using == when you probably meant =. Instead, add an event listener and make sure the assignment works:
var box = document.querySelector('#no_email');
box.addEventListener('change', function no_email_confirm() {
if (this.checked == false) {
return true;
} else {
var confirmation= confirm("This means that the VENDOR will NOT RECEIVE ANY communication!!!!");
if (confirmation)
return true;
else
box.checked = false;
}
});
http://jsfiddle.net/A3VGg/1/
In my phonegap application i use jquery mobile. When retrieve the value from my DB the other fields are filled correctly(textbox values are filled correctly) works except checkbox. My problem is when the DB returns true or false whatever it is there is no changes in my checkbox. I struggled this issue for two days anyone suggest the solution to solve this one..
My coding is like:
if (results.rows.item(0).checkbox1 == true)
$("#checkbox1").attr('checked', 'checked');
else $("#checkbox1").removeAttr('checked');
Tried this also:
//$('#checkbox1').prop('checked', true).checkboxradio('refresh');
//$("input[id='checkbox1']").attr("checked",results.rows.item(0).checkbox1).checkboxradio("refresh");
solved:
like
if (results.rows.item(0).checkbox1 === 'true')
$("#checkbox1").attr('checked', 'checked');
else $("#checkbox1").removeAttr('checked');
Try this:
var dbValue = (results.rows.item(0).checkbox1 === true);
$('#checkbox1').prop('checked', dbValue);
Note the === in the first line. If your DB return value is something like 1 or the string "true", check for it explicitly.
You have to do a refresh once you set the values dynamically to the form elements in jQuery Mobile.
For your case the method it is :
document.addEventListener('deviceready', function() {
var a= true;
alert("hi");
if(a == true) {
$("#checkbox1").attr("checked",true);
$("#checkbox2").attr("checked",true);
} else {
$("#checkbox1").removeAttr('checked');
$("#checkbox2").removeAttr('checked');
}
$("#checkbox1").attr("checked",true).checkboxradio("refresh");
}, false);