Develop Reference

Preventing radio button changes based on select box selection

I have two radio buttons (Yes/No) and am trying to force it to 'No' when a certain select box selection is made. Here's what I have for the script (below), but it totally disables the radio buttons and doesn't post the data to our db. How can I...
Force the radio button selection to No?
Disable the ability to change the radio button from No to Yes?
Still post the data to our db?
$(function() {
$('#presence').change(function() {
var value = $(this).val()
var invitation = value === 'common' || value === 'frequent'
$('.radioyesno input').prop('disabled', invitation)
if (invitation) {
$('.radioyesno input:last').prop('checked', true)
}
}).change()
})

Your code seems like it has three problems:
You use $('.radioyn input') and $('.radioyesno input:last'). Is it .radioyn or .radioyesno?
You're calling }).change() for no reason. That call does absolutely nothing. .change() is used to bind an listener to when something changes.
You are not actually posting the update. To post it, you will need to call .submit() on the form, or .click() on the submit button.
Once you fix the above 3 issues, you should achieve your expected behaviour. If anything is not working, I suggest using console.log and breaking your code into smaller areas to test and make sure each line of code does what you expect it to do.

What event to know when user has entered data into form?

I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.

You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)

There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.

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

Use of setCustomValidity in form requires two clicks for onsubmit

I am working on a form that makes use of the HTML5 form validation attribute required for various text and radio button fields. The form also has two sets of checkboxes, of which at least one checkbox must be checked.
In order to keep the user error feedback consistent I am using the setCustomValidity method to throw a native error bubble when the checkboxes are left unchecked. This all works fine, however, there is an issue with error feedback when the form is submitted and the onsubmit event is used to trap unchecked checkboxes. This issue doesn't arise when the onclick event is bound to the submit button instead, but I understand it is preferable to use onsubmit.
Onclick test case (Click submit button and error bubble appears first time!)
http://jsfiddle.net/Jimadine/bZe5e/
Onsubmit test case (Click submit button - error bubble appears after second click)
http://jsfiddle.net/Jimadine/2vLszqac/
Furthermore, from my testing of the onsubmit case, Firefox highlights the unchecked checkboxes after the first click of the submit button; this is indicated by a red glow around the checkboxes. Then after a second click the error bubble displays. In other modern browsers the first click displays no on-screen indication that the checkboxes were left unchecked; I presume this is how the UX side of HTML5 validation was implemented in these browsers and that Firefox chose to do things slightly differently.
My question is why does the onsubmit test case require two clicks and what is an appropriate way to rectify this so it behaves like the onclick test case? I'm guessing it has something to do with the submit event firing after the validation but I'm not sure how to correct my code.

Here is a working jsfiddle base on your first example http://jsfiddle.net/bZe5e/6/.
The key is instead of doing this only on submit/button click. You are checking the validity on change + initially
doValidate();

I came across a similar problem, and for me it worked calling
reportValidity() right after setCustomValidity().
function onSubmit(e){
e.preventDefault();
const myInput = document.getElementById('my-input');
if( inputIsInvalid ){
myInput.setCustomValidity('My custom invalidity message.');
myInput.reportValidity();
}
}
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process

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.