Develop Reference

How to find all drop downs which doesn't have any value selected?

I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.
Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :
This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.
Any help would be appreciated.

This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.
A working code would be:
$("#testForm").on("submit", function() {
$(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
alert("ok"); // for debug purposes
return false; // this stops the form from actually being submitted
});
Here's a working fiddle that demonstrates widget disabling:
http://jsfiddle.net/sw6v928m/3/
Edit: Updated to actually select disabled elements
Edit 2: Updated to compact the code a bit, after request from the OP

Disable submit button when form is invalid

I have a form that I validate with jQuery Validate. I want to be able to disable the submit button when the form is invalid but I am unsure of the best approach. To disable the button I can simply do this
$("#clientConfigurationForm input[type=submit]")
.prop("disabled", !clientConfigValidation.valid());
The issue is where do I put this code? It seems that the only way to track all changes is to replicate the code in both unhighlight and highlight.
Is there a better way to approach this issue?

I'd execute it when an input is changed.
$('#yourForm input, #yourForm select, #yourForm textarea').on('change', checkForm);
function checkForm(){
$("#clientConfigurationForm input[type=submit]")
.prop("disabled", !clientConfigValidation.valid());
}

Quote OP's Comment:
"This doesnt entirely work, because if I enable and disable a checkbox then the form inputs disable and then become enabled again, at this point clientConfigValidation.valid() says true but, on submit, it realises its not actually valid... Very odd"
This is caused by a timing issue regarding when the value of the checkbox actually changes.
To fix it change your change event into a click event to more immediately capture your checkbox and radio buttons. This does not seem to alter how the rest of the input elements behave, because you have to click on them when you change them.
$('input, select, textarea').on('click', checkForm);
function checkForm(){
$("input[type=submit]")
.prop("disabled", !($('#clientConfigurationForm').valid()));
}
Working DEMO: http://jsfiddle.net/8umJ6/
If you notice any issues with one input type over another, you could tweak the code by specifying different events for different input types.
$('input[type="checkbox"], input[type="radio"]').on('click', checkForm);
$('input[type="text"], select, textarea').on('change', checkForm);
function checkForm(){
$('input[type="submit"]')
.prop("disabled", !($('#clientConfigurationForm').valid()));
}

Skip the usual behaviour of select Input using javascript

I have a form having select Input with some options in the drop down option list.
Requirement: On click of the select Input I need to check validation of form.If the form is incomplete I need to skip the behaviour of select input i.e do not show the option list.
However if the form is complete the select input should show me the options(i.e normal behaviour).
Problem : I did try event.preventDefault() to skip the further action assuming that the select input will not show me the options if the form was incomplete.
But this aint workin
Find the code:
$('selectInput').addEvent('click', function(event){
if(!validateForm()){
if(event.preventDefault){
event.preventDefault();
} else {
//IE
event.returnValue = false;
}
}
});

You could disable/enable the select everytime the validation parameters are changed ?
Otherwise, I noticed you are using jQuery, so you could imple,ent your own or one that is already made with your features...

My suggestion would be to add the options in your onclick. If the validation passes, add the option otherwise don't do anything.

IE7 & Radio Button .checked issues. Is .defaultChecked the answer?

A quick question which is driving me a little insane. I have some radio buttons on a lightbox that is fired when a user wishes to edit some entered values. This is an old system which I didn't write. Now the problem/solution is relatively easy however when testing in IE7 I've noticed some issues with:
document.getElementById(thisID).checked = true; // thisID is the ID of a radiobutton
Basically the above code doesn't set the checked value on a radio button.
I thought I could sort this by using:
document.getElementById(thisID).defaultChecked = true;
However if I return and change my radio button values previous radio buttons remain selected, as their .defaultChecked status hasn't been updated! I can't control the number of radio buttons as they are generated on the server (as are their IDs) and the values for the radiobuttons are stored on the client until the form is submitted.
Is there a way around the document.getElementById(thisID).checked bug in IE7?

I just had to loop through all the radiobuttons and set the .defaulChecked to false before resetting... damned IE7!

There is an possible duplicate which consists of the same issue in which the checking of the radio button is not working in IE7.
Kindly go through the link Check Here

Clean and accesible Other option (Check box and text box)

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)

Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.

I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.