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);
});
Related
I have this ASP.NET WebForm that has a group of select tags with the option to add more (dynamically).
My question is: how would I validate this type of form? My first attempt was to create a JQuery code that disables the button that submits the data, until all the dropdown fields have been filled in. The problem is the code that I'm using doesn't seem to fire the function that enables the button.
This here is the code for the WebForm, this content placeholder is inside the Form tag on the masterpage:
<asp:Content ID="PageContentBody" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div class="container mt-3 bg-white form-group fieldGroup">
<div class="input-group">
<select name="selectType" class="form-control">
<option value="0">-- SELECT TYPE --</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectDesc" class="form-control">
<option value="0">-- SELECT DESCRIPTION --</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectPPE" class="form-control">
<option value="0">-- SELECT PPE #--</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectAsset" class="form-control">
<option value="0">-- SELECT ASSET #--</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectSerial" class="form-control">
<option value="0">-- SELECT SERIAL #--</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> +
</div>
</div>
</div>
<asp:Button ID="Button1" ClientIDMode="Static" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="Button1_Click" />
</asp:Content>
Here is the part of the code that I use to dynamically generate fields, basically it's a hidden div. My JQuery "copies" this to generate new row of fields to the form and potentially the source of the problem:
<asp:Content ContentPlaceHolderID="BodyScripts" runat="server">
<!-- copy of input fields group -->
<div class="container mt-3 bg-white form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<select name="selectType" class="form-control">
<option value="0">-- SELECT TYPE --</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectDesc" class="form-control">
<option value="0">-- SELECT DESCRIPTION --</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectPPE" class="form-control">
<option value="0">-- SELECT PPE #--</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectAsset" class="form-control">
<option value="0">-- SELECT ASSET #--</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<select name="selectSerial" class="form-control">
<option value="0">-- SELECT SERIAL #--</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
</select>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> -
</div>
</div>
</div>
Here is the code that I use to copy/generate the additional select fields, and also probably another source of my problem, so I'm putting this here:
$(document).ready(function(){
//group add limit
var maxGroup = 10;
var ctr = 0
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
And finally, the validation method that I'm using. This disables the button IF each select tag in the page has a value of 0. Otherwise if each select tag has a value other than 0, then enable the button:
function buttonState(){
$("select").each(function(){
$('#Button1').attr('disabled', 'disabled');
if($(this).val() == "0" ) return false;
$('#Button1').attr('disabled', '');
})
}
$(function(){
$('#Button1').attr('disabled', 'disabled');
$('select').change(buttonState);
})
What am I doing wrong? Is there any better approach for this?
I have the following HTML code to select Salesman, State, and Office Number. What I want to be able to do is select the Salesman and have it auto select the State and Office Number for that person:
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore">Tammy Sizemore</option>
<option value="Ron Jeffries">Ron Jeffries</option>
<option value="Tony Clark">Tony Clark</option>
<option value="Mark Sengala">Mark Sengala</option>
<option value="Judy Donato">Judy Donato</option>
<option value="Mary Porter">Mary Porter</option>
</select>
<label for="state">State: </label>
<select id="state" name="state">
<option value="" selected="selected"></option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Maine">Maine</option>
<option value="Ohio">Ohio</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="West Virginia">West Virginia</option>
</select>
<label for="number">Office Number: </label>
<select id="number" name="number">
<option value="" selected="selected"></option>
<option value="A219">A219</option>
<option value="A256">A256</option>
<option value="G019">G019</option>
<option value="G222">G222</option>
<option value="Q161">Q161</option>
<option value="Q341">Q341</option>
</select>
The problem I'm having is that it's a fairly complex decision process as to who belongs where. For example:
If I select 'Tammy Sizemore', I know she's in Kansas in office A256.
If I select 'Ron Jeffries', I know he's in Maine at office Q161.
I'm somewhat familiar with implementing jQuery or JavaScript. The page is being rendered by PHP. If it can be done in one of those, I'm fine. I just don't know how to implement this.
Is there an efficient way to do this?
Here's the work-around I came up with (in case someone else finds this handy):
When setting up the drop-down list, I combined the three elements (Name, State, and Office Number) into a single value but only showed the Salesman name.
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore,Kansas,A256">Tammy Sizemore</option>
<option value="Ron Jeffries,Maine,Q161">Ron Jeffries</option>
<option value="Tony Clark,West Virginia,G019">Tony Clark</option>
<option value="Mark Sengala,Ohio,Q341">Mark Sengala</option>
<option value="Judy Donato,Iowa,A219">Judy Donato</option>
<option value="Mary Porter,Pennsylvania,G222">Mary Porter</option>
</select>
Then, when I needed to split them back into separate fields, I used explode.
$sr_agent = $_POST['salesman'];
$sa = explode(',', $sr_agent);
$agent_name = $sa[0];
$agent_state = $sa[1];
$agent_office = $sa[2];
I'd recommend not using the value attribute as you did in your work-around solution, as you're basically using the value attribute for something other than its intended use. You can use custom data attributes that are perfect for this...
// cache the state & office elements so we don't have to search the DOM every time
var $state = $("#state");
var $office = $("#office");
$("#salesman").on("change", function() {
// find the selected option
var $selected = $(this).find("option:selected");
// get the associated state and office...
var state = $selected.data("state");
var office = $selected.data("office");
// set the dropdowns
$state.val(state);
$office.val(office);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore" data-state="Kansas" data-office="A256">Tammy Sizemore</option>
<option value="Ron Jeffries" data-state="Maine" data-office="Q161">Ron Jeffries</option>
<option value="Tony Clark" data-state="West Virginia" data-office="G019">Tony Clark</option>
<option value="Mark Sengala" data-state="Ohio" data-office="Q341">Mark Sengala</option>
<option value="Judy Donato" data-state="Iowa" data-office="A219">Judy Donato</option>
<option value="Mary Porter" data-state="Pennsylvania" data-office="G222">Mary Porter</option>
</select>
<label for="state">State: </label>
<select id="state" name="state">
<option value="" selected="selected"></option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Maine">Maine</option>
<option value="Ohio">Ohio</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="West Virginia">West Virginia</option>
</select>
<label for="office">Office Number: </label>
<select id="office" name="office">
<option value="" selected="selected"></option>
<option value="A219">A219</option>
<option value="A256">A256</option>
<option value="G019">G019</option>
<option value="G222">G222</option>
<option value="Q161">Q161</option>
<option value="Q341">Q341</option>
</select>
I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.
in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here
So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
I have a form that is like the following:
<label>
scale a<input type="radio" name="sellorbuy" value="Yes" id="rdYes" />
</label>
<label class="leftspace">
scale b<input type="radio" name="sellorbuy" value="No" id="rdNo" />
</label>
<p class="searchpg">Price</p>
<fieldset id="sell">
<select id="pricemin" name="minsell" class="form-control">
<option value="50000">Min Price</option>
<option value="100000">£100,000</option>
<option value="200000" >£200,000</option>
<option value="300000" >£300,000</option>
<option value="400000" >£400,000</option>
</select>
<select id="pricemax" name="maxsell" class="form-control">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
</select>
</fieldset>
<fieldset id="let" style="display:none;">
<select id="lpricemin" name="minbuy" class="form-control">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
</select>
<select id="lpricemax" name="maxbuy" class="form-control">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
</select>
</fieldset>
This switches fieldsets by using the following:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
The trouble I am having is the search form that is submitted and displayed on the next page so we carry over the contents of the form. If someone has selected the 'Scale B' then that is already toggled on the next page but the fieldset has not changed? Is there any way to change to the jquery to detect which checkbox is toggled and change the fieldset accordingly or even modify the switch to make it work better?
Created a fiddle to show how the form works https://jsfiddle.net/v3waaa20/1/
Some slight changes and triggering change on load can do the trick.
$("input[name='sellorbuy']").change(function () {
value = $("input[name='sellorbuy']:checked").val();
$("#sell").toggle(value == "Yes");
$("#let").toggle(value == "No");
}).change();