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>');
Related
I'm kind of new to JavaScript and all and I'm having trouble with how to add multiple conditions in an if statement. I wanted the if statement to do: "if 'this' and 'this' and 'this' is selected (I made a select tag so it is a drop down selection) then send the user to another page. I've search solutions but they're too complex for me right now as I'm still a beginner in JavaScript. Sorry if it is not explained well this is my first time making a question in this site. Thank You! Here's my code for the html if needed.
<h1>Clothes Picker</h1>
<form action="clothespicker.html" id="clothespicker">
<fieldset>
<label for="place">Where are you going today?</label>
<div>
<select name="place" id="place">
<option value="Someone's House">Someone's House</option>
<option value="Outdoors">Outdoors</option>
<option value="Shopping">Shopping</option>
<option value="Local Shopping">Local Shopping</option>
<option value="Somewhere Special">Somewhere Special</option>
</select>
</div>
<label for="weather">What's the weather?</label>
<div>
<select name="weather" id="weather">
<option value="Sunny" id="Sunny">Sunny</option>
<option value="Cold">Cold</option>
<option value="Rainy">Rainy</option>
<option value="Cloudy">Cloudy</option>
</select>
</div>
<label for="look">How do you want to look?</label>
<div>
<select name="look" id="look">
<option value="Casual" id="Casual">Casual</option>
<option value="Formal">Formal</option>
<option value="I don't know">I don't know</option>
</select>
</div>
<input type="submit" value="Pick My Clothes!" id="button"></div>
</fieldset>
</form>
I made one condition for you take a look. My condition matched when you select "outdoors" from place, "Sunny" from weather and "casual" from look. If you have multiple conditions then you can else if after if condition
<h1>Clothes Picker</h1>
<form action="clothespicker.html" id="clothespicker">
<fieldset>
<label for="place">Where are you going today?</label>
<div>
<select name="place" id="place">
<option value="Someone's House">Someone's House</option>
<option value="Outdoors">Outdoors</option>
<option value="Shopping">Shopping</option>
<option value="Local Shopping">Local Shopping</option>
<option value="Somewhere Special">Somewhere Special</option>
</select>
</div>
<label for="weather">What's the weather?</label>
<div>
<select name="weather" id="weather">
<option value="Sunny" id="Sunny">Sunny</option>
<option value="Cold">Cold</option>
<option value="Rainy">Rainy</option>
<option value="Cloudy">Cloudy</option>
</select>
</div>
<label for="look">How do you want to look?</label>
<div>
<select name="look" id="look">
<option value="Casual" id="Casual">Casual</option>
<option value="Formal">Formal</option>
<option value="I don't know">I don't know</option>
</select>
</div>
<input type="submit" onclick="myFunction()" value="Pick My Clothes!" id="button">
</fieldset>
<p id="demo"></p>
</form>
<script>
function myFunction() {
var place = document.getElementById("place").value;
var weather = document.getElementById("weather").value;
var look = document.getElementById("look").value;
if(place == "Outdoors" && weather == "Sunny" && look == "Casual")
{
//your condition here
document.getElementById("demo").innerHTML = "Condition Matched";
}
}
</script>
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>
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/
Before I explain my problem, below is my simple code
<body>
<div>
<input type="radio" name="salary"/>Per Year
<select>
<option value="0">All</option>
<option value="40000">$40,000.00+</option>
<option value="50000">$50,000.00+</option>
</select>
</div>
<div>
<input type="radio" name="salary"/>Per Hour
<select>
<option value="0">All</option>
<option value="20">$20.00+</option>
<option value="25">$25.00+</option>
</select>
</div
</body>
What am I trying to achieve is when user selects radio button with value "Per Year".I want to disable the other radio button[with value "Per Hour"].So he can't select the values from other drop-down list.
How can I do this in AngularJS?Is their any directive that could solve this??
http://jsbin.com/boqexu/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div>
<input type="radio" name="salary" ng-model="type" value="year"/>Per Year
<select ng-model="year.value" ng-disabled="type =='hour'">
<option value="0">All</option>
<option value="40000">$40,000.00+</option>
<option value="50000">$50,000.00+</option>
</select>
</div>
<div>
<input type="radio" name="salary" ng-model="type" value="hour"/>Per Hour
<select ng-disabled="type =='year'" ng-model="hour.value">
<option value="0">All</option>
<option value="20">$20.00+</option>
<option value="25">$25.00+</option>
</select>
</div>
</div>
</body>
i have an old classic asp application that need to update. i need to add 2 dropdowns and the second one needs to be populated based on the first (ex. country and states). how do you do that using javascript?
UPDATE: Based on your comment below, I've updated my response to include code that will do what you're wanting. You can use the optgroup element to filter options based on what country is selected without having to use Ajax.
First way: (optgroup filtering)
Working example on jsFiddle.
HTML:
<select id="C_Country" name="C_Country" aria-required="true" class="required">
<option value="">-- Please Select --</option>
<option value="USA">United States</option>
<option value="CA">Canada</option>
</select>
<p>
<label for="C_State_Prov">State or Province <span title="required">*</span>
</label>
</p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
<option value="" selected="">-- Please Select --</option>
<optgroup label="United States">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</optgroup>
<optgroup label="Canada">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
</optgroup>
</select>
JavaScript:
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup');
state_province.hide();
$('#C_Country').change(function () {
state_province.hide();
$("#C_State_Prov optgroup[label='" + $(this).find(':selected').html() + "']")
.children()
.andSelf()
.show();
});
Second way: (Ajax)
Working example on jsFiddle.
Here's a rough idea of how to accomplish this. The URL defined in the jQuery should point to a location where the server-side code will generate the HTML needed based on the country the user selected (instead of being defined as a variable in the JavaScript).
HTML:
<form action="#">
<div>
<label for="country">Country:</label>
</div>
<div>
<select name="country" id="country">
<option value="">Please select</option>
<option value="us">United States</option>
</select>
</div>
<div id="stateContainer" class="hidden">
<div>
<label for="state">State</label>
</div>
<div>
<select id="state" name="state"></select>
</div>
</div>
<div>
<input type="submit" id="submit" name="submit" value="Submit">
</div>
</form>
CSS:
.hidden {
display: none;
}
JavaScript:
var $country = $("#country"),
$stateContainer = $("#stateContainer"),
$state = $("#state"),
url = "http://jsfiddle.net/htmled/KZ4jd/",
html = '<option value="al">Alabama</option><option value="ar">Arkansas</option>',
countryVal;
$country.change(function () {
countryVal = $country.val();
$stateContainer.show();
$state.html(html).load(loadUrl);
});