Radio button values not saved when form reloads jQuery - javascript

I'm working on a way to show and hide a form with some help of jQuery and radio buttons. The show and hide part is working. In my form there is a question if i will attend the party. When clicked on the radio button yes, i can see all the personal detail fields i have to fill in ( Name, Address etc...), when i click no, all these fields are hidden.
Now when the form gets reloaded, it seems my jQuery doesn't save the value of the radio button and the personal fields will be shown, regardless yes or no. What can i change in the code so when the form gets reloaded, i keep the radio button option i selected?
I have created a fiddle to simulate the problem: https://jsfiddle.net/eo9ydcbn/2/
accepted = $('input[name*="accepted"]');
accepted.change( function() {
var input_accepted = $('input[name*="accepted"]:checked').val();
console.log(input_accepted);
if ( input_accepted == '0' ) {
$('#registerForm').collapse('hide');
}
else
{
$('#registerForm').collapse('show');
}
}).trigger('change');
All the help is greatly appreciated!

this fiddle will help you, you will see hoe to make a change based on radio: https://jsfiddle.net/maky/pahrthy0/
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("value") == "red") {
$(".box").not(".red").hide();
$(".red").show();
}
if ($(this).attr("value") == "green") {
$(".box").not(".green").hide();
$(".green").show();
}
if ($(this).attr("value") == "blue") {
$(".box").not(".blue").hide();
$(".blue").show();
}
});
});

I figured it out,
Instead of using .collapse to show and hide the form, i used .show and .hide.
Now it keeps my radio button settings
accepted = $('input[name*="accepted"]');
accepted.change( function() {
var input_accepted = $('input[name*="accepted"]:checked').val();
console.log(input_accepted);
if ( input_accepted == '0' ) {
$('#registerForm').hide('slow');
}
else
{
$('#registerForm').show('slow');
}
}).trigger('change');

Related

Toggle Show and Enable Textfiled When Certain Radio Button is Selected

I would like to be able to have an input field (initially hidden and disabled) to be shown and enabled every time the "Other" radio button is selected, and ofcoure to be hidden and disabled when a different radio button is selected . I have gotten this script to show and hide the textfield appropriately, but Id like to know how I can get enabling and disabling to happen with it
$('input[name="x_description"]').bind('change',function(){
var showOrHide = ($(this).val() == "Other") ? true : false;
$('#other_program_text').toggle(showOrHide);
});
I know that this is how to show the field and enable the textfield, but cant figure out how to put it all together,
$(this).show().prop('disabled', false);
Thanks in advance,
Dan
$('input[name="x_description"]').bind('change',function(){
if ( showOrHide == true ) {
$('#other_program_text').show().prop('disabled',false);
} else if ( showOrHide == false ) {
$('#other_program_text').hide().prop('disabled',true);
}
});
You want to use the $(this).attr() function to set properties on an HTML element. With one parameter it'll read the passed param, with two it'll set it.
Like $(this).attr("enabled", true)
You can use "click" method
$('input[name="x_description"]').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});
If your content are dynamically generated then use "live" method
$('input[name="x_description"]').live('click',function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});

disable a CheckBox depending on dropdownlist

I'm working on a asp.net mvc3 application with DropDownLists and CheckBoxes and so on.
I wrote a javascript to disable a CheckBox if a defined option of a dropdownlist is selected:
$(function() {
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$('#checkboxId').attr('disabled', disabled);
} else {
$('#checkboxId').removeAttr('disabled', disabled);
}
});
});
this works fine, but the script reacts only on a change of the dropdownlist
so if '1st option' is on the top of the dropdownlist and so automatically selected as default, the script doesn't disable the checkbox. Only if the user select another option and select '1st option' once again...
Please help me :)
PS: the script also doesn't work if I use my keyboard to switch the dropdownlist options instead of my mouse
So it would be very kind if you could help my to improve the script, because I really can't do javascript :/
$(function() {
var $cb = $('#checkboxId');
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$cb.prop('disabled', true);
} else {
$cb.prop('disabled', false);
}
}).trigger('change');
});
The difference in triggering change event after adding halnderl. About your second question - Using keyboard the 'change' event will be triggered when select will lose focus ('blur').
You could do something like this:
function setCheckBox() {
if (this.value == '1st option') {
$('#checkboxId').attr('disabled', disabled);
} else {
$('#checkboxId').removeAttr('disabled', disabled);
}
}
$(function() {
setCheckBox();//do this on load..
$('#dropdownlistId').change(function() {
setCheckBox();//and on change
});
});
When you define your CheckBox control, use disabled attribute to disable it by default. That way it will be disabled already and there is no need to add more javascript to disable it from the get go.
It would look something like this:
#Html.CheckBoxFor(model => model.IsCheckBox, new { #disabled = "true" })
$(function() {
var $cb = $('#checkboxId');
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$cb.attr('disabled', disabled);
} else {
$cb.removeAttr('disabled', disabled);
}
}).trigger('change');
});
works like a charm now
thank you guys
Your code seems to be little incorrect depends on your need because your calling the disable function on change of that dropdown list you need to write it in document.ready like this
$(document).ready(function () {if(document.getElementById("dropdownlistId").value="1stoption")
{
document.getElementById('checkboxId').style.visibility = 'hidden';
}
else
{//do something whatever you wish here in else condition
}
}
Hope it helps!!!

jQuery - Clear form field with .change event

I am using the following jQuery code to switch div displays based on a change event tied to 3 radio buttons:
(function ($) {
Drupal.behaviors.change_form_fields = {
attach: function(context, settings) {
$('div.form-item-payment-method input').each(function() {
if (this.value != 'existing-bill') {
$('div#' + this.value).css('display', 'none');
}
});
$('div.form-item-payment-method input').change(function() {
show_class = this.value;
$('div.form-item-payment-method input').each(function() {
if (this.value != show_class) {
$('input#edit-' + this.value).val('');
$('div#' + this.value).css('display', 'none');
} else {
$('div#' + this.value).css('display', 'block');
}
});
});
}
}
}(jQuery));
This works fine and dandy, but I want to add some more to it.
If a user selects a radio button, I want to blank/clear out the form fields in the other groups. Like the onload (.each), they have divs around the display content.
I tried using .attr and .val, but the form fields would not clear when selecting another radio button. What am I missing? jQuery 1.4x+
val('') should do the trick, so there must be some other issue with either the selector, or the code not being run.
Use the radio buttons change event that should help you.
$("input[type=radio][name=groupname]").change(function(){
//Code the clear the form fields or other logic here.
});

Improving use of radio buttons to enable/disable form fields

I have two radio buttons, and two corresponding form fields. Depending on which radio button is selected, one form field gets disabled and the other gets enabled.
My code works, but I think it can be improved. Right now I have two separate processes. One checks to see which radio button is selected when the page loads and disables the appropriate field. The other responds to changes by the user after the page has loaded. I believe it can be simplified but I don't know how.
$(document).ready(function() {
if ($("#element_link_link_type_internal").is(':checked')) {
$("#element_link_url").attr("disabled","disabled");
} else {
$("#element_link_page_id").attr("disabled","disabled");
}
});
$(document).ready(function() {
$("#element_link_link_type_internal").click(function(){
$("#element_link_page_id").attr("disabled","");
$("#element_link_url").attr("disabled","disabled");
}),
$("#element_link_link_type_external").click(function(){
$("#element_link_page_id").attr("disabled","disabled");
$("#element_link_url").attr("disabled","");
});
});
Thanks!
You can test the checked state within the onchange handler, and simply invoke the onchange handler (which I believe you should be using instead of onclick) once when the page loads:
$(document).ready(function() {
$("#element_link_link_type_internal").change(function() {
$("#element_link_page_id").attr("disabled", !this.checked);
$("#element_link_url").attr("disabled", this.checked);
}).change(); // invoke once to set up initial state
});
This is untested and based on your comments/answer:
jQuery < 1.6:
$(document).ready(function() {
var $type = $('input[name="element_link[link_type]"]'),
$pageId = $("#element_link_page_id"),
$url = $("#element_link_url");
$type.change(function() {
if ($type.filter(":checked").val() === "internal") {
$pageId.removeAttr("disabled");
$url.attr("disabled", "disabled");
} else {
$url.removeAttr("disabled");
$pageId.attr("disabled", "disabled");
}
}).change();
});
jQuery >= 1.6
$(document).ready(function() {
var $type = $('input[name="element_link[link_type]"]'),
$pageId = $("#element_link_page_id"),
$url = $("#element_link_url");
$type.change(function() {
var isDisabled = ($type.filter(":checked").val() === "internal");
$pageId.prop("disabled", !isDisabled);
$url.prop("disabled", isDisabled);
}).change();
});
#karim79, your answer got me started but it didn't work when the 2nd radio button was selected. It only worked when the 1st radio button was selected.
I came up with this, and it seems to do the trick. I'd welcome anyone to offer additional improvements though. JavaScript blows my mind.
$(document).ready(function() {
$("input[name='element_link[link_type]']").change(function() {
var v = $("input[name='element_link[link_type]']:checked").val()
$("#element_link_page_id").attr("disabled", v == 'internal' ? "" : "disabled");
$("#element_link_url").attr("disabled", v == 'internal' ? "disabled" : "" );
}).change(); // invoke once to set up initial state
});

Radio - click action and length action

I have radios button on the page, when the page load, it will use length action to check and then hide/show some elements.
When user click on the radio, it will then hide and show some elements.
I'm wondering is this correct way doing it? Or how can it be improved?
$(document).ready(function() {
if ($(".delivery_type:radio").length > 0) {
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery").hide();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($('#methodDelivery').is(':checked')) {
$(".methodPickup").hide();
}
}
$(".delivery_type:radio").live('click', function() {
if ($(this).val() == "pickup") {
$(".methodDelivery").hide();
$(".methodPickup").show();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($(this).val() == "delivery") {
if ($(".selectAddressList").length == 0) {
$(".customAddress").show();
}
$(".methodDelivery").show();
$(".methodPickup").hide();
$("#addressBookSelectBlock").show();
}
});
});
You could combine all the hide() and show() functions together:
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery, #addressBookSelectBlock, .customAddress").hide();
}
// etc...
Also, I'm not sure why you are using live() unless the radio buttons are being dynamically added or removed; just use click() if they are not dynamic.
Sharing some HTML and a little more information might help with more suggestions.

Categories