Here I have 3 radio buttons in each li and one of the is having select dropdown. I need to validate this dropdown on button submit if user selected School radio button.But the classes are not being applied to the select dropdown.
$(".retail-proceed-purchase").click(function() {
var checkout_delivery_option = $(".cartcontinue .delivery_option").val();
if (checkout_delivery_option == 'your_school') {
var school = $('#school_list :selected').val();
if (school == 'your_school') {
$('.school_name').addClass("needsfilled");
$('.school_name').attr("placeholder", emptyerror);
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<input type="radio" id="school" name="delivery" value="your_school">
<label for="school">
<select class="school_name" id="school_list">
<option label="Send to school" value="your_school">Send to school</option>
<option value="your_school a">Send to school A</option>
<option value="your_school b">Send to school B</option>
</select>
</label>
<div class="check"></div>
</li>
Try this
$(".retail-proceed-purchase").click(function() {
school_element = $("[type='radio'][value='your_school']")
if(school_element.is(':checked')){
school_list_element = school_element.parents("li").find("select.school_name")
if(school_list_element.val() == "your_school"){
alert('Please choose school name from list')
school_list_element.addClass("needsfilled");
school_list_element.attr("placeholder", "error occured");
} else {
alert('form submitted')
}
}else{
alert('form submitted')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cartcontinue">
<li>
<input type="radio" id="school" name="delivery" value="your_school">
<label for="school">
<select class="school_name" id="school_list">
<option label="Send to school" value="your_school">Send to school</option>
<option value="your_school a">Send to school A</option>
<option value="your_school b">Send to school B</option>
</select>
</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="school" name="delivery" value="your_college">
Second radio button
<div class="check"></div>
</li>
</div>
<br><br>
<button class="retail-proceed-purchase">proceed</button>
Related
i have a checkout form . where there are 2 fields are used o give total amount of checkout . 1 field is in select tag and second is input type check box i want when i select and option and checkbox there values should be combine to give total.
$(function() {
$('.price-input').change(function() {
var price = 0;
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
})
$("select.price").change(function() {
var selectedPrice = $(this).children("option:selected").val();
document.getElementById("totalPrice").innerHTML = selectedPrice;
});
$(".totalPrice").text(price);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">#lang('Number of Words'):</label>
<select class="price" name="word_prices_id" required>
<option value="">#lang('Select Words')</option>
#foreach($wordPrice as $wPrice)
<option value="{{$wPrice->id}}">{{$wPrice->page_quantity}} words</option>
#endforeach
</select>
</div>
</div>
<input class="price-input" type="checkbox" name="upsell" value="12">
I added a class .ajx to both Select and input to handle changes made on both of their values in the same function !
$(document).on('change', '.ajx', function () {
if ($( "input.price-input:checked" ).is(":checked") && $("select.price").val()!==''){
var price = 0;
price += parseInt($("select.price").val(),10);
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
});
$(".totalPrice").empty().text(price);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Price:</label>
<select class="price ajx" name="word_prices_id" required id="exampleFormControlSelect1">
<option value="">Choose Price</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<input class="price-input ajx" type="checkbox" name="upsell" value="12">
<input class="price-input ajx" type="checkbox" name="upsell1" value="15">
<div class="totalPrice">
</div>
I want to make input element name="sellprice" enable if i select value sell option else input element will be disabled.
<select id="selling" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
Here is my Javascript Code, I have try this below code but it's not working.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "free"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
Please have a look I hope it's useful for you.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "sell"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
I want to make input element name="sellprice" enable
- that is not an input, it's a dropdown
If i select value sell option else input element will be disabled. - from your current explanation i understand that you want to disable the drop-down if the third option is selected
If the third option is selected, the drop-down will be disabled.
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#mounth').prop( "disabled", true );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't Want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
If you want to disable the input if the third option is selected, the following code will do it
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#textInput').prop( "disabled", true );
} else {
$('#textInput').prop( "disabled", false );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="" selected="selected">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 ">
</div>
<select id="mounth" onchange="myOnChangeFunction()" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
in js
<script>
function myOnChangeFunction() {
var val = document.getElementById("mounth").value;
if(val === "sell"){
document.getElementById('4').disabled = false;
}else{
document.getElementById('4').disabled = true;
}
}
</script>
I have a scenario with Chosen plugin and jQuery Validate plugin where I'm trying to show and hide fields according to radio button checked options. So as I'm trying to validate them too. Here's my code:
<form id="my-form" action="" method="post">
<input type="radio" name="active" id="1" value="1" onclick="test(1)" > A
<input type="radio" name="active" id="1" value="2" onclick="test(2)"> B
<input type="radio" name="active" id="1" value="3" onclick="test(3)"> C
<input type="radio" name="active" id="1" value="4" onclick="test(4)" checked> D
<div class='with-select' id="resident" style="display:none !important;">
<span>resident:</span>
<select class="chosen-select" required="true">
<option value="">[select option]</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
<option value="03">Value 3</option>
<option value="04">Value 4</option>
<option value="05">Value 5</option>
</select>
</div>
<div class='with-select' id="employee" style="display:none !important;">
<span>employee:</span>
<select class="chosen-select" name="selEmp" id="selEmp" required="true">
<option value="">[select option]</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
<option value="03">Value 3</option>
<option value="04">Value 4</option>
<option value="05">Value 5</option>
</select>
</div>
<div class='with-select' id="inputvis" style="display:none !important;">
<span>Visitor:</span>
<input type="text" name="txtVis" id="txtVis" required="true">
</div>
<div class='with-select' id="inputothr" >
<span>Other:</span>
<input type="text" name="txtOther" id="txtOther" required="true">
</div>
<div>
<input type="submit" />
</div>
</form>
<script>
// Chosen validation
$('.chosen-select').chosen();
$.validator.setDefaults({ ignore: ":hidden:not(select)" });
// validation of chosen on change
if ($("select.chosen-select").length > 0) {
$("select.chosen-select").each(function() {
if ($(this).attr('required') !== undefined) {
$(this).on("change", function() {
$(this).valid();
});
}
});
}
// validation
$('#my-form').validate({
errorPlacement: function (error, element) {
console.log("placement");
if (element.is("select.chosen-select")) {
console.log("placement for chosen");
// placement for chosen
element.next("div.chzn-container").append(error);
} else {
// standard placement
error.insertAfter(element);
}
}
});
window.test = function(a){
//alert(a);
switch(a){
case 1:
$("#resident").show();
$("#employee").hide();
$("#inputvis").hide();
$("#inputothr").hide();
break;
case 2:
$("#resident").hide();
$("#employee").show();
$("#inputvis").hide();
$("#inputothr").hide();
break;
case 3:
$("#resident").hide();
$("#employee").hide();
$("#inputvis").show();
$("#inputothr").hide();
break;
case 4:
$("#resident").hide();
$("#employee").hide();
$("#inputvis").hide();
$("#inputothr").show();
break;
}
}
</script>
My fiddle
The problem is that I have to select/enter values in every field to post the form. How can I post the form with checking one radio button for example, and then enter value in only that field (others) corresponding and skip validation of other select box or whatever left out?
I'm teaching myself JavaScript/jQuery. I have three pairs of checkboxes and dropdowns I want to validate:
code screencap
I want to validate that both parts of a pair are selected:
-- If a checkbox is checked, a value is also selected from the associated dropdown
-- Or, if a value is selected from a dropdown, the associated checkbox must be checked
I don't want to enable/disable the checkbox or dropdown during the process. I want to allow the user to check/select what they will, then check to see if both parts of a given pair are checked and selected on submit.
JSFiddle for the HTML: https://jsfiddle.net/6y6e0aod/5/
I spent a few hours on SO and googling in general, but couldn't find an example quite like this. Thanks ahead of time for any help.
<div>
<input type="checkbox">Vehicle 1
<select>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox">Vehicle 2
<select>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox">Vehicle 3
<select>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<br /><br />
<button>submit data</button>
You can add a empty option to the select so that we can force the user to select one, then in the click handler of the button we can see whether if there is any checked checkbox where the select is empty like
$('#submit').click(function(e) {
var $invalid = $('input:checkbox:checked + select:has([value=""]:selected)');
if ($invalid.length) {
e.preventDefault();
alert('Need to select a value for: ' + $invalid.map(function() {
return this.previousSibling.nodeValue.trim();
}).get().join(', '));
return;
}
//it is valid so do your stuff here
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox">Vehicle 1
<select>
<option value=""></option>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox">Vehicle 2
<select>
<option value=""></option>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox">Vehicle 3
<select>
<option value=""></option>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<br />
<br />
<button id="submit">submit data</button>
Do it like this, but first wrap all the form in a div and wrap texts like Vehicle 1 within a span. Then try the following code, click run to test
$('button').on('click', function() {
var errors = validateCouple($('#myForm'));
errors.length && alert(errors.join('\r\n'));
if (errors.length > 0) {
return false;
}
})
function validateCouple($el) {
var errors = [];
$el.find('div').each(function() {
var $div = $(this),
$cbx = $div.find('input:checkbox'),
$select = $div.find('select'),
$span = $div.find('span');
if ($cbx.prop('checked') && !$select.val()) {
errors.push("Please select a value for " + $span.html());
} else if ($select.val() && !$cbx.prop('checked')) {
errors.push("Please enable " + $span.html());
}
})
return errors;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myForm">
<div>
<input type="checkbox" checked="checked"><span>Vehicle 1</span>
<select>
<option></option>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox"><span>Vehicle 2</span>
<select>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox"><span>Vehicle 3</span>
<select>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<br />
<br />
<button>submit data</button>
</div>
This code can help for your scenario
$("input,select").change(function() {
if($(this).prop("tagName") == "SELECT" && $(this).val() != "SELECT") {
$(this).siblings('input').prop("checked",true)
}
else if($(this).prop("tagName") == "SELECT" && $(this).val() == "SELECT") {
$(this).siblings('input').prop("checked",false)
} else if(($(this).prop("tagName") == "INPUT") && $(this).prop("checked") == true) { $(this).siblings('select').children('option:eq(1)').prop("selected","selected");
} else if(($(this).prop("tagName") == "INPUT") && $(this).prop("checked") == false) { $(this).siblings('select').children('option:eq(0)').prop("selected","selected");
}
})
<div>
<input type="checkbox">Vehicle 1
<select>
<option>SELECT</option>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox">Vehicle 2
<select>
<option>SELECT</option>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<div>
<input type="checkbox">Vehicle 3
<select>
<option>SELECT</option>
<option>Car</option>
<option>Truck</option>
<option>Van</option>
<option>Motorcycle</option>
</select>
</div>
<br /><br />
<button>submit data</button>
</button>
I have a jQuery that when you click on a select option it will show the next one, but you have to click, you cant just use the down arrow or "tab" to the next option. I am wondering what options do I have to make this work?
Here is my jQuery:
function typefunction()
{
var itemTypes = jQuery('#type');
var select = this.value;
itemTypes.change(function () {
if ($(this).val() == '1-Hand') {
$('.1-Hand').show();
$('.2-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.1-Hand').hide();
if ($(this).val() == '2-Hand') {
$('.2-Hand').show();
$('.1-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.2-Hand').hide();
if ($(this).val() == 'Armor') {
$('.Armor').show();
$('.2-Hand').hide();
$('.off').hide();
$('.1-Hand').hide();
}
else $('.Armor').hide();
if ($(this).val() == 'Off-Hand') {
$('.Off').show();
$('.2-Hand').hide();
$('.1-Hand').hide();
$('.Armor').hide();
}
else $('.Off').hide();
if ($(this).val() == '1-Hand') {
$('.one-hand-dps').show();
$('.item-armor').hide();
$('.two-hand-dps').hide();
}
else $('.one-hand-dps').hide();
if ($(this).val() == '2-Hand') {
$('.two-hand-dps').show();
$('.one-hand-dps').hide();
$('.item-armor').hide();
}
else $('.two-hand-dps').hide();
if ($(this).val() == 'Armor') {
$('.item-armor').show();
$('.one-hand-dps').hide();
$('.two-hand-dps').hide();
}
else $('.item-armor').hide();
});
}
And the HTML:
<div class="input-group item">
<span class="input-group-addon">Type</span>
<select id="type" name="type" class="form-control" onclick="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
</div>
<div class="input-group item">
<span class="1-Hand input-group-addon" style="display: none;">Sub-Type</span>
<select class="1-Hand form-control" name="sub[1]" style="display: none;">
<option value="All 1-Hand Item Types">All 1-Hand Item Types</option>
<option>Axe</option>
<option>Ceremonial Knife</option>
<option>Hand Crossbow</option>
<option>Dagger</option>
<option>Fist Weapon</option>
<option>Mace</option>
<option>Mighty Weapon</option>
<option>Spear</option>
<option>Sword</option>
<option>Wand</option>
</select>
</div>
<div class="input-group">
<span class="2-Hand input-group-addon" style="display: none; ">Sub-Type</span>
<select class="2-Hand form-control" name="sub[2]" style="display: none;">
<option>All 2-Hand Item Types</option>
<option>Two-Handed Axe</option>
<option>Bow</option>
<option>Diabo</option>
<option>Crossbow</option>
<option>Two-Handed Mace</option>
<option>Two-Handed Mighty Weapon</option>
<option>Polearm</option>
<option>Staff</option>
<option>Two-Handed Sword</option>
</select>
</div>
<div class="input-group">
<span class="Armor input-group-addon" style="display: none;">Sub-Type</span>
<select class="Armor form-control" name="sub[3]" style="display:none;">
<option>All Armor Item Types</option>
<option>Amulet</option>
<option>Belt</option>
<option>Boots</option>
<option>Bracers</option>
<option>Chest Armor</option>
<option>Cloak</option>
<option>Gloves</option>
<option>Helm</option>
<option>Pants</option>
<option>Mighty Belt</option>
<option>Ring</option>
<option>Shoulders</option>
<option>Spirit Stone</option>
<option>Voodoo Mask</option>
<option>Wizard Hat</option>
</select>
</div>
<div class="input-group">
<span class="Off input-group-addon" style="display: none;">Sub-Type</span>
<select class="Off form-control" name="sub[4]" style="display:none;">
<option>All Off-Hand Item Types</option>
<option>Mojo</option>
<option>Source</option>
<option>Quiver</option>
<option>Shield</option>
</select>
</div>
If you use onclick attribute in the select, then it stands to a reason that it requires a mouse click in order to work. Try using onchange for instance and keyboard usage should also work.
<select id="type" name="type" class="form-control" onchange="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
Also see this question, for more details about how to handle both clicks and keys immediately.