I am trying to achieve: Looks like my if statement is wrong for the input text field.
There are 2 parent divs with class (parent and graph-radio)
In parent div, 2 sub-parents. 1 with radio and 1 with input text.
I should select any one of the radio buttons only, I can't select both the div's radio buttons.
If they select radio button from first parent div then it is mandatory to type in at-least in any one of the input text boxes.
If they have selected the second parent radio box, then the submit button along with last input text box should be clickable/editable.
If they have selected first parent radio button along with any text typed in any one of the text field then again the submit button along with last input text box should be clickable/editable.
If nothing is selected then the last input text with submit button should remain inactive
var init_txt = $(".init-one-text");
var init_radio_btn = document.querySelector('input[name="radios-init"]:checked') != null ? document.querySelector('input[name="radios-init"]:checked').value : "";
var graph_radio_btn = document.querySelector('input[name="graph-init"]:checked') != null ? document.querySelector('input[name="graph-init"]:checked').value : "";
if ((init_radio_btn != '' && init_txt.length > 1) || graph_radio_btn != '') {
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('readonly', false);
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('disabled', false);
} else {
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('readonly', true);
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('disabled', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<!--Parent 1 Radio start-->
<div class="init-radio-parent">
<input type="radio" name="radios-init">
<label for="radios-init">One</label>
<input type="radio" name="radios-init">
<label for="radios-init">two</label>
<input type="radio" name="radios-init">
<label for="radios-init">three</label>
</div>
<!--Parent 1 Radio end-->
<!--Parent 1 text input start-->
<div class="text-field-init">
<input type="text" id="init-one-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-two-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-three-id" class="init-one-text" name="init-one-text" maxlength="1/">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<!--Parent 1 text input end-->
</div>
<br><br>
<!--Parent 2 text radio start-->
<div class="graph-radio">
<input type="radio" name="graph-init">
<label for="graph-init">GOne</label>
<input type="radio" name="graph-init">
<label for="graph-init">GTwo</label>
</div>
<!--Parent 2 text radio end-->
<br><br>
<div class="add-to-bag-section">
<input type="text">
<input type="submit">
</div>
You can check the following code. Hope it will help you
$(document).ready(function(){
$(".graph-radio-btn").click(function(){
if($(this).prop("checked")==true){
$(".add_to_bag_input,.btn").removeAttr("disabled");
$(".graph-radio-input").removeAttr("checked");
}else{
$(".add_to_bag_input,.btn").attr("disabled","disabled");
}
});
$(".graph-radio-input").click(function(){
if($(this).prop("checked")==true){
$(".add_to_bag_input,.btn").removeAttr("disabled");
$(".graph-radio-btn").removeAttr("checked");
}else{
$(".add_to_bag_input,.btn").attr("disabled","disabled");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<!--Parent 1 Radio start-->
<div class="init-radio-parent">
<input type="radio" name="radios-init" class="graph-radio-btn">
<label for="radios-init">One</label>
<input type="radio" name="radios-init" class="graph-radio-btn">
<label for="radios-init">two</label>
<input type="radio" name="radios-init" class="graph-radio-btn">
<label for="radios-init">three</label>
</div>
<!--Parent 1 Radio end-->
<!--Parent 1 text input start-->
<div class="text-field-init">
<input type="text" id="init-one-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-two-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-three-id" class="init-one-text" name="init-one-text" maxlength="1/">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<!--Parent 1 text input end-->
</div>
<br><br>
<!--Parent 2 text radio start-->
<div class="graph-radio">
<input type="radio" name="graph-init" class="graph-radio-input">
<label for="graph-init">GOne</label>
<input type="radio" name="graph-init" class="graph-radio-input">
<label for="graph-init">GTwo</label>
</div>
<!--Parent 2 text radio end-->
<br><br>
<div class="add-to-bag-section">
<input type="text" class="add_to_bag_input" disabled>
<input type="submit" class="btn" disabled>
</div>
<!-- end snippet -->
I feel you should validate it yourself.
Write a separate function to enable the button like
function enableSubmit() {
$('#submitbutton').prop('disabled',false)
}
and then read the onchange values and make your logic like
$(document).onchange(function(){
var radio1=$('#radio1_id');
var radio2=$('#radio2_id');
var text1=$('#text1_id');
var text2=$('#text2_id');
if(radio1 && !radio2){
if(text1!=''){
enableSubmit();
}else{
disableSubmit();
}
}
else if(radio2 && !radio1){
disableSubmit();
}
});
u can use nested if to apply all your conditons
Related
I have a form with multiple input fields where users may choose to enter a value or not. Next to each input field is a hidden input field that will send a specific id unique to the previous input field. On form submission, all blank input fields are disabled. This I got to work using this code.
function disableEmptyInputs(form) {
var controls = form.elements;
for (var i = 0, iLen = controls.length; i < iLen; i++) {
controls[i].disabled = controls[i].value == '';
}
}
I now want to also disable the hidden inputs if their primary visible input field is null
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for A" class="form-control" type="text" />
<input type="hidden" name="PayId" value="A" />
</div>
</div>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
<input type="hidden" name="PayId" value="B" />
</div>
</div>
Any help will be really appreciated. The form submits to a c# backend where I am able to filter out all blanks If I allowed all blanks to be submitted but I felt if I could filter all blanks by making them disabled at the client side in addition to server side that will be better.
You can use .each loop to iterate through your form elements and then compare if the value of input is "" simply disable that input and also the input next to it using .next().
Demo Code :
$("form").on("submit", function() {
//loop through input(exclude hidden input)..select..etc
$("form").find("input:not(:hidden),select").each(function() {
//if the value is empty
if ($(this).val() == "") {
$(this).prop("disabled", true) //disable
$(this).next().prop("disabled", true) //also next field (hidden) disable
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for A" class="form-control" type="text" value="abc" />
<input type="hidden" name="PayId" value="A" />
</div>
</div>
<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
<input type="hidden" name="PayId" value="B" />
</div>
</div>
<button>Click me ..</button>
</form>
I have a form with multiple checkboxes and each checkbox as an input field associated with it that'll activate once you check the checkbox.
I've got the frontend working just fine, but I was wondering how can I read in my PHP which checkboxes were checked along with their respective input fields (and some have a radio button too in addition to the input field)
Here's what each individual checkbox in my form looks like:
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
<!-- Option 1 ends -->
I haven't wrapped my head around the PHP yet but previously to read multiple checkboxes I put them all in an array in the name field and read that array in PHP. However, that was without the added complication of each checkbox having input field.
Does anyone have any idea how to do this?
You want to use an associative array for both the inputs and the checkboxes.
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" name="items[1][chosen]" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="items[1][quantity]">
<input type="number" step="1" max="" value="1" name="items[1][quantity]" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="items[1][quantity]">
</div>
</div>
</div>
<!-- Option 1 ends -->
For option 2 use items[2][chosen] and items[2][quantity], etc.
Note that must specify the index and can't use []. Otherwise, the index of quantity will not match the chosen item.
In php you can loop through the items and ignore the items that aren't chosen.
foreach ($_POST['items'] as $item) {
if (!isset($item['chosen'])) continue; // Skip items that aren't chosen.
echo $item['quantity'] . ' ' . $item['chosen'] . "\n";
}
Got a 3 selection radio button options and also a number field, in case somebody wants to select more than radio buttons can offer. And i'm trying to pass a radio button value to the number field when radio value is changed.
Here is my html code for it
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
And this is my jquery code for it
$("form.quanform .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function(){
$(this).click(function(){
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
Nothing happens and there are no errors in the console
The problem lies purely in your selector:
$("form.quanform) won't work, as your <form class="quanform"> is wrapped inside another <form>, which is invalid markup; <form> cannot be nested inside another <form>.
Because the 'desired' markup is invalid, it actually never gets added to the DOM. You can confirm this by viewing the source yourself with CTRL + U - <form class="quanform"> doesn't exist. Thus, you cannot target it with jQuery.
You can validate your markup with the W3 Validation service to ensure that your HTML is indeed valid, ensuring that your jQuery selectors work the way you expect.
As for your current structure, you can omit the .quanform component, and simply use $("form .pricelinewrap .priceline .pricelinecellval input[type=radio]"), which will work based off of the outer <form> element (which does indeed exist in the DOM).
This can be seen working in the following example:
$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function() {
$(this).click(function() {
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
Hope this helps! :)
I want to change the radio Button text after selecting that Radio button like,
If the first radio button is selected, the text should change from Checkout as a guest to Checkout as a guest --> Please Press continue.
If they select the second radio button the text should change from Register an account to Register an account --> Please Press Continue
<div class="PL40" style="line-height: 2;">
<dl>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_guest">
<span class="">
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');">
</span>
</div>
Checkout as a guest
</label>
</dd>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_register">
<span class="checked">
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing & Account Details');">
</span>
</div>
Register an account
</label>
</dd>
<dd class="Submit mt10 mb10">
<input type="submit" id="CreateAccountButton" value="Continue" class="btn">
<span class="LoadingIndicator" style="display: none">
<img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
</span>
</dd>
</dl>
</div>
Javascript
$("input[name='checkout_type']").click(function() {
$('#uniform-checkout_type_guest').text('Checkout as Guest');
$( "#uniform-checkout_type_guest" ).append( "<strong>---Hello</strong>" )
});
Here are three changes you can make so your jQuery is more consise:
Put label text in a spanelement
Give the span elements a common class - radio-label
Add a data attribute to your radio buttons - data-default-text
//wait for DOM ready event
$(function() {
//attach a change event listener to the radio buttons -- could give them a common class
$(':radio[name=checkout_type]').on('change', function() {
//reset labels
$('.radio-label').text( function() {
return $(this).closest('label').find(':radio').data('default-text');
});
//set new label per checked radio
$(this).closest('label').children('.radio-label')
.text( $(this).data('default-text') + ' --> Please Press Continue' );
})
//trigger change in case a radio is selected when page loads
.change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="PL40" style="line-height: 2;">
<dl>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_guest">
<span class="">
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');" data-default-text="Checkout as a guest">
</span>
</div>
<span class="radio-label">Checkout as a guest</span>
</label>
</dd>
<dd>
<label>
<div class="radio" id="uniform-checkout_type_register">
<span class="checked">
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing & Account Details');" data-default-text="Register an account">
</span>
</div>
<span class="radio-label">Register an account</span>
</label>
</dd>
<dd class="Submit mt10 mb10">
<input type="submit" id="CreateAccountButton" value="Continue" class="btn">
<span class="LoadingIndicator" style="display: none">
<img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
</span>
</dd>
</dl>
</div>
NOTE: This answer assumes you are using jQuery Mobile as you have that tag on your question.
Set up plain radio buttons and let jQM enhance them:
<dd>
<label>
<input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" />
Checkout as a guest
</label>
</dd>
<dd>
<label>
<input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" />
Register an account
</label>
</dd>
Then listen for the change event:
$("input[name='checkout_type']").on("change", function() {
$("input[name='checkout_type']").each(function(){
var text = '';
if ($(this).val() == "guest"){
text = "Checkout as a guest";
} else {
text = "Register an account";
}
if ($(this).is(":checked")) {
text += " --> Please Press continue";
}
$(this).closest(".ui-radio").find("label.ui-btn").text(text);
});
});
Loop through each radio button, see if it is checked and then set the text accordingly.
DEMO
UPDATE:
Using PeterKA's data attribute for the default text makes the code even nicer:
$("input[name='checkout_type']").on("change", function() {
$("input[name='checkout_type']").each(function(){
var text = $(this).data('default-text');
if ($(this).is(":checked")) {
text += " --> Please Press continue";
}
$(this).closest(".ui-radio").find("label.ui-btn").text(text);
});
}).change();
Updated DEMO
I am having trouble detecting a button click using Node.js, Bootstrap and Jade.
I have the following Jade code but I am not seeing the log from the onclick method and there is no change to the button. So the method never gets called.
extends layout
block content
.jumbotron
.container
h1= title
p Enter the url of the file to be sent
form#formInputURL(name="chooser",method="post",action="/chooser",)
input#inputURL(type="text", placeholder="insert url", name="chooseurl")
button#btnSubmit(type="submit") submit
p
.btn-group(data-toggle='buttons')
label.btn.btn-primary.active
input#option1(type='checkbox', autocomplete='off', checked='')
| Radio 1 (preselected)
|
label.btn.btn-primary
input#option2(type='checkbox', autocomplete='off')
| Radio 2
|
label.btn.btn-primary
input#option3(type='checkbox', autocomplete='off')
| Radio 3
script.
$('#option2').on('click', function () {
console.log("clicked")
$(this).button('toggle')
})
your code is working fine,
make sure you're clicking on the right element (checkbox).
have a look at this example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h1></h1>
<p>Enter the url of the file to be sent</p>
<form id="formInputURL" name="chooser" method="post" action="/chooser">
<input id="inputURL" type="text" placeholder="insert url" name="chooseurl" />
<button id="btnSubmit" type="submit">submit</button>
<p></p>
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-primary active">
<input id="option1" type="checkbox" autocomplete="off" checked="" /> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input id="option2" type="checkbox" autocomplete="off" /> Radio 2
</label>
<label class="btn btn-primary">
<input id="option3" type="checkbox" autocomplete="off" /> Radio 3
</label>
</div>
</form>
</div>
</div>
<script>
$('#option2').on('click', function() {
alert("clicked")
})
</script>