My problem is pretty simple, but I am not able to fix it.
I have 2 radio buttons and a hidden text label. Once the first radio button is clicked, I want to show the hidden label, and when the second radio button is clicked, I want to hide it again - all this without reloading the page.
I am hoping this can be achieved by JavaScript, but unfortunately I don't know how.
Any help will be appreciated.
Thanks in advance.
Try the following simple example.
$(document).ready(function() {
$('input[type=radio][name=GName]').change(function() {
if (this.value == '1') {
$("#label").text("Yes");
}
else if (this.value == '2') {
$("#label").text("No");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input type="radio" name="GName" value="1"> Yes</input>
<input type="radio" name="GName" value="2"> No</input>
<p> <span id="label"> </p>
You can use jQuery to bind an onlick-Event handler
$('#firstcheckbox').click(function() {
//code goes here
});
$('#secondcheckbox').click(function() {
//code goes here
});
Related
I'm trying to enable/disable a place order button based on whether or not the terms acceptance checkbox has been checked. The script I have been working on works fine for that, but it's also triggered when a different checkbox (with a different id) is checked. Although the other checkbox enables the button, it doesn't disable it again when un-checking it. So I think it's something wrong with the 'on change' part.
I've tried everything I could find and can't make it work only when the checkbox with id 'terms' is checked:
<script>
jQuery(window).on('load',function(){
setTimeout(function(){
jQuery('#payment #place_order').attr("disabled","disabled");
},1000);
});
jQuery(document).on('change','#terms',function() {
var ischecked = document.getElementById("terms");
if(ischecked.checked == false){
jQuery('#payment #place_order').attr("disabled","disabled");
}else{
jQuery('#payment #place_order').removeAttr("disabled");
}
});
</script>
The terms checkbox is as below:
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox ios-switch" name="terms" id="terms">
And the other one that triggers it is as below:
<input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
Your code is not clear.
Assuming the place order has the id of #place_order, there is no need to add the container
jQuery(function() { // on page load
jQuery('#place_order').attr("disabled", "disabled");
jQuery(document).on("change", "#terms", function() { // assuming the terms is dynamically inserted
if (!this.checked) {
jQuery('#place_order').attr("disabled", "disabled");
} else {
jQuery('#place_order').removeAttr("disabled");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Terms <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox ios-switch" name="terms" id="terms"><br/>
<button id="place_order">Place order</button>
<hr/>
Create account <input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
I want to make registration page in Laravel (default scaffolded) with little tweak. I have two radio buttons above my inputs and I'm struggling with javascript here. Guest user have two options, (user or company), if user will choose "company" button it should show different inputs than "user" has. For now I have been looking hours in google, what is best way to do it, but everything I try is doesn't work. I suck at javascript..
I have tried something like that just for testing, but looks like I'm again heading wrong way.
$(document).ready(function() {
if (document.getElementById('user').checked) {
document.getElementById('#name').display = 'block';
} else if (document.getElementById('company').checked) {
}
});
Simple approach with steps and code:
1) Wrap your user and company input fields within a group class:
<input type="radio" name="option" id="user_radio_option">
<input type="radio" name="option" id="company_radio_option">
<div class="group" id="user-group">
<!-- user input fields here -->
<h1>User Group</h1>
</div>
<div class="group" id="company-group">
<!-- company input fields here -->
<h1>Company Group</h1>
</div>
2) Use JQuery to show or hide the created groups like:
$("#user_radio_option").click(function(){
$("#user-group").css("display", "block");
$("#company-group").css("display", "none");
});
$("#company_radio_option").click(function(){
$("#company-group").css("display", "block");
$("#user-group").css("display", "none");
});
3) Hide initially with css:
.group{
display:none;
}
4) Since you are using Laravel in your controller you can do something like:
if($request->has('some_user_field')){
//do validation for user
}else{
//do validation for company
}
Of course there is a more elegant way to do this but since this is a simple task and you are new to JQuery that's how I would have get it done a couple of years ago when I was new to JQuery and Javascript. This should also work if the user uses tab and arrows to select your radio.
See working example at: https://codepen.io/ocanodiego/pen/ZKKyRR
Try something like this, the 2 radio's are like:
<input type="radio" name="user_type" value="1" class="user_type"> User
<input type="radio" name="user_type" value="2" class="user_type"> Company
Jquery:
$(document).ready(function() {
$('.user_type').change(function(){
if( $(this).val() == 1 )
{
// User section code here
}
else
{
// Company section code here
}
});
});
I have a problem with a field,
code
HTML
<span id="sudaner">
<input type="radio" name="traveledis" checked value="0" >No
<input type="radio" name="traveledis" value="1" />Yes
</span>
<div id="sudandetails">`
and this is the js code
$("#sudaner input[type='radio']").click(function(){
if($(this).attr("value")=="1"){
$("#sudandetails").css("display","block");
$("#countries").prop('required',true);
$("#bcfrom").prop('required',true);
$("#bcto").prop('required',true);
$("#country_reason").prop('required',true);
}
else {
$("#countries").prop('required',false);
$("#countries").val("");
$("#bcfrom").prop('required',false);
$("#bcfrom").val("");
$("#bcto").prop('required',false);
$("#bcto").val("");
$("#country_reason").prop('required',false);
$("#country_reason").val("");
$("#sudandetails").css("display","none");
}
});
I have 'checked' active in 'NO' but when I go to the form, I see the 'No' in default but the fields aren't hidden at first. I need to move the selection by 'Yes' and again 'No' and the fields are hidden or click 2 times in 'No' and the fields are hidden. so I don't understand why the field aren't hidden at first.
Thanks for your help
I made a fiddle for you and combined the ready function with the click function in an own handler. You can't only check the value on click because there is no click if the document gets loaded, so nothing happens.
https://jsfiddle.net/ww582Lj9/
function myHandler(e) {
if($(this).attr("value")=="1"){
$("#sudandetails").css("display","block");
$("#countries").prop('required',true);
$("#bcfrom").prop('required',true);
$("#bcto").prop('required',true);
$("#country_reason").prop('required',true);
}
else {
$("#countries").prop('required',false);
$("#countries").val("");
$("#bcfrom").prop('required',false);
$("#bcfrom").val("");
$("#bcto").prop('required',false);
$("#bcto").val("");
$("#country_reason").prop('required',false);
$("#country_reason").val("");
$("#sudandetails").css("display","none");
}
}
$(document).ready(myHandler);
$("#sudaner input[type='radio']").on("click", myHandler);
You need to hide this div initially. add this line in you script
$("#sudandetails").hide();
You bind an event on click and when page load click event not trigger.
I have the following code:
var selectedMarkerClass = 'was-selected';
$('.group_1').change(function() {
$(this).addClass(selectedMarkerClass);
if ($('.' + selectedMarkerClass).length == $('.group_1').length) {
$('#2').removeClass('red');
}
});
Here is the HTML in question:
<input class="single_text_input group_1" type="text" name="primary_referral" />
<input class="single_text_input group_1" type="text" name="secondary_referral" />
<input class="group_1" type="radio" name="referral_open" value="Yes" /> Yes
<input class="group_1" type="radio" name="referral_open" value="No" /> No
<span id="2" class="red">Referral Group</span>
What is happening now is that both radio buttons in the group have to be changed in order for the class to be removed from the span. I would like it to work where only one of the radio buttons in the group has to be changed.
Use the click event not change event.
$('.group_1').click(function() {
$(this).addClass(selectedMarkerClass);
if ($('.' + selectedMarkerClass).length == $('.group_1').length) {
$('#2').removeClass('red');
}
});
Update:
if ($('.' + selectedMarkerClass).length == $('.group_1').length)
Is tripping you up. You are removing the red class only if the selected class has been added to each radio and you can only add the selected class if you click each radio.
A better way would be:
$('.group_1').click(function() {
$('#2').removeClass('red');
});
Less code is often times better. You can't unselect a radio. So any click on the radios ensures at least one is clicked.
Try it with click event instead. You see the change take place after the second click because change gets fired after the first radio button loses focus.
After both radio button changed, $('.' + selectedMarkerClass).length == 2 and $('.group_1').length == 4 because you are using .group_1 class for radio buttons and as well as for input[type=text] too.
need filter your radio button, use "[name=referral_open]",
var selectedMarkerClass = 'was-selected';
$('.group_1').change(function () {
$(this).addClass(selectedMarkerClass);
if ($('.' + selectedMarkerClass).length == $('.group_1[name=referral_open]').length) {
$('#2').removeClass('red');
}
});
hi i have a problem with displaying amount.i have the page called make payment in this page i made three radio buttons, if i click the button that amount must add with addcart like a product.
<form method="post" form name="make_payment_frm" action="module/make-payment-module.php" onsubmit="return show_make_payment_validation();" >
<form id='theForm'>
<input type="hidden" name="totalamount" id="totalamount" value="1" />
input type="radio" name="rmr" id="payment1" value="3" onclick="updatepayment(this.value)" />
input type="radio" name="rmr" id="payment2" value="5.5" onclick="updatepayment(this.value)"/>
input type="radio" name="rmr" id="payment4" value="10" onclick="updatepayment(this.value)"/>
div id="finalamount">
/div>
i think that problem is my js script. if i click that button there is no response. how do i solve that problem
you guys can give me any idea
$(document).ready(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).click(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).attr("checked", false);
});
$(this).attr("checked", true);
});
});
})
function updatePayment(val) {
$("<p/>").html("updatePayment(" + val + ")").appendTo(document.body);
}
thanks.have a nice day
I have no idea why you seem to be implementing the selecting and un-selecting of radio buttons in jQuery, surely HTML will handle that correctly for you.
However if you are using jQuery, do away with those onclick attributes since that is the benefit of jQuery and achieve the same result as follows:
$(function() {
$('.cart :radio[name="rmr"]').change(function() {
if ($(this).is(':checked'))
updatePayment(this.value);
});
});
This will attach a change event to every radio button input with the attribute name="rmr". Thus when the client clicks a new radio button, the value of two radio buttons will change, and the one that is then selected will call the updatePayment function with its value.