I'm using this in a form to check whether a radio button group has a certain value (Yes/No). The HTML for one of these is:
<form id="registerHere">
<div class="control-group">
<label class="radio">
<input type="radio" value="Yes" name="freemedia">
Yes
</label>
<label class="radio">
<input type="radio" value="No" name="freemedia" checked="checked">
No
</label>
</div></form>
And I'm using the following JS (jQuery.validate.js is included):
<script type="text/javascript">
$(document).ready(function(){});
$("#registerHere").validate({
rules:{
freemedia:{
required:true,
equalTo: "Yes"
},
},
messages:{
freemedia:{
required:"Please select",
equalTo:"Please apply to the 'freemedia' group first.</a>"
},
},
});
});
</script>
However, it is not checking the value correctly, as it always shows me the message, regardless of whether 'Yes' or 'No' is checked.
Where am I going wrong?
I cleaned up some of your jquery, you had a few errors in there.
Also, digging around in the plugin I noticed that you can use the 'equalTo' parameter to specify which control is required. It just uses the 'equalTo' as a selector for a query. So if you treat your 'equalTo' setting as a jquery selector, it should work. It may be a bit of a hack, but I had it working.
All you need to do is assign an id to your radio buttons and you should be good to go
<div class="control-group">
<label class="radio">
<input id="chkYes" type="radio" value="Yes" name="freemedia" />
Yes
</label>
<label id="chkNo" class="radio">
<input type="radio" value="No" name="freemedia" />
No
</label>
<input type="submit" value="Submit" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#registerHere").validate({
rules:
{
freemedia:
{
required: true,
equalTo: "#chkYes"
}
},
messages:
{
freemedia:
{
required: "Please select",
equalTo: "Please apply to the 'freemedia' group first."
}
}
});
});
</script>
You want to check your value selected at the time of form submission ,That's the good way to do it Give a predefined selected radio button and then check the selected Radio at the time of form sub mission that what done here
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male" checked>Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown" >Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
alert("value selected "+$('input:radio[name=sex]:checked').val());
}
</script>
</html>
Now Suppose you have not selected any Radio button by default then you can check that whether user has selected any radio butoon or not and if selected what is it?
Following code helps you in doing that
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
if ($('input:radio[name=sex]:checked').val())
alert("value selected "+ $('input:radio[name=sex]:checked').val());
else
alert("Please select Radio button");
}
</script>
</html>
Enjoy..!
In jquery validation plug-in "equalTo" is used to compare value between the fields, not on same field.(It's my study if any one knows more about it.Please let me know.)
You can add your custom method to it.
$.validator.addMethod("check_for_yes", function(value, element) {
return $('.freemedia').val() != "Yes"
}, "* Please apply to the 'freemedia' group first.");
Validation -
rules : {
freemedia : {
check_for_yes: true
}
}
OR
You can check it on Jquery click event of radio button by showing alert.
Related
Gender checkbox data is not storing properly in local storage except 'MALE' checkbox, only 'MALE' checkbox is working 'FEMALE' and "OTHERS' are not working.
form page for taking input and saving it into local storage using javascript.
form.html
<!DOCTYPE html>
<html>
<head>
<title>FORM</title>
<script>
function getdata(){
var name = document.getElementById("name").value;
var mob = document.getElementById("mob").value;
var email = document.getElementById("email").value;
localStorage.setItem("txtValue", name);
localStorage.setItem("txtValue_2" ,mob);
localStorage.setItem("txtValue_3", email);
var male = document.getElementById("male");
var female = document.getElementById("femlae");
var others = document.getElementById("others");
if(male.checked==true){
localStorage.setItem("txtValue_1", "MALE");
}else if(female.checked==true){
localStorage.setItem("txtValue_1", "FEMALE");
}else if(others.checked==true){
localStorage.setItem("txtValue_1", "OTHERS");
}else{
localStorage.setItem("txtValue_1", "ERROR");
}
}
function remove(){
window.localStorage.clear();
}
</script>
</head>
<body align="center" onload="remove()">
<h1>FORM</h1><br>
<form action="display.html" method="get">
NAME : <input type="text" name="name" id="name"><br>
GENDER : male <input type="radio" name="male" id="male">
female <input type="radio" name="female" id="female">
others <input type="radio" name="others" id="others"><br>
Mobile No. : <input type="text" name="mob" id="mob"><br>
Email : <input type="email" name="email" id="email"><br>
<br><br>
<button type="submit" onclick="getdata()" onclick="gender()">SUBMIT</button>
</form>
</body>
</html>
display page for accessing local storage and displaying it.
display.html
<!DOCTYPE html>
<html>
<head>
<title>display</title>
<script>
function display(){
document.getElementById("data").innerHTML=localStorage.getItem("txtValue");
document.getElementById("data1").innerHTML=localStorage.getItem("txtValue_1");
document.getElementById("data2").innerHTML=localStorage.getItem("txtValue_2");
document.getElementById("data3").innerHTML=localStorage.getItem("txtValue_3");
}
</script>
</head>
<body onload="display()" align="center">
NAME : <span id="data"></span><br>
GENDER : <span id="data1"></span><br>
MOBILE NO. : <span id="data2"></span><br>
EMAIL : <span id="data3"></span>
</body>
</html>
Your radio inputs should all have the same name attribute and value should be the value of that input. For example
male <input type="radio" name="gender" value="MALE" id="male">
female <input type="radio" name="gender" value="FEMALE" id="female">
others <input type="radio" name="gender" value="OTHERS" id="others">
Now you can just simply get what is selected with
document.querySelector('input[name="gender"]:checked').value; //this will return MALE|FEMALE|OTHERS based on what is selected
You can also add required to any or all of your radio buttons html to ensure that user has to select something. Alternative you can pre-select one of the checkboxes with checked to make sure gender is always popilated
For more detail and celerity why should all have same name and different values
The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.
The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.
ref
If you are using radio type, they should all have the same name.
And you spelled "female" wrong.
I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
I have been attempting to allow radio buttons to be deselected using jQuery, but I am running into issues with the prop function. When this code runs, my conditional ($(e.currentTarget).prop('checked')) always evaluates to true.
Here is a fiddle which demonstrates my issue: Jsfiddle
FYI: I am using jQuery 1.8.2, and I cannot update it because it is a legacy project with many dependencies. Also, I MUST use radio buttons per the client's request.
Javascript:
$("input[name=optionMedia]").click(function(e) {
if ($(e.currentTarget).prop('checked')) {
$(e.currentTarget).prop('checked', false);
}
});
Html:
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
You can do it like this
$('input.bigSizeInput').mouseup(function() {
if ($(this).is(':checked')) {
setTimeout(function() {
$('input.bigSizeInput:checked').prop('checked', false);
}, 1)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1" />
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
This is because checked is a property. If its there it is true, if its not it is not true. Hence you either should switch to a checkbox or use
$("..").removeProp('checked')
Using checkbox to check/uncheck is better than radio button. But if you want to use radio button, you need to check if radio is checked, copy it using and remove checked attribute of copied element and then insert it after target radio. At the end remove original radio.
$(document).on("mousedown", "input[name=optionMedia]", function(e) {
if (this.checked)
$(this).clone().prop('checked', false).insertAfter(this).end().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
I have a JavaScript function in place for a multiple choice quiz:
If the answer is 'Yes' - (checked by a checkbox) - Then a sub-question will appear, but if the user clicks 'No' the sub-question won't appear.
JavaScript
$(document).ready(function() {
var par = $('#SQ1');
$(par).hide();
$('#Q1').click(function(e) {
$(par).slideToggle('slow');
});
});
$(document).ready(function(){
$('#Q1NO').click(function(){
$('#SQ1').hide('slow');
});
})
Questions checkboxes
<div>
<input type="checkbox" id="Q1" name="chk[]" value="Yes"> Yes</input>
<br>
<input type="checkbox" id="Q1NO" name="chk[]" value="No"> No</input>
</div>
Sub-Question checkboxes
<div id="SQ1">
<div>
<input type="checkbox" name="chk[]" value="Yes 2" id="Q1R"> Yes</input>
<br>
<input type="checkbox" name="chk[]" value="No 2"> No</input>
</div>
</div>
I am inputting the values from the checkboxes into a database and the problem is that if the user clicked 'Yes' and then selected a box from the sub-question, but then changed their mind and clicked 'No' on the primary question, the sub-question will disappear, but the box is still checked inside it and it gets added to the database - Which I don't want.
Is there a way to uncheck an item within a div, on the click of the 'No' from the first div?
Thanks for reading
Uncheck all subquestions checkboxes:
$('#Q1NO').click(function(){
$('#SQ1').hide('slow')
.find('input:checkbox').prop('checked',false);
});
First of all there either should be radio button for Yes/no or only one checkbox. There are several ways to achieve your requirement. I have posted below easiest one. See if it helps.
function showHideSub(isChecked){
if(isChecked)
{
$("#sub").show()
}
else
{
$("#sub").hide()
$("#sub input[type=checkbox]").removeAttr("checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="Q1" name="chk[]" onclick="showHideSub(this.checked)" value="Yes"> Yes / No </input>
<br>
</div>
<div id="sub" style="display:none">
<input type="checkbox" name="chk[]" value="Yes 2" id="Q1R"> Yes/No</input>
</div>
Solution without loop as you can set properties on all query matches.
$('#Q1NO').click(function() {
par.hide('slow');
par.find("input[type=checkbox]").prop('checked', false);
});
How do I validate that the input text corresponding to the radio option is checked?
For example, using the image above:
If Contact 1's E-Mail radio option is selected, Contact 1's E-Mail text field cannot be blank, but Contact 1's Phone and US Mail text fields are still permitted.
If Contact 2's US Mail radio option is selected, Contact 2's US Mail text field cannot be blank, but Contact 2's Phone and E-Mail text fields are still permitted.
I have built the form above using the HTML below, but you can play with my Fiddle here: fiddle.
BEGIN UPDATE: I have a newer fiddle with better code here:
fiddle2
It has more instructions in the HTML and a closer attempt at my jQuery. For some reason, though, it still does not seem to be doing anything.
END UPDATE
I have tried naming the fields so that my jQuery can parse them, but that does not mean there is not a better way.
<body>
<form name="jp2code" action="#" method="POST">
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_PhoneRadio" name="group1"/>
<label for="group1_PhoneText">Phone:</label>
<input type="text" id="group1_PhoneText" name="group1_PhoneText"/>
<br/>
<input type="radio" id="group1_EMailRadio" name="group1"/>
<label for="group1_EMailText">E-Mail:</label>
<input type="text" id="group1_EMailText" name="group1_EMailText"/>
<br/>
<input type="radio" id="group1_USMailRadio" name="group1"/>
<label for="group1_USMailText">US Mail:</label>
<input type="text" id="group1_USMailText" name="group1_USMailText"/>
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_PhoneRadio" name="group2"/>
<label for="group2_PhoneText">Phone:</label>
<input type="text" id="group2_PhoneText" name="group2_PhoneText"/>
<br/>
<input type="radio" id="group2_EMailRadio" name="group2"/>
<label for="group2_EMailText">E-Mail:</label>
<input type="text" id="group2_EMailText" name="group2_EMaiText"/>
<br/>
<input type="radio" id="group2_USMailRadio" name="group2"/>
<label for="group2_USMailText">US Mail:</label>
<input type="text" id="group2_USMailText" name="group2_USMailText"/>
</span>
</fieldset>
<div>
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
What is the best way to write the jQuery?
I am new to jQuery, but I attempted my hand at it based on some Show/hide examples.
What I created below does not work, but hopefully indicates what I am trying to accomplish.
$(function() {
$("input[type='radio']").change(function() { // when a radio button in the group changes
var id = $(this).id;
var index = id.indexOf('group');
if (index == 0) { // is there a better way to do this?
var groupN_Len = 7; // Length of 'groupN_'
var radio_Len = 5; // Length of 'radio'
var preStr = id.substring(0, groupN_Len);
$"input[name*='preStr']".validate = null; // clear validation for all text inputs in the group
var postStr = id.substring(groupN_Len + 1, id.Length() + 1 - radio_Len); // extract Phone, EMail, or USMail
$(preStr+postStr+'Text').validate({ rules: { name: { required: true } } });
}
});
});
To make sure that the radiobutton is checked for each field, add attribute required="" in one of the radiobuttons for each fieldset.
demo
OK, whatever radio button is selected in the Contact Group's Contact Preferences, that corresponding text field is required.
Here is where I am so far on my jQuery checking:
EDIT:
Modified with tilda's important detail about adding '.' to the class name.
Added Required Attribute: how to dynamically add REQUIRED attribute to textarea tag using jquery?
Removed Required Attribute: jquery removing html5 required attribute
Final code works and looks like this:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("input[type='radio']").change(function() {
$('.'+$(this).attr('name')).each(function(index) {
$(this).removeAttr('required');
});
if($(this).is(':checked')) {
$('.'+$(this).attr('id')).each(function(index) {
$(this).prop('required',true);
});
}
});
$('#submit').click(function() {
$(this).validate();
});
});
Back to the HTML of the document: I did a lot of subtle editing to the text by creating specific ids and names for the radio buttons that matched up with the class names for the text controls.
Here is that end result:
<body>
<form name="jp2code" action="#" method="POST">
<div>For each field below, provide the Phone Number, E-Mail Address, and Street Address. <b>Indicate the preferred contact method using the radio button.</b></div>
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_Phone" name="group1"/>
<label for="group1_Phone">Phone:</label>
<input type="text" name="group1_PhoneText" class="group1 group1_Phone" />
<br/>
<input type="radio" id="group1_EMail" name="group1"/>
<label for="group1_EMail">E-Mail:</label>
<input type="text" name="group1_EMailText" class="group1 group1_EMail" />
<br/>
<input type="radio" id="group1_USMail" name="group1"/>
<label for="group1_USMail">US Mail:</label>
<input type="text" name="group1_USMailText" class="group1 group1_USMail" />
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_Phone" name="group2"/>
<label for="group2_Phone">Phone:</label>
<input type="text" name="group2_PhoneText" class="group2 group2_Phone" />
<br/>
<input type="radio" id="group2_EMail" name="group2"/>
<label for="group2_EMail">E-Mail:</label>
<input type="text" name="group2_EMailText" class="group2 group2_EMail" />
<br/>
<input type="radio" id="group2_USMail" name="group2"/>
<label for="group2_USMail">US Mail:</label>
<input type="text" name="group2_USMailText" class="group2 group2_USMail" />
</span>
</fieldset>
<div>
<input type="submit" value="Send" id="submit"/>
</div>
</form>
</body>
Let me explain what is going on in the jQuery, using the HTML above:
When a radio button's checked state changes, each control with a class name that matches the radio button's name attribute has the required property removed.
If a radio button is checked (i.e. checked=true), then each control with a class name that matches the radio button's id attribute has the required property added.
Finally, the validator seems to have to be run on a single form control (not on individual text controls like I was doing).
Here is the sample Fiddle that I ended with: Fiddle v8
At tilda: You didn't say much, but what you did say helped a lot!