In this case, only primary dropdown will change, other dropdowns' values will change automatically according to it (so users wont be changing them) I'm trying to get the Option's TEXT value using PHP with $_POST. But i can only get it when i manually changed the other dropdown .
I have tried to use the trigger() method, but it fails to get the option text value. Any idea why the code fails to work. Thank you.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
}
<!-- try to get the option text value and pass it to input field-->
<!-- Then in the php code use $_POST[] to retrieve the input value-->
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.options[ddl.selectedIndex].text;
}
$("select").trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" type="hidden" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
PHP Code
$value =$_POST['make_text'];
Html element <select> onchange doesn't fire for programmatic changes, you need to fire it yourself with
$(".secondary").trigger("change");
or by Id
$("#Qualifications").trigger("change");
The problem is that your hidden <input> never had the value. if you remove the hidden it on your code you can check it.
So when you POSTED the values the value on make_text was empty string. So if you fire the trigger after the for loop then it will work.
function setDropDown() {
var index_name = document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
$("#Qualifications").trigger("change");
}
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
I have to say that I don't see any need to use a hidden input text to POST data to PHP because you can just post the value of the <select> and retrieve it in PHP like this $force = $_POST["ForceSelection"];.
Otherwise, if you want to continue what you started, you can change your setDropDown() function to this :
function setDropDown() {
#Get the selected value of the ForceSelection select :
var index_name = $('#ForceSelection').val();
#Change the value of the other secondary select :
$(".secondary").each(function( index ) {
$(this).val(index_name).change();//This will change the value and trigger the change event.
});
}
Related
I have a select option list for my form and I want to make sure the user has selected one of the options. My function logic implies that if the user keeps the dropdown on the default option, an alert will pop up prompting them to change it. However, no alert shows up whatsoever. What am I doing wrong?
function isOption(form) {
var type = form.getElementByID("pastimetype")
var selectedValue = type.options[type.selectedIndex].value;
if (selectedValue == "selectpastime") {
alert("Please select a pastime.")
return false
}
return true
}
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="selectpastime">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
you need to add the function to the submit event of the form.
you misspelled getElementById
no need to use form.getElementById
easier to get the value using select.value
use preventDefault instead of returning true/false
Also
function isOption(e) {
var sel = document.getElementById("pastimetype");
var selectedValue = sel.value;
if (selectedValue == "") { // I removed the value from the "Please select"
alert("Please select a pastime.")
e.preventDefault(); // stop submission
}
}
window.addEventListener("load",function() {
document.getElementById("form1").addEventListener("submit",isOption)
})
<form id="form1">
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
<input type="submit" />
</form>
<select class="form-control" id="prodname" name="pname" >
<option value="0" disabled="disabled" selected="selected">-- Select Product --</option>
#{
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id">#product.Product_Name</option>
<option hidden>#product.Quantity</option>
}
}
</select>
I want to select this option.
<option hidden>#product.Quantity</option>
I have tried this selector but could not get text.
var productunitprice = $("#prodname option").find("hidden").text();
You can use var text = $("option:selected",this).next().text() Example below.
$("#prodname").change(function() {
var text = $("option:selected",this).next().text()
console.log(text)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="prodname">
<option value="1">1</option>
<option hidden>1.1</option>
<option value="2">2</option>
<option hidden>2.2</option>
</select>
As an alternative to adding many unused and hidden options.
You can add the unit price to the relevant option directly using a data attribute for example data-unit-price.
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id" data-unit-price="#product.Quantity">#product.Product_Name</option>
}
Then simply read it from the selected option. In my humble opinion it is cleaner and doesn't use additional hidden option elements as storage for data belonging to other options.
$(document).ready(function() {
$("#prodname").change(function() {
var productunitprice = $("option:selected", this).data('unitPrice')
console.log(productunitprice)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="prodname" name="pname">
<option value="1" data-unit-price="5.25">product 45</option>
<option value="2" data-unit-price="12.99">product 94</option>
</select>
I have two dropdown right now. I want to when the user selects "NO" the other automatically selects "YES" and vice versa.
I'm assuming I use JS here to make this occur, but not sure where to start. Below is my dropdown html code. If someone could help me get started, it would be helpful.
Code:
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" name="cmicrophone">
<option value=" " selected = "selected"> </option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" name = "microphone">
<option value=" " selected="selected"> </option>
<option value="on" >ON</option>
<option value="off">OFF</option>
</select>
</div
You can assign a same class to each select element and bind change event listener.
$('.elem').on('change', function() {
if ($(this).val() == 'on') {
$('.elem').not(this).val('off');
} else {
$('.elem').not(this).val('on');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" class='elem' name="cmicrophone">
<option value="" selected = "selected"></option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" class='elem' name="microphone">
<option value="" selected = "selected"></option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
A good starting point might be listening for changes on one select, and when the change happens, selecting the other <select> and setting the right value
Here's a vanilla JS solution (no jquery required).
The idea here is to:
select both <select> elements and save them into variables to refer to later using document.querySelector
add input event listeners on both elements that call a function to handle the event
then use inside the function selectElement.selectedIndex to check the selected index of one element and use that to set the value of the other.
// select the `<select>` elements
const cmicrophone = document.querySelector('#cmicrophone');
const microphone = document.querySelector('#microphone');
// define function to handler the events
function inputHandler(thisSelect, otherSelect) {
if (thisSelect.selectedIndex == 1) {
otherSelect.selectedIndex = 2;
} else if (thisSelect.selectedIndex == 2) {
otherSelect.selectedIndex = 1;
} else {
thisSelect.selectedIndex = 0;
otherSelect.selectedIndex = 0;
}
}
// add event listeners that will 'fire' when the input of the <select> changes
cmicrophone.addEventListener('input', event => {
inputHandler(cmicrophone, microphone);
});
microphone.addEventListener('input', event => {
inputHandler(microphone, cmicrophone);
});
<div>Currently:
<select id="cmicrophone" name="cmicrophone">
<option value=" " selected = "selected"> </option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div>Microphone:
<select id="microphone" name="microphone">
<option value=" " selected="selected"> </option>
<option value="on" >ON</option>
<option value="off">OFF</option>
</select>
</div>
One more thing to add: You assigned the same value to multiple ids. You should only assign one unique id per element.
I'm new to Javascript and I'm trying to link two comboboxes ! In the first combo box I have the names of some states in greece and in the other the cities ! In the second I have all the cities in Greece and I want when I select a state from the first combo box only certain cities to appear on the second ! For example if I select Attikis , then I want to be shown in dropdown menu only Agias Paraskeuis and not Agias Varvaras and Agiou Dimitriou and vice versa !
My code is this :
<form action="?" method="get">
<div class="jtype">
<label for="nomos"> Νομός </label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi" onchange="cityChange()" >
<option value="attikis"> Attikis</option>
<option value="thessalonikis"> Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option value="agias varvaras"> Agias Varvara</option>
<option value="agias paraskeuis">Agias Paraskeuis</option>
<option value="agiou dimitriou"> Agiou Dimitriou</option>
</select>
</form>
</div>
</form>
Ana my JS :
<script type="text/javascript">
function changeCity(){
var nomos = document.getElementById("combo_nomoi");
if (nomos.value == "attikis"){
document.getElementById("attikis");
}
else{
document.getElementById("thessalonikis");
}
}
</script>
0The easiest way is to have a set of <select> menus, all but one of which has its display property set to none, with the one you want to display set to inline. Then in your onchange handler you run through your list of selects in a loop, setting the display property accordingly. Note inline event handlers like that are not very good practice; better to set them up via JavaScript in your page initialisation code. It misght look something like:
(HTML)
<select id="states">
<option value="0" selected="selected">State 1</option>
<option value="1">State 2</option>
...
</select>
<select id="cities_0" style="display: inline;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
<select id="cities_1" style="display: none;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
JavaScript
function change_city(evt)
{
var states=document.getElementById('states'),whichstate;
whichstate=states.options[state.selectedIndex].value;
for(var i=0;i<states.options.length;i++)
document.getElementById('cities_'+i).style.display=(i==whichstate ? 'inline' : 'none');
}
The following is a crude example(using only JS) to get this working:
http://jsfiddle.net/FMZ2H/
HTML
<form action="?" method="get">
<div class="jtype">
<label for="nomos">Νομός</label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi">
<option value="attikis">Attikis</option>
<option value="thessalonikis">Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option id="option1" value="agias varvaras">Agias Varvara</option>
<option id="option2" value="agias paraskeuis">Agias Paraskeuis</option>
<option id="option3" value="agiou dimitriou">Agiou Dimitriou</option>
</select>
</form>
Javascript:
document.getElementById("combo_nomoi").onchange = cityChange
function cityChange() {
var elem = document.getElementById("combo_nomoi");
if (elem.options[elem.selectedIndex].text == "Attikis") {
document.getElementById("option1").disabled = true;
document.getElementById("option2").disabled = false;
document.getElementById("option3").disabled = false;
}
if (elem.options[elem.selectedIndex].text == "Thessalonikis") {
document.getElementById("option1").disabled = false;
document.getElementById("option2").disabled = true;
document.getElementById("option3").disabled = true;
}
}
As shown above, you could disable the options you don't want your user to select. I'll leave it to you to do it an better way than selecting each option by their id.
this is my Form code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
what trying to achieve on submit my from redirects according to what values are selected from drop down
like if on painting is selected it should redirect to mysite/paintings or if only style (abstract) selected it would redirect to mysite/artwork?abstract or if both selected it should be like mysite/painting?abstract
how can i achieve this ?
i have tried using Jquery
<script type="text/javascript">
$(".catvalue").change(function(){
$catvalue = $(".catvalue option:selected").val();
alert ("$catvalue")
});
$(".styvalue").change(function(){
$styvalue = $(".styvalue option:selected").val();
});
if ($catvalue)
{
$redirecturl = "mysite/"+$jqcatvalue;
}
else if ($styvalue)
{
$redirecturl = "mysite/artwork?"+$styvalue;
}
else if ($styvalue && $styvalue )
{
$redirecturl = "mysite/"+$jqcatvalue="?"+$jqstyvalue;
}
is it right approach ?? how could i pass it to form action ?
edit : using magento so have to get base url by <?php echo Mage::getBaseUrl() ?>
I think what you are looking for here is almost the basic drop down navigation schema, very common implementation similar to this example.
<FORM name="f1">
<SELECT name="s1">
<OPTION SELECTED value="http://www.java2s.com">Java2s.com
<OPTION value="http://www.google.com">Google
<OPTION value="http://www.msn.com">msn
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.php.net">Php.net
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
</FORM>
Your select options should have the value of the page location to navigate and your onClick value simply calls window.location and uses the selected form data appropriately. No need to actual "submit" the form here to a form handler, use pure javascript like one of the commenters mentioned.
Using this example you could easily add the second portion of your select as a "?option" with an if statement. The onClick could be moved into a function instead of calling window.location directly to do the analysis.
UPDATE: Here is your code re-purposed with this method, it's quick and dirty, might have a couple errors I haven't had the time to check it yet.
<script>
function doSearch() {
var cat = document.search_mini_form.cat.options[document.search_mini_form.cat.selectedIndex].value;
var style = document.search_mini_form.style.options[document.search_mini_form.style.selectedIndex].value;
if ((cat) && (style)) {
alert(cat + "?" + style);
// send to page using variables
}
else if (cat) {
alert(cat);
// send to page using variables
}
else {
alert("nothing selected");
}
}
</script>
<form name="search_mini_form" id="search_mini_form">
<select name="cat" id="cat" class="input-text-select catvalue">
<option value="">All Mediums</option>
<option value="painting">Painting</option>
<option value="photo">Photography</option>
<option value="paper">Work on paper</option>
<option value="drawing">Drawing</option>
</select>
<select name="style" id="style" class="input-text-select styvalue">
<option value="">All Styles</option>
<option value="abstract">Abstract</option>
<option value="arch">Architectural</option>
</select>
<button class="button" title="Search" onClick="doSearch()">Search</button>
</form>
<form id="search_mini_form" action="">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
$(".input-text-select styvalue").change(function(){
$("search_mini_form").attr("action","mysite/");
var thisvalue = $(this).find("option:selected").text();
$("search_mini_form").attr("action","mysite/"+thisvalue );
});
Please try the following code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<input class="button" title="Search" type="submit" value="Search"/>
</form>
Check the javascript code
$('#search_mini_form').submit(function(){
var mediums=$('#cat option:selected').text();
var styles=$('#style option:selected').text();
if(styles!="AllStyles" && mediums =="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/artwork?'+styles+'=test');
}
else if(styles =="AllStyles" && mediums !="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/'+mediums);
}
else
{
$('#search_mini_form').attr("action",'mysite/'+mediums+'?'+styles+'=test');
}
});
http://jsfiddle.net/zzyEY/18/