I have theese three dropdown lists filled with values:
<form action="search.php" method="post">
<p>Width</p>
<select class="form-control" name="width">
<option value="" selected="selected">Any width</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option value="175">175</option>
</select>
<p>Height</p>
<select class="form-control" name="height">
<option value="" selected="selected">Any height</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
</select>
<p>Diameter</p>
<select class="form-control" name="diameter">
<option value="" selected="selected">Any diameter</option>
<option value="10">R10</option>
<option value="12">R12</option>
<option value="13">R13</option>
<option value="14">R14</option>
<option value="15">R15</option>
</select>
<input name="search" type="submit" value="Search">
</form>
What i try to achieve is to redirect the user to a custom url ( like example.com/tires/size-185-65-15 ) and there make the actual query and display the results.
Not the query is the real problem, but the redirection based on their choices.
The redirection should be based on the values they select from width, height and diameter ( mandatory all 3 values togheter).
Is there any way to achive this thing? I think maybe at javascript or jquery?
Add an id to all of your "Select" tags and then use Javascript to get their values, build a custom url and redirect to it.
<script>
function submitQuery() {
var width = document.getElementById("width").value;
var height = document.getElementById("height").value;
var diameter = document.getElementById("diameter").value;
var url = "example.com/tires/size-" + width + "-" + height + "-" + diameter;
window.location = url;
}
</script>
<form action="search.php" method="post">
<p>Width</p>
<select class="form-control" name="width" id="width">
<option value="0" selected="selected">Any width</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option value="175">175</option>
</select>
<p>Height</p>
<select class="form-control" name="height" id="height">
<option value="0" selected="selected">Any height</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
</select>
<p>Diameter</p>
<select class="form-control" name="diameter" id="diameter">
<option value="0" selected="selected">Any diameter</option>
<option value="10">R10</option>
<option value="12">R12</option>
<option value="13">R13</option>
<option value="14">R14</option>
<option value="15">R15</option>
</select>
<input name="search" onclick="submitQuery()" value="Search">
</form>
A possible solution:
1) Change the submit button to a link and give it an id:
Search
2) Make a Javascript function that constructs the link:
function constructLink() {
var link = "example.com/tires/size-";
link += document.getElementsByName("width")[0].value;
link += "-" + document.getElementsByName("height")[0].value;
link += "-" + document.getElementsByName("diameter")[0].value;
document.getElementById("submitLink").href = link;
}
3) Add this JS function to the change event of all three select boxes:
<select class="form-control" name="width" onchange="constructLink();">
That should be it!
Related
I am new to javascript and cannot find an easy-to-understand answer. I would like a certain value to get passed to a hidden field when a user selects a certain option from 2 different select dropdown options. They can only select one or the other on the actual form.
For example if a user selects a US state or a Canadian province, I want to pass that value to hidden text field using javascript.
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" value="">
</p>
</form>
Following code will insert the selected state and country into the text field. You can make the field hidden it will work.
var stateSelector = document.getElementById('usstatevalue');
var countrySelector = document.getElementById('provcanvalue');
var hiddenSelector = document.getElementById('stateprovnew');
stateSelector.addEventListener('change', function() {
hiddenSelector.value = stateSelector.value;
});
countrySelector.addEventListener('change', function() {
hiddenSelector.value += ' ' + stateSelector.value;
});
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" id="stateprovnew" value="">
</p>
</form>
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 am using php and want my selected selectbox to become visible based on which one I select. My html code is
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
And my php code so far is
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
}
else if ($selection == 2) {
}
else {
}
}
?>
so my question is what would the javascript look like inside of the if/else statement to make the selectboxes visible?
Why not do it client side using javascript?
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections" id="ddlSelections" onChange="changeSelect()"> <!-- call function on change -->
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" id="ddlTickets"> <!-- visible by default -->
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none" id="ddlSales">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
javascript
<script>
function changeSelect()
{
document.getElementById('ddlTickets').style.display = "none";
document.getElementById('ddlProjects').style.display = "none";
document.getElementById('ddlSales').style.display = "none";
switch(document.getElementById('ddlSelections').value) // Get selected one
{
case "1":
document.getElementById('ddlTickets').style.display = "block";
break;
case "2":
document.getElementById('ddlProjects').style.display = "block";
break;
case "3":
document.getElementById('ddlSales').style.display = "block";
break;
}
}
</script>
If you must use PHP
<form name="frmIndex" action="index.php" method="post">
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" selected>Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
*/
}
else if ($selection == 2) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" selected>Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
*/
}
else {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" >Projects</option>
<option value="3" selected>Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
*/
}
}
?>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
A slightly shorter example using jQuery's .change() which is more unobtrusive than the on* attributes like onclick, onchange, etc.
replace all the style="display:none" with a class="subDDL" and then simply style with .subDDL{display: none;}. I did leave one style="display:initial" for the default option.
then add an id to your sublists that correspond to the values in ddlSelections
now you only need one submit button
$("[name='ddlSelections']").change(function(){
$(".subDDL").hide();
$('#' + $("[name='ddlSelections'] option:selected").val()).show();
});
.subDDL{
display: none;
}
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<select id="1" name="ddlTickets" class="subDDL" style="display:initial">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select id="2" name="ddlProjects" class="subDDL">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select id="3" name="ddlSales" class="subDDL">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" value="Submit" name="btnChoose" />
</form>
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);
});
i have the following part of code of a dropdown menu
<p>
<label for='Select a Category '>Select a Category<font color="red"><strong>*</strong></font>: </label></p>
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
</p>
i want add in drop down menu an option with value: "custom" that when i select this option appear just below a field blank as input text where i can add my personalized text so i can insert personalized category
it's possible?
maybe you mean something like this: http://jsbin.com/ubihuw/edit#javascript,html
so in php or something you can check then the "my_own_text" field ... dont know what you will exactly do ;)
js:
$('.input').change(function()
{
if($(this).attr('value') == "0") {
$('#choose_own_text').append('<input type="text" id="my_own_text" name="my_own_text" value="Please type in .." />');
} else {
$('#choose_own_text').empty();
}
});
your code ...
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
<div id="choose_own_text"></div>
</p>