I need to be able to tell if the checkboxes are checked to do some basic validation. Problem: I don't have access to the PHP generating this. There is no class added, or the basic checked=checked that most forms have. What's the easiest way to target the checked boxes?
http://www.inpresence.in/event-registration?ee=4
EDIT: freak out!! here's the code, i just need to target the checked boxes, everything else is working. the :checked method of jquery uses checked=checked within the checkbox, which isn't there.
$(document).ready(function(){
//when the submit button is clicked...
$("input.btn_event_form_submit").click(function(){
//find the value of the drop down with one evening or four evenings
var priceOption = $("#price_option-4").val();
//match a string ending with "one evening" as the first numbers will be randomly generated by php
var oneEvening = /^\d{2}\|One Evening$/.test(priceOption);
//match a string ending with "four evenings" as the first numbers will be randomly generated by php
var fourEvenings = /^\d{2}\|Four Evenings$/.test(priceOption);
//HOW DO I GET THE CHECKED BOXES?!
var checkedBoxCount = $('#dates-1351733097 .valid').is(':checked').length;
//if one evening is selected make sure the checked boxes count does in fact equal one
if(oneEvening && checkedBoxCount != 1){
//if it doesn't alert the user and return false
alert('You must select one date');
return false;
}
//if one evening isn't selected, four is. make sure the count does indeed in 4
else if (fourEvenings && checkedBoxCount != 4){
//if it doesnt alert the user and return to the form
alert('You must select four dates');
return false;
}
//else, everything checks out!
else {
return;
}
});
});
Using this JavaScript code you can check if a checkbox is checked:
var isChecked = document.getElementById("my-checkbox").checked;
Or using jQuery:
var isChecked = $('#my-checkbox').is(':checked');
EDIT: Try this and tell me if it works:
var checkedBoxCount = $('#dates-1351733097 .valid:checked').length;
Have you tried using jquery to resolve this?
http://jquery-howto.blogspot.co.uk/2008/12/how-to-check-if-checkbox-is-checked.html
$('#edit-checkbox-id').is(':checked');
use the jquery :checked selector. http://api.jquery.com/checked-selector/
This will give you a boolean in javascript of what you want:
document.getElementById("Nov.12-4_1").checked
You can view source and find the elements to view whatever id's they have.
Other answers: the OP didn't specify that he wanted a jquery answer. If he hasn't used jquery for anything up to this point. I think adding it just for this would be a tad overkill.
Related
I have a drop-down generated by a backoffice. I cannot change how this drop-down is coded by the backoffice. But I need to make user selection mandatory for this dropdown.
I am using the following code and this works in the JSFIDDLE HERE. However, this code sees if the user chooses another value than value "A" to determine if a selection is made. But this in not good enough in my situation because this value indication changes in other drop-downs.
I need the code to see if the user choice has changed from the text "PLEASE SELECT - $0,00" The "- $0,00" may also vary in different drop-downs, so I need the code to only filter on the "PLEASE SELECT" part of the drop-down text.
Also I need the browser to not ask to turn these warnings off in this case.
Can anyone help please?
function selection()
{
var cat = document.getElementById('select').value;
if (cat == "A") {
alert('Please make a selection');
return false;
}
return true;
}
Alert whatever text you want in a span instead of using alert()
document.getElementById('alert').innerHTML = "Please make a selection";
Check the updated fiddle
So there is couple of questions in your question, lets start with
1) Ensuring the selected item does not start with "PLEASE SELECT".
function selection()
{
var sel = document.getElementById('select');
var selectedText = sel.options[sel.selectedIndex].text;
if (selectedText.startsWith("PLEASE SELECT")) {
alert('Please make a selection');
return false;
}
return true;
}
2) Stopping the user forcing the browser to no longer allow alert
This is not something you can control. If you want full control over a model dialog then there are plenty of these available - bootstrap has one, jQueryUI has one. Any UI framework you're using will almost certainly have one
You can try something like:
function selection()
{
var cat = $('#select option:selected').val();
if (cat == $('#select option:first-child').val()) {
alert('Please make a selection');
return false;
}
return true;
}
For the warnings you will need to change you alert to a modal or on the page as a notice/warning message
This script is designed to map the location between two cubicles so that people in large office buildings can figure out where they need to go to get to that other person. I've almost got it...
I have two different dropdown menus I'm working with.
By default, the dots on the page display.
Each dot corresponds to a name on the dropdown list.
When you select the name under the first dropdown, the other dot will disappear, and then if you select the name under the other dropdown, the first one disappears.
What I want to happen is - When both names are selected from the dropdowns, then both dots are showing at the same time.
I can get one or the other, but not both.
Here's the JS I have to toggle between the two...
$('#mapMe').change(function() {
var selectedMeChoice = $('#mapMe option:selected').val();
if (selectedMeChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
}
});
$('#mapThem').change(function() {
var selectedThemChoice = $('#mapThem option:selected').val();
if (selectedThemChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
$('a.dot[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);
}
});
I think it has something to do with the slideUp/slideDown function, but I can't figure it out...
There's a jsfiddle here.
You aren't distinguishing between "them" and "me" in any way, so you're hiding the other one which should be shown. Try something like this, to only hide the correct dots:
$(".me").removeClass("me");
$('a.dot[mechoice = "'+selectedMeChoice+'"]').addClass("me").slideDown(1000);
$("a.dot").not(".me, .them").slideUp(1000);
http://jsfiddle.net/XvHJS/10/
In this way you will hide only a previous "me" and not hide everything, including an active "them".
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
Is also removing those which have no memchoice at all, including those with themchoice.
I would suggest using different classes dotme and dotthem instead.
I have a script thats validating some form information. Currently it adds a CSS class of .error (adds red border) and also applies the shake effect when the input value is seen to be less than 1 character.
I also need to do this on various selects in the form if nothing has been selected. What would I need to do with the following code to get this to work please?
//check if inputs aren't empty
var fields = $('.validate');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
I have limited Javascript / Jquery knowledge and this is a modified script I found online. You can see it in action here: site, step 2 of the form is where you can find the selects.
you can check if a selection was made by checking if there is an option selected :
if ($("#mySelect option:selected").length){
//something has been selected
}
if (!$("#mySelect option:selected").length){
//nothing has been selected
}
You can use this jQuery validation plugin instead it will make ur life way easier specially with errors and error displaying..
http://jqueryvalidation.org/
Hallo,
I have to write a little java script and have no idea how and I thought that for a real JS Programmer it would be real easy to just tell me instead of me searching the web for hours.
Simple Problem:
I have some boxes with name TrackSelectPos_1 - TrackSelectPos_7.
If one of those change I want to check if the value of the box is -1. If it is disable all the boxes with a higher number and set there value to -1. If the value is not -1 enable the box on the right (the box one higher).
So the basics things that I want to do are:
1. How to get the value
2. How do I disable/enable a box
Thanks for your help.
At the very basic level, assuming one of your textbox id is TextPOS_1
//1. Value
var valueTB1 = document.getElementById('TextPOS_1');
alert (valueTB1 .value);
//2.To Disable
valueTB1.disabled = true;
You would need to wrap the above in a JavaScript Function...so that you can handle any number of textboxes.
Let me know if this helps and you need more clarification...
Assuming TrackSelectPos_1 is the id of your text box:
var box1 = document.getElementById('TrackSelectPos_1');
var box2 = document.getElementById('TrackSelectPos_2');
// This does it for only one text box. You'd need to also perform the same for boxes 3 through 7.
if(box1.value == '-1'){
box2.disabled = true;
} else {
box2.disabled = false;
}
I am building a form to rank series of items. The user will read the item and select in a dropdown the rating from 1 to 20. All 20 items will be displayed at the same time. What is the best way to make sure that the user didn't select the same number for more than one choice? Then I would display an error message, "You've already ranked an item as number 5"
Thanks
Put the items in a list with options to move an element up or down in the list.
I would suggest something like the following function. You may want to add something to revert the selection to some default value if it is a duplicate.
function checkDupe(element) {
var dupe = false;
$("select").each(function() {
if ($(this).attr("id") != $(element).attr("id") && $(this).attr("value") == $(element).attr("value")) {
dupe = true;
alert("You have already ranked an item number " + $(element).attr("value"));
return;
}
});
return dupe;
}
Just add that to the onchange event for all the dropdown lists like this.
<select id="a1" onchange="checkDupe(this)">
It's important to note that each list must have a unique ID.
There is a jquery plug-in for validation, that can help you define rules. It only works on submit, though but it'll still wont send the form and tell you which entry is wrong. Take a look at it, may be it can help you.