How would I do this is Javascript? I'm trying to figure out a way in Javascript to trigger that submit button below if checkbox is checked. Which is it.
<input type="checkbox" name="product[6]" value="1" checked="checked">
<input type="submit" value="Continue">
Thank for you any help!
Tim
UPDATED
You can handle submit() event and add condition like bellow :
JS :
$("#target").submit(function( event ) {
event.preventDefault(); //prevent submit action here
//Condition on checkbox
if($( "input[name='product[6]']:checked" )){
$('#submit-btn').click(); //handle submit if condition true
}
});
For simplicity and specificity of which checkbox am adding ID's to elements
<input id="product6" type="checkbox" name="product[6]" value="1" checked="checked">
<input id="submit-btn" type="submit" value="Continue">
jQuery:
$(function(){
if( $('#product6').is(':checked') ){
$('#submit-btn').click();
// or submit the form
$('#product6').closest('form').submit();
}
});
First you want to give the checkbox input an id (checkbox-id for example)
and for the submit input (submit-id for example)
document.getElementById("checkbox-id").onclick = myFunction;
function myFunction()
{
document.getElementById("submit-id").click();
//Or
document.getElementById("submit-id").submit();
}
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 have a checkbox on a form that does something dangerous. So, I want to make sure the user is really sure when they check this item, but I don't want to warn them if they're unchecking the checkbox.
My issue is this works fine if they click on the actual checkbox to uncheck it, but not the text of the label.
http://jsfiddle.net/j2ppzpdk/
function askApply() {
if (document.getElementById("apply").checked) {
var answer = confirm("Are you sure about that?");
if (!answer) {
document.getElementById("apply").checked = false;
}
}
}
<form>
<label onclick="askApply();">
<input type="checkbox" name="apply" id="apply" value="1" /> Apply
</label>
</form>
Some notes:
Better add the event listener to the element that changes (the checkbox), not its label.
Better listen to change event instead of click. For example, the checkbox could be changed using the keyboard.
Better avoid inline event listeners. You can use addEventListener instead.
document.getElementById('apply').addEventListener('change', function() {
if(this.checked) {
var answer = confirm("Are you sure about that?");
if (!answer) {
document.getElementById("apply").checked = false;
}
}
});
<form>
<label>
<input type="checkbox" name="apply" id="apply" value="1" />
Apply
</label>
</form>
I've got the following code to trigger a click event on some radio buttons! but it doesn't get fired! can any one help me with this!
CODE :
$("#inline_content input[name='type']").click(function(){
if($('input:radio[name=type]:checked').val() == "walk_in"){
$('#select-table > .roomNumber').attr('enabled',false);
}
});
RADIO BUTTONS
<form class="type">
<input type="radio" name="type" checked="checked" value="guest">In House</input>
<input type="radio" name="type" value="walk_in">Walk In</input>
</form>.
Update
Tried onChange() too but not working.
It fires. Check demo http://jsfiddle.net/yeyene/kbAk3/
$("#inline_content input[name='type']").click(function(){
alert('You clicked radio!');
if($('input:radio[name=type]:checked').val() == "walk_in"){
alert($('input:radio[name=type]:checked').val());
//$('#select-table > .roomNumber').attr('enabled',false);
}
});
There are a couple of things wrong in this code:
You're using <input> the wrong way. You should use a <label> if you want to make the text behind it clickable.
It's setting the enabled attribute, which does not exist. Use disabled instead.
If it would be an attribute, it's value should not be false, use disabled="disabled" or simply disabled without a value.
If checking for someone clicking on a form event that will CHANGE it's value (like check-boxes and radio-buttons), use .change() instead.
I'm not sure what your code is supposed to do. My guess is that you want to disable the input field with class roomNumber once someone selects "Walk in" (and possibly re-enable when deselected). If so, try this code:
HTML:
<form class="type">
<p>
<input type="radio" name="type" checked="checked" id="guest" value="guest" />
<label for="guest">In House</label>
</p>
<p>
<input type="radio" name="type" id="walk_in" value="walk_in" />
<label for="walk_in">Walk in</label>
</p>
<p>
<input type="text" name="roomnumber" class="roomNumber" value="12345" />
</p>
</form>
Javascript:
$("form input:radio").change(function () {
if ($(this).val() == "walk_in") {
// Disable your roomnumber element here
$('.roomNumber').attr('disabled', 'disabled');
} else {
// Re-enable here I guess
$('.roomNumber').removeAttr('disabled');
}
});
I created a fiddle here: http://jsfiddle.net/k28xd/1/
Personally, for me, the best solution for a similar issue was:
HTML
<input type="radio" name="selectAll" value="true" />
<input type="radio" name="selectAll" value="false" />
JQuery
var $selectAll = $( "input:radio[name=selectAll]" );
$selectAll.on( "change", function() {
console.log( "selectAll: " + $(this).val() );
// or
alert( "selectAll: " + $(this).val() );
});
*The event "click" can work in place of "change" as well.
Hope this helps!
A different way
$("#inline_content input[name='type']").change(function () {
if ($(this).val() == "walk_in" && $(this).is(":checked")) {
$('#select-table > .roomNumber').attr('enabled', false);
}
});
Demo - http://jsfiddle.net/cB6xV/
Seems like you're #inline_content isn't there! Remove the jQuery-Selector or check the parent elements, maybe you have a typo or forgot to add the id.
(made you a jsfiddle, works after adding a parent <div id="inline_content">: http://jsfiddle.net/J5HdN/)
put ur js code under the form html or use $(document).ready(function(){}) and try this.
$('#inline_content input[type="radio"]').click(function(){
if($(this).val() == "walk_in"){
alert('ok');
}
});
I have difficulty to solve this and would ask your help !
I'm trying to make a javascript but i had no success
i have inside a form below, two input checkbox, when the user press the submit
i want to verify if the two checkbox is checked, if they are checked i want to
disable the two before sending it to another page,
and if only one of then is checked, i want to do nothing.
<form action="{$GLOBALS.site_url}/search/">
<input type="checkbox" checked = "checked" name="new[equal]" value="1" /> New <br>
<input type="checkbox" checked = "checked" name="used[equal]" value="1" /> Used <br>
<input type="submit" class="button" value="[[Find:raw]]" />
</form>
thank you friends
Have a look here : http://api.jquery.com/checked-selector/
It explains to you how you can use jquery to check if a checkbox is checked or not.
You can try this.
var new = document.forms[0]["new[equal]"],
used = document.forms[0]["used[equal]"]
if(new.checked && used.checked){
new.disabled = true;
used.disabled = true;
}
If you have multiple forms on the page then you should provide a name to the form and use the form name to select the required form.
Something like this will do.
document.formName.elementName or document.formName['elementName']
Update:
If you want to validate this on submit button click then you can create a JS function with above code and call it on submit button click
HTML
<input type="submit" onclick="ValidateForm()" value="Submit" />
JS
function ValidateForm(){
var new = document.forms[0]["new[equal]"],
used = document.forms[0]["used[equal]"]
if(new.checked && used.checked){
new.disabled = true;
used.disabled = true;
}
}
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.