enter image description hereI want to pass the option value to another page. For this purpose I have some options. Besides there is an "other" option where an input field is hidden. My javascript code works i.e; selection of "others" appear the desired text input. But while passing the value (submitting) the "other" option (input field) pass the value but not the regular option.
function CheckColors(val) {
var element = document.getElementById('color_change');
if (val == 'pick a color' || val == 'others')
element.style.display = 'block';
else
element.style.display = 'none';
}
<form action="action_dropdown.php" method="post">
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color_change" style='display:none;' />
<input value="calculation" type="submit">
</form>
$myVariable = $_POST["color"];
echo $myVariable;
I expect my output would be red/ blue/ (while selecting any of them).
Again I want my output would be yellow (when I choose "ohters" and input "yellow".)
Being a novice I Hope your cordial cooperation.
You need to rename your input element by any other as below:
<form action="action_dropdown.php" method="post">
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="othercolor" id="color_change" style='display:none;' />
<input value="calculation" type="submit">
</form>
And when your form is submitted, you need to check whether othercolor is set or not. Thus you can get color value like below:
$selectedColor = ($_POST['color'] == "others" ) ? $_POST['othercolor']: $_POST['color'];
Thus, you will be able to access both select and input values. Hope it helps you!
Related
It's my first contact with js so please don't hate me
I have something like this:
function Zmiana(isChecked) {
document.getElementById('test').type = 'text';
}
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select> <br>
</div>
But it doesn't work
You won't be changing the select into a textbox. Instead, you'll have both a select and a textbox. The checkbox will simply determine which is shown.
Also, your select should include a first choice that is not considered valid so that you don't get a submitted value that the user didn't choose.
.hidden { display:none; }
<input type="checkbox" id="check">Check to enter text directly
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="">--- Choose ---</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select>
<input id="data" class="hidden">
</div>
<script>
let text = document.getElementById('data');
let check = document.getElementById("check");
let select = document.getElementById("test");
// You must set up your function to handle the
// click event of the checkbox
check.addEventListener("click", Zmiana);
function Zmiana(){
// Add or remvoe the hidden class based on
// whether it's already in use
select.classList.toggle("hidden");
text.classList.toggle("hidden");
}
</script>
I have a login form where users can choose their country from a drop-down, and I would like to show the 'If other specify' option only when the user selects 'other' from the dropdown.
I have found many other answers to this question, but they are using jQuery, and I would like to use pure JavaScript.
Here is my HTML code.
<form>
Username/Name:<br><input type="text"><br>
Country:<br>
<select id="country" name="country">
<option value="us">United States </option>
<option value="uk">United Kingdom </option>
<option value="ca">Canada </option>
<option value="othr">Other </option>
</select><br>
If other specify:<br><input type="text"><br>
Password:<br><input type="text"><br>
<input type="submit" value="Log In">
</form>
Thanks!
Fix the typo of othr to other.
Wrap the stuff you want to show/hide in an element with ID of "other-container", then
function handleCountryChange(event) {
var display = event.target.value == 'other' ? 'inline' : 'none';
otherContainer.style.display = display;
}
var otherContainer = document.getElementById('other-container');
var countrySelect = document.getElementById('country');
countrySelect.addEventListener('change', handleCountryChange)
i'm using the code below to display an input field when "other" option is selected.
It works perfectly when "other" is selected.
However, i am unable to post to database when any other option apart from "other" is selected.
The problem is the text input negates the select options.
Any idea how to go about this?
There's a question that attempts to solve the problem but i don't have enough reputation to comment Stackoverflow.com/questions/9634783/how-to-activate-a-textbox-if-i-select-an-other-option-in-drop-down-box
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
the problem is, that you have multiple form elements with the same name. This might work in some cases, but generally is a bad practice. Name them differently and let the code that processes the input handle the data.
If you really need an input with the name 'color' that holds the current color, here is a solution that should work:
function checkColors(val) {
var element = document.getElementById('color');
if (val == 'pick a color' || val == 'others') {
element.style.display = 'block';
} else {
element.value = val; //make sure element always has the right value;
element.style.display = 'none';
}
}
<html>
<head>
</head>
<body>
<select name="colorSelect" onchange='checkColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;' />
</body>
</html>
I'm trying to make a simple HTML page that allows you to select the option either copy, lower case or upper case, which respectively copy into text2, change the text to uppercase or to lowercase, and select the choice on click.
Could anyone take a look at my code?
<script type='text/javascript'>
function f(){
if(document.getElementById("copy"))
document.getElementById("modifiedForm").value = document.getElementById("ogForm").value;
if(document.getElementById("upper"))
document.getElementById("modifiedForm").value = document.getElementById("ogForm").value.toUpperCase();
if(document.getElementById("lower"))
document.getElementById("modifiedForm").value = document.getElementById("ogForm").value.toLowerCase();
}
</script>
<form name='form1' >
<select size='3' name='sel1' > <!-- onchange='f();'> -->
<option id="copy"> copy </option>
<option id="upper"> upper case </option>
<option id="lower"> lower case </option>
</select>
<input type='text1' id='ogForm' placeholder="type here" >
<input type='text2' id='modifiedForm'>
<input type='button' id='confirm' value='confirm' onclick='f()'>
</form>
You are trying to check which was the element that was selected as an option of the select element.
You need the value of the select which was selected as an option.
HTML
<select size='3' name='sel1' id="mySelect">
<option value="copy"> copy </option>
<option value="upper"> upper case </option>
<option value="lower"> lower case </option>
JS
function f() {
var selectedValue = document.getElementById("mySelect").value;
if(selectedValue === 'copy') {
....
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.