I copied a pice of jquery code from a tutorial for working with radio buttons. It is not working for me but from the comments on the tutorial it seems to work for other people. I get this "missing ) after argument list" } else {
So here is the relevant portion of my code. I have two radio buttons above two forms. I want to show the form with the checked radio button and hide the other form.
<script type="text/javascript">
$(document).ready(function() {
$('#existing-login').show();
$('#new-customer').hide();
});
$("input[#name='customer']").change(function(){
if ($("input[#name='customer']:checked").val() == "new")
$("#new-customer").show();
$("#existing-login").hide();
} else {
$("#existing-login").show();
$("#new-customer").hide();
}
});
</script>
<input type="radio" name="customer" value="existing" checked="checked"/>
<input type="radio" name="customer" value="new"/>
<div id="existing-login">
<!-- form for existing customer login -->
</div>
<div id="new-customer">
<!-- form for new customers -->
</div>
Missing { after your if statement:
if ($("input[#name='customer']:checked").val() == "new") {
$("#new-customer").show();
$("#existing-login").hide();
} else {
$("#existing-login").show();
$("#new-customer").hide();
}
Also the # syntax for selecting attributes isn't supported anymore in current versions of jQuery, so remove that too:
if ($("input[name='customer']:checked").val() == "new") {
Related
The validation is needed to block the user to continue to the next page. They must have check one of the radio buttons etc.
<div class="">
<div class="radiho" style="display: block">
<input type="checkbox" name="speakenglish" value="true" id="speakenglish" class="yeseng">
<label for="speakenglish" class="radio-label">Yes please.</label>
</div>
<div class="rahdio" style="display: block">
<input type="checkbox" name="speakenglish" value="false" id="dontspeakenglish" class="noeng" checked>
<label for="dontspeakenglish" class="radio-label"> No thank you, not at this time.</label>
</div>
</div>
I have some JS that works with the .req class, but that just makes both boxes have to be checked which is wrong. The bottom one I tried to use but the page just skipped validation totally and went onto the next page.
thisObj.find('input[type=checkbox].req').each(function () {
if ($(this).prop("checked") == false) {
empty = true;
$(this).siblings('label').addClass('error');
}
});
thisObj.find('input[type=checkbox].yeseng' || 'input[type=checkbox].noeng').each(function () {
if ($(this).prop("checked") == false) {
empty = true;
$(this).siblings('label').addClass('error');
}
});
I think for the yeseng/noeng selector you want:
thisObj.find('input[type=checkbox].yeseng,input[type=checkbox].noeng')
or:
thisObj.find('input[type=checkbox].yeseng').add('input[type=checkbox].noeng')
Finally figured it out so you must check at least one box.
thisObj.find('input[type=radio].engdriver' ).each(function () {
if(!thisObj.find('input[type=radio].engdriver:checked').val()) {
empty = true;
$(this).siblings('label').addClass('error');
}
});
Below is my code, I am trying to hide and show dynamic elements. The problem I am having is, I only want my hidden div to only show one at a time if only I check "Other". However, the code below will show the hidden div for all number of #dynamicRows I have. so it works for initial 1st #dynamicRow added, the problem is when I have two or more #dynamicRows
$('#dynamicRow').on('click', 'input[id^=race]', function () {
if ($(this).is(":checked")) {
if ($(this).val() == "Other") {
$(".cssclass").each(function (index) {
$(this).closest("div").show();
});
}
else {
$(".cssclass").each(function () {
$(this).closest("div").hide();
});
}
}
});
Below are dynamic rows, for help purposes i am showing the html code, however, it doesn't exist on the screen, a user will click "ADD" to generate the code below. I have no problem in generating dynamic row and it is not why I am posting. note the name in my radio button is generated by c# and everything works. Again the problem is not how to create a dynamic row, it is nicely taken care of in C#.
Dynamic row one works with the above jQuery:
<div id="dynamicRow">
<input type="radio" value="No" id="race[]" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" id="race[]" name="Person[hhhhhh].race"> Other:
<div id="iamhidden" class="cssclass">
I appear one at a time, when other radio button is checked
</div>
</div>
Dynamic row two doesn't work with the above jquery and it takes the above form events as its own, so if i check the radio button in row 2, the 1st dynamic row responds to that event and vice versa:
<div id="dynamicRow">
<input type="radio" value="No" id="race[]" name="Person[hhhhh].race"> No:
<input type="radio" value="Other" id="race[]" name="Person[hhhhh].race"> Other:
<div id="iamhidden" class="cssclass">
I appear one at a time, when other radio button is checked
</div>
</div>
Working Example
id should be unique in same document, replace the duplicate ones by a class :
<input type="radio" value="No" class="race" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" class="race" name="Person[hhhhhh].race"> Other:
Also add class and not id to the dynamic rows generated by your C# code :
<div class="dynamicRow">
Then in your js use this class :
$(".cssclass").hide();
$('.dynamicRow').on('click', '.race', function () {
if ($(this).val() == "Other") {
$(this).next(".cssclass").show();
} else {
$(this).nextAll(".cssclass").hide();
}
});
Hope this helps.
Try this:
$('body').on('click', '#dynamicRow', function () {
if ($(this).find('[value=Other]').is(":checked")) {
$(".cssclass").each(function (index) {
$(this).closest("div").show();
});
} else {
$(".cssclass").each(function () {
$(this).closest("div").hide();
});
}
});
He is a working example of what you wanted. I am generating the required with js only.
Few Points to mention
you add the event listener to the parent of the dynamic generated content.
Avoid use of IDs if they are not going to be unique and prefer classes and pseudo selectors if required
var counter = 0;
function addNewEntry(){
++counter;
var str = '<div class="dynamicRow"><input type="radio" value="No" id="race[]" name="Person[hh'+counter+'].race"> No:<input type="radio" value="Other" id="race[]" name="Person[hh'+counter+'].race"> Other:<div id="iamhidden" class="cssclass"> I appear one at a time, when other radio button is checked</div> </div>';
$('#dynamicRowContainer').append(str);
$("#dynamicRowContainer .dynamicRow:last-child .cssclass").hide()
}
$('#dynamicRowContainer').on('change', '.dynamicRow > input', function () {
if(this.value=="Other"){
$(this).siblings('.cssclass').show();
}else{
$(this).siblings('.cssclass').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addNewEntry()">Add New Entry</button>
<div id="dynamicRowContainer">
</div>
I have radio buttons in my html code.
I want to change their state based on my input values via jquery
Here is My Html
<div class="col-md-2 col-xs-offset-1">
<div class="radio">
<label>
<input type="radio" name="rdo_pkdrop" value="0" id="rdo_pick">
Pick-up Time
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="rdo_pkdrop" id="rdo_drop" value="1">
Drop Time
</label>
</div>
</div>
An jQuery is
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{
$('#rdo_pick').prop('checked',true);
}
But This has no effect
I also tried with
$('#rdo_pick').prop('checked','checked'); and
$('#rdo_pick').attr('checked','true');
$('#rdo_pick').addClass('checked');
This is only way I could find. Although somewhat inelegant, it does work.
if(qs_trip_type == 0){
$('#rdo_pick').click();
}else{
$('#rdo_drop').click();
}
The issue with bootstrap is that you set a checked radio button by adding the active class to the corresponding label of the input. It looks like this:
<label class="btn btn-default active"> <!-- Note the class 'active' here -->
<input type="radio" name="myRadio" value="value1" checked="checked"/>Value 1
</label>
<!-- ... -->
To check a radio button using jQuery you could first select the input field with a jQuery Selector and then add the class to the parent:
var $myRadioInput = $(...);
$myRadioInput.parent('.btn').addClass('active');
Don't forget to remove the class active on the formerly selected label with jQuery removeClass('active') to first unselect them.
I also like it to set the checked property on the input itself to have the proper state on it:
$myRadioInput.prop('checked', true);
Note that the checked="checked" attribute is only the inital state for the input to be the checked input when loading the page. It does NOT change with the jQuery .prop() method, as it is an attribute and is different to the actual checked property. This is well described in jQuery Docs.
I have tried，this code is ok for bootstrap radio.
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true).click();
}else{ //not ekse
$('#rdo_pick').prop('checked',true).click();
}
there is a typo in your code replace ekse with else
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{
$('#rdo_pick').prop('checked',true);
}
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{ //not ekse
$('#rdo_pick').prop('checked',true);
}
Here's the jsfidlle http://jsfiddle.net/urLh9qnh/
Try this
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{
$('#rdo_drop').prop('checked',true);
}
Try This:
after setting the value of the radio, please add this code
$("input[type='checkbox'], input[type='radio']").iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal'
});
Here is a one line solution:
$('#rdo_pick').iCheck('check');
I have a really long form that I'm trying to create a clickable and tabbable(FocusOut of last input) accordion style effect which opens the next div while hiding the previous. Below is the html:
<form class="common">
<div class="hidesfeildset">
<feildset>
<legend>Section Title:</legend>
<label><input type="text"/></label>
<label><input type="text"/></label>
</fieldset>
</div>
<div class="hidesfeildset">
<feildset>
<legend>Section Title:</legend>
<label><input type="text"/></label>
<label><input type="text"/></label>
</fieldset>
</div>
<div class="hidesfeildset">
<feildset>
<legend>Section Title:</legend>
<label><input type="text"/></label>
<label><input type="text"/></label>
</fieldset>
</form>
And the js:
<script>
$(document).ajaxSuccess(function(){
$(".hidesfieldset").hide();
$("legend").bind("click","focusout",function () {
$(this).next(".hidesfieldset").toggle();
});
});
</script>
I cant get this to work for the life of me, does anyone see what I am doing wrong?
THanks in advance,
Mark
You have misspelled "fieldset" (not feildset) on every hidesfieldset class name as well as the opening fieldset tags. Furthermore, you haven't closed your final hidesfieldset div.
I won't ask your reasons of you choosing the html structure you did, but here is a working fiddle for you to look at and learn from.
http://jsfiddle.net/s4vcX/
// hide all labels (inputs) except for those in the first fieldset
$("fieldset label").hide();
$("fieldset:first label").show();
// show when legend is clicked while hiding rest
$("legend").bind("click", function () {
$("fieldset label").not($(this).nextAll("label")).hide();
$(this).nextAll("label").show();
});
//handle shift-tab on first input of each field set
$("fieldset").find("input:first").bind("keydown", function (e) {
if( e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
if(previous.length==0)
previous = $(this).closest("form").find(".hidesfieldset:last");
previous.find("label").show();
previous.find("input").last().focus();
e.preventDefault();
}
});
//handle tab on last input of each field set
$("fieldset").find("input:last").bind("keydown", function (e) {
if( !e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
if(next.length==0)
next = $(this).closest("form").find(".hidesfieldset:first");
next.find("label").show();
next.find("input").first().focus();
e.preventDefault();
}
});
I have 2 radio buttons no one of them checked by default and I want if any one of them checked a Div appear according to what radio button was checked.
( Divs have different content )
and if the selection changed the one which appeared now disappear and the other appear.
and when one of them appear there are another 2 radio to do the same thing for another one div ( one to show and one to hide )
Here what I tried to do
JavaScript
function haitham()
{
if(document.getElementById('s').checked == true)
{
document.getElementById('StudentData').style.display = "block";
document.getElementById('GraduateData').style.display = "none";
}
else if(document.getElementById('g').checked == true)
{
document.getElementById('GraduateData').style.display = "block";
document.getElementById('StudentData').style.display = "none";
}
}
function info()
{
if(document.getElementById('y').checked == true)
{
document.getElementById('MoreInfo').style.display = "block";
}
else if(document.getElementById('n').checked == true)
{
document.getElementById('MoreInfo').style.display = "none";
}
}
HTML
<input class="margin2" id="s" type="radio" name="kind" value="student" onchange="haitham()"
required="required" />Student
<input class="margin2" id="g" type="radio" name="kind" value="graduate" onchange="haitham()"
required="required" />Graduate
<div id="StudentData">
content 1
<input class="margin2" id="y" type="radio" name="info" value="yes" onchange="info()"
required="required" />Student
<input class="margin2" id="n" type="radio" name="info" value="no" onchange="info()"
required="required" />Graduate
</div>
<div id="GraduateData">
content 2
</div>
<div id="MoreInfo">
content 3
</div>
the first work good but the other 2 radio did not work although it should be the same
Thank you ...
Your problem wasn't a javascript or html one, it was actually a CSS issue. Your code was fine, aside from the fact that the values for display are "none" and "block" not "" and "hidden". I modified your code and updated the fiddle.
Here's the link:
http://jsfiddle.net/8JpSQ/4/
Just add a clicked event to the radio buttons, and through a Javascript function change the attribute of the respective DIV to hidden when required. To show it instead, remove the attribute 'hidden'. Also, we'd probably be able to help more if you can post some code showing what you tried/what went wrong. But what I suggested should be the general approach to make what you want happen.
I have no idea what your HTML is, so here's what I have:
$('input[type="checkbox"]').click(function() {
$('.divWrapper > div').eq($(this).index()).fadeOut().siblings().fadeIn();
});
I'm assuming this is your structure:
<form>
<checkbox>
<checkbox>
...
</form>
<div class="divWrapper">
<div>
<div>
...
</div>