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
}
});
});
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">
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
});
I would like to conditionally disable a button based on a radio and checkbox combination. The radio will have two options, the first is checked by default. If the user selects the second option then I would like to disable a button until at least one checkbox has been checked.
I have searched at length on CodePen and Stack Overflow but cannot find a solution that works with my conditionals. The results I did find were close but I couldn't adapt them to my needs as I am a Javascript novice.
I am using JQuery, if that helps.
If needed:
http://codepen.io/traceofwind/pen/EVNxZj
<form>
<div id="input-option1">First option: (required)
<input type="radio" name="required" id="required" value="1" checked="checked">Yes
<input type="radio" name="required" id="required" value="2">No
<div>
<div id="input-option2">Optionals:
<input type="checkbox" name="optionals" id="optionals" value="2a">Optional 1
<input type="checkbox" name="optionals" id="optionals" value="2b">Optional 2
<div>
<div id="input-option3">Extras:
<input type="checkbox" name="extra" id="extra" value="3">Extra 1
<div>
<button type="button" id="btn">Add to Cart</button>
</form>
(Please excuse the code, it is in short hand for example!)
The form element IDs are somewhat fixed. The IDs are generated by OpenCart so I believe the naming convention is set by group, rather than unique. I cannot use IDs such as radio_ID_1 and radio_ID_2, for example; this is an OpenCart framework facet and not a personal choice.
Finally, in pseudo code I am hoping someone can suggest a JQuery / javascript solution along the lines of:
if radio = '2' then
if checkboxes = unchecked then
btn = disabled
else
btn = enabled
end if
end if
Here is a quick solution and I hope that's what you were after.
$(function() {
var $form = $("#form1");
var $btn = $form.find("#btn");
var $radios = $form.find(":radio");
var $checks = $form.find(":checkbox[name='optionals']");
$radios.add($checks).on("change", function() {
var radioVal = $radios.filter(":checked").val();
$btn.prop("disabled", true);
if (radioVal == 2) {
$btn.prop("disabled", !$checks.filter(":checked").length >= 1);
} else {
$btn.prop("disabled", !radioVal);
}
});
});
Here is a demo with the above + your HTML.
Note: Remove all the IDs except the form ID, button ID (since they're used in the demo) as you can't have duplicate IDs in an HTML document. an ID is meant to identify a unique piece of content. If the idea is to style those elements, then use classes.
If you foresee a lot of JavaScript development in your future, then I would highly recommend the JavaScript courses made available by Udacity. Although the full course content is only available for a fee, the most important part of the course materials--the videos and integrated questions--are free.
However, if you don't plan to do a lot of JavaScript development in the future and just need a quick solution so you can move on, here's how to accomplish what you are trying to accomplish:
$(document).ready(function(){
$('form').on('click', 'input[type="radio"]', function(){
conditionallyToggleButton();
});
$('form').on('click', 'input[type="checkbox"]', function(){
conditionallyToggleButton();
});
});
function conditionallyToggleButton()
{
if (shouldDisableButton())
{
disableButton();
}
else
{
enableButton();
}
}
function shouldDisableButton()
{
if ($('div#input-option1 input:checked').val() == 2
&& !$('form input[type="checkbox"]:checked').length)
{
return true;
}
return false;
}
function disableButton()
{
$('button').prop('disabled', true);
}
function enableButton()
{
$('button').prop('disabled', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="input-option1">First option: (required)
<input type="radio" name="required" id="required" value="1" checked="checked">Yes
<input type="radio" name="required" id="required" value="2">No
<div>
<div id="input-option2">Optionals:
<input type="checkbox" name="optionals" id="optionals" value="2a">Optional 1
<input type="checkbox" name="optionals" id="optionals" value="2b">Optional 2
<div>
<div id="input-option3">Extras:
<input type="checkbox" name="extra" id="extra" value="3">Extra 1
<div>
<button type="button" id="btn">Add to Cart</button>
</form>
Note that the JavaScript code above is a quick-and-dirty solution. To do it right, you would probably want to create a JavaScript class representing the add to cart form that manages the behavior of the form elements and which caches the jQuery-wrapped form elements in properties.
I am using the script below to show and hide a div based on whether or not the checkbox is checked, this if so I can show/hide a paypal button until they accept the terms.
But we now want of offer three payment option so it will need to open/close 3 divs, I tried just copying the div 3 times but it still only opened one. Can any body help me with this please?
<script type="text/javascript">
function doInputs(obj){
var checkboxs = obj.form.c1;
var i =0, box;
document.getElementById('mydiv').style.display = 'none';
while(box = checkboxs[i++]){
if(!box.checked)continue;
document.getElementById('mydiv').style.display = '';
break;
}
}
</script>
<form>
<input type="checkbox" name="c1" onclick="doInputs(this)">
</form>
<div id="mydiv" style="display:none">
<input type="text">
</div>
Also it would be amazing if someone could help me add in another checkbox, and make the paypal buttons (divs) only show when BOTH are checked?
Thanks very much!
I also stole Marcus's answer but with the following improvements:
I use the jQuery document ready event so the code fires after the page loads
I simplified the logic
It works for multiple types of payment
http://jsfiddle.net/5Byes/3/
Using jQuery you can have an array or just two variables that are set to false. When a button is checked you set that equivalent value to the opposite of the current value (so if it was false, it would become true and vice-versa).
Here's a simple example of how you could accomplish this: http://jsfiddle.net/5Byes/
Only one element with particular ID is allowed on the page. If you want more — use class attribute.
On the other hand, you could wrap all divs with payments method in one div with ID, let's say, paymentsMethods and then show/hide it.
var paymentsDiv = document.getElementById('paymentsMethods');
if (box.checked) paymentsDiv.show(); else paymentsDiv.hide();
If you want 2 checkboxes — set onclick of both to same handler and change condition to box1.checked && box2.checked.
With jQuery (which is in your question tags) you could do $('#paymentsMethods').toogle() on checkbox click (see also $.hide() and $.show()).
If I understand correctly what you're looking for, you can do it like this:
HTML:
<input id="opt1cb" type="checkbox" value="Option 1" />Option 1<br />
<input id="opt2cb" type="checkbox" value="Option 2" />Option 2<br />
<input id="opt3cb" type="checkbox" value="Option 3" />Option 3<br />
<div class="option" id="opt1">Option 1</div>
<div class="option" id="opt2">Option 2</div>
<div class="option" id="opt3">Option 3</div>
<div class="option" id="opt23">Option 2 & 3</div>
jQuery:
$('.option').hide();
$('#opt1cb').click( function() {
if( $(this).prop("checked") ) {
$('#opt1').show();
} else {
$('#opt1').hide();
}
});
$('#opt2cb').click( function() {
if( $(this).prop("checked") ) {
$('#opt2').show();
if( $('#opt3cb').prop("checked") )
$('#opt23').show();
} else {
$('#opt2').hide();
$('#opt23').hide();
}
});
$('#opt3cb').click( function() {
if( $(this).prop("checked") ) {
$('#opt3').show();
if( $('#opt2cb').prop("checked") )
$('#opt23').show();
} else {
$('#opt3').hide();
$('#opt23').hide();
}
});
Working jsfiddle here: http://jsfiddle.net/bCDqa/
http://jsfiddle.net/5Byes/4/
I stole Marcus' fiddle and updated it to do what you want.
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.