i have two select dropdown one for selected rooms and select cancel booking..
<div>Confirm:</div>
<div>
<select id="status" name="status" class="form-control" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status" name="status" class="form-control" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
now i want the cancel booking by selecting cancel and submit, but probelm is there first select is required, i want required only in confirm , how i can do this
Try this:
Add select-room and booking-status class in 2 selectbox so that detect it event. because you have same id status in 2 selectbox. please set unique id for each of the element in html.
$(".booking-status").change(function(){ // use change event for select box of booking
if($(this).val() == "2") {
$(".select-room").removeAttr("required");
} else {
$(".select-room").attr("required","required");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Confirm:</div>
<div>
<select id="status1" name="status" class="form-control select-room" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status2" name="status" class="form-control booking-status" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
Please be sure that id should be unique in an HTML page. You seemed to have used same id's for these two select boxes.
<div>Confirm:</div>
<div>
<select id="room" name="room" class="form-control" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status" name="status" class="form-control" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
Now use the jQuery code:
$(function(){
$("#status").on("change", function(){
if($(this).val() == 2) {
$("#room").attr("required", false);
} else {
$("#room").attr("required", true);
}
});
});
Refer to this JS Fiddle: https://jsfiddle.net/gx0s27s9/
Related
In JavaScript, how would I get whatever option the user selects from the menu list? I'm trying to make it so that when the first option "default" is selected, it displays an error message.
How do i do this in Javascript without changing the HTML? Thanks in advance!
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
</form>
Get the value property of the <select> element.
document.querySelector("#submit").addEventListener("click", function() {
let choice = document.getElementById("menu").value;
if (choice == "default") {
alert("Please select an image");
} else {
console.log("Thank you for purchasing " + choice);
}
});
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
<br>
<button type="button" id="submit">Submit</button>
</form>
If select has a blank first value and the select is required, they cannot submit the form
const sel = document.getElementById("menu");
sel.options[0].value=""; // remove the value
sel.setAttribute("required","required");
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
<input type="submit">
</form>
My apologize, Is there a way to reset and clear all dropdown to the original state, when a user select the first dropdown. Hope I explain myself clearly. Thank you in advance.
HTML
<div class="form-group row">
<div class="col-sm-6">
<div id="#divAreYouGoingOnVacation">
<label asp-for="AreYouGoingOnVacation">Are You Going On Vacation</label>
<select asp-for="AreYouGoingOnVacation" class="form-control" id="AreYouGoingOnVacation"
required>
<option value="" selected>-- Please choose an option --</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div id="divWouldYouBeTakingASpouse">
<label asp-for="WouldYouBeTakingASpouse">Would You Be Taking A Spouse?</label>
<select asp-for="WouldYouBeTakingASpouse" class="form-control"
id="WouldYouBeTakingASpouse" required>
<option value="" selected>-- Please choose an option --</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br /><br />
</div>
</div>
jQuery
$("#AreYouGoingOnVacation").change(function () {
if ($(this).val() == "Yes") {
$("#divWouldYouBeTakingASpouse").show();
} else {
$("#divWouldYouBeTakingASpouse").hide();
}
});
$("#WouldYouBeTakingASpouse").change(function () {
if ($(this).val() == "Yes") {
$("#divHowLongAreYouWillingToWaitForFood").show();
} else {
$("#divHowLongAreYouWillingToWaitForFood").hide();
}
});
});
if I understand you correct you would reset the value for the second dropdown
if the first dropdown changed.
it would be like this
$('#AreYouGoingOnVacation').on('change', function(){
$('#WouldYouBeTakingASpouse').val('');
})
I have multiple selector on loop in php code
var new_acc = $("div[id^=new_acc]").hide();
for (var i = 1; i <= id; i++) {
$('#reason_change\\['+id+'\\]').change(function(e) {
$( "#reason_change\\["+id+"\\] ").show();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
if i click on change my selctor id = reason_change[2] i wanna show id="new_acc[2]" showing
Your JS doesn't need the loop and doesn't need to reference the individual element IDs, because you can select all of the select elements at once and bind a single change handler to them, then within the handler use this to reference the changing element and (DOM navigation method) .next() to get its associated div element:
$("select[id^=reason_change]").change(function() {
$(this).next().show();
});
If you wanted to make it so that the div is only shown when certain values are selected in the select element, and hidden otherwise, you can do something like this:
var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if(this.value === "2") { // show only if certain option is selected
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if($(this).val() === "2"){
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]">
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
I have a Symfony2 application, where I am adding selected boxes to the page dynamically using jQuery. I click add more and 2 select boxes are added with the following IDs:
#taskbundle_product_values_1_kind
#taskbundle_product_values_1_values
another click:
#taskbundle_product_values_2_kind
#taskbundle_product_values_2_values
so on and so forth.
Now I have a script that will bind to the change event of the kind select boxes and accordingly attach values to the values select box:
Now the problem is that I need some way to run the script in an iterative way that when I make changes to the first block, the effect should also only be on the first block. and Also I am looking for a way to detect changes on select boxes without multiple attribute.
$('body').on('change', '#select select', function() {
alert("Yahoo");
//console.log("Yahoo");
var val = $(this).val();
var $valSelect = $(this).next("select").html('');
$valSelect.append('<option value="value">Value</option>');
//alert(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/product/" method="post">
<div>
<label for="webmuch_taskbundle_product_name" class="required">Name</label>
<input type="text" id="webmuch_taskbundle_product_name" name="webmuch_taskbundle_product[name]" required="required" maxlength="255">
</div>
<div id="select">
<ul class="values">
<li>
<div id="webmuch_taskbundle_product_values_1">
<div>
<label for="webmuch_taskbundle_product_values_1_kind" class="required">Kind</label>
<select id="webmuch_taskbundle_product_values_1_kind" name="webmuch_taskbundle_product[values][1][kind]" required="required">
<option value="" selected="selected">-----Select Kind-----</option>
<option value="2">Size</option>
<option value="3">Shape</option>
<option value="4">Weight</option>
</select>
</div>
<div>
<label for="webmuch_taskbundle_product_values_1_values">Values</label>
<select id="webmuch_taskbundle_product_values_1_values" name="webmuch_taskbundle_product[values][1][values][]" multiple="multiple">
<option value="4">small</option>
<option value="5">medium</option>
<option value="6">large</option>
<option value="7">v-neck</option>
<option value="8">round-neck</option>
<option value="9">collor</option>
<option value="10">light</option>
<option value="11">middle</option>
<option value="12">heavy</option>
</select>
</div>
</div>
</li>
<li>
<div id="webmuch_taskbundle_product_values_2">
<div>
<label for="webmuch_taskbundle_product_values_2_kind" class="required">Kind</label>
<select id="webmuch_taskbundle_product_values_2_kind" name="webmuch_taskbundle_product[values][2][kind]" required="required">
<option value="" selected="selected">-----Select Kind-----</option>
<option value="2">Size</option>
<option value="3">Shape</option>
<option value="4">Weight</option>
</select>
</div>
<div>
<label for="webmuch_taskbundle_product_values_2_values">Values</label>
<select id="webmuch_taskbundle_product_values_2_values" name="webmuch_taskbundle_product[values][2][values][]" multiple="multiple">
<option value="4">small</option>
<option value="5">medium</option>
<option value="6">large</option>
<option value="7">v-neck</option>
<option value="8">round-neck</option>
<option value="9">collor</option>
<option value="10">light</option>
<option value="11">middle</option>
<option value="12">heavy</option>
</select>
</div>
</div>
</li>
<li>Add a value
</li>
</ul>
</div>
<div>
<label class="required">Values</label>
<div id="webmuch_taskbundle_product_values" data-prototype=""></div>
</div>
<div>
<button type="submit" id="webmuch_taskbundle_product_submit" name="webmuch_taskbundle_product[submit]">Create</button>
</div>
<input type="hidden" id="webmuch_taskbundle_product__token" name="webmuch_taskbundle_product[_token]" value="IRD3S7rLy-SQPAxyfMZNQ5UU05RR8qmVPXSrPe6Hnig">
</form>
.html() returns a string and not a jQuery object
You likely want
var $valSelect = $(this).next("select");
$valSelect.html('<option value="value">Value</option>');
or
var $valSelect = $(this).next("select");
$valSelect.empty().append('<option value="value">Value</option>');
here is my code ..i code a php page where i want, if we select scholarship status yes then some options show below like bank name , branch etc and if we select scholarship status no , then not show any option.
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
and if we select yes then show that options otherwise if we select no ..not show below options....
<div class="controls">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls">
<select id="" name="account number">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="<?php echo
set_value('accountnumber'); ?>" />
</div>
LIVE DEMO
$(document).ready(function() {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
});
$("select[name='Scholarship info']").change(function() {
var selectedVal = $(this).val();
if(selectedVal == 'yes') {
$("select[name='Bank name']").show();
$("select[name='Branch name']").show();
$("select[name='account number']").show();
$("input[name='acoountnumber']").show();
} else {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
}
});
If you add an extra class, withScholarship to the divs you want to show and hide, it is gets even easier. See this JSFiddle
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls withScholarship">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="121"/>
</div>
<script type="text/javascript">
$(".withScholarship").hide();
$("select[name='Scholarship info']").change(function() {
var flag = $(this).val() == "yes";
$(".withScholarship").toggle(flag);
})
</script>