I am trying to keep the value selected by the user in the following Dropdown menu:
<form method="post">
<p><label for="ProjectManager">Project Manager:</label>
<select name="ProjectManager">
<option value="" selected>Select...</option>
<option selected=#(Request["ProjectManager"] == "One") value="One">One</option>
<option selected=#(Request["ProjectManager"] == "Two") value="Two">Two</option>
<option selected=#(Request["ProjectManager"] == "Three") value="Three">Three</option>
<option selected=#(Request["ProjectManager"] == "Four") value="Four">Four</option>
<option selected=#(Request["ProjectManager"] == "Five") value="Five">Five</option>
<option selected=#(Request["ProjectManager"] == "Six") value="Six">Six</option>
</select>
</p>
<p><input type="submit" name="ButtonConfirm" value="Confirm" /></p>
</form>
Just for your reference, here is what happens to the database in the background:
#{
var ProjectManager = "";
if(IsPost){
ProjectManager = Request.Form["ProjectManager"];
db = Database.Open("ControlPoints");
var InsertCommand = "INSERT INTO ControlPointName ([Project_Manager]) VALUES(#0)";
db.Execute(InsertCommand, ProjectManager);
}
}
My code works fine, it just won't remember the value selected. As you can see, I have been trying to implement selected=#(Request["ProjectManager"] == "One") with no luck so far. What am I doing wrong here?
Thanks in advance.
UPDATE:
In the following link http://forums.asp.net/t/1899268.aspx?Remembering+Dropdown+Box+selection+in+WebMatrix a very similar issue is solved. The difference is that the form method is 'get' rather than 'post' as in my case.
Your first option has selected hard-coded into it. Remove that.
I figured it out. It is the strangest thing, in one of my comments I had the following <!--The user's input.....--> After I removed the ' from the word user's, everything worked as needed.
Related
I have a drop-down list which POSTs to express and then redirects to same page.
Now, I want the one valid option to be selected before submitting, hence I added required property in <select> tag.
But, I also want a value to be Selected in the list when page renders
If first time render, then first option
If after submitting, the submitted option to be selected by default
Here is the skeleton code
<select required data-style="btn-info" name="selectpicker">
<optgroup label="Select Map">
<option name="table1" value="Station">Station</option>
<option name="table2" value="Station2">Station2</option>
</optgroup>
</select>
and the things I tried
<option value="" selected disabled>Select station</option>
<option name="table1" value="Station" selected>Station</option>
but none of them fulfills my requirements.
if you are using javascript for handling the form just add event.preventDefault() in your onsubmit function so when you submit it won't revert back to default
The problems were solved by
<form action="any" method="any" onSubmit="return fieldCheck();">
<select required id="collec" data-style="btn-info" name="selectpicker">
<option value="Select Station" selected disabled hidden>Select City</option>
<option name="table1" value="Vice City">Vice City</option>
<option name="table2" value="Delhi City">Delhi City</option>
and script
function fieldCheck() {
var collec = document.querySelector('#collec');
if(collec.value != "Select Station") {
return true;
}
else {
alert("Select a city first!!");
return false;
}
}
I need a Dropdown list with others option which allows us to add value manually if the user's field is not in a dropdown list. is it possible?
Thanks in advance,
Balaji
Even though it is a duplicated question, let me give you a direct method using plain JavaScript and HTML. Check and let me know
function myFunction() {
var x = document.getElementById("mySelect").value;
var input = document.getElementById("others-text");
if (x === "others") {
input.style.display = "block";
} else {
input.style.display = "none";
}
}
<div>
<select name="select" id="mySelect" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="others">Others</option>
</select>
<input
style="display: none"
type="text"
name=""
id="others-text"
placeholder="User Input"
/>
</div>
The following form works exactly as expected, and provides a dropdown list to select an option from:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<option value="captainAmerica">Captain America</option>
<option value="ironMan">Iron Man</option>
<option value="blackWidow">Black Widow</option>
<option value="thor">Thor</option>
</select>
What I am trying to do is this:
<select id="f-heroes" class="c-form-select__dropdown">
<option value=""><?echo getElement('hero');?></option>
</select>
This gets the 'hero' list but displays it below and out of the option window, and leaves me no option to select a value.
I may be missing something really simple here, but can't seem to get this to work, any help much appreciated.
It looks like your mixing PHP and JavaScript here. From my understanding of your question, you're wanting to create a loop that keeps creating 's for each of your superheroes.
If that's correct, you could use PHP and do something like the below:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<?php
$superHeroes = array('Captain America','Iron Man','Black Widow','Thor');
$i = 0;
while ($i < count($superHeroes)) {
$name = $superHeroes[$i];
echo "<option value='".$name."'>".$name."</option>";
$i++;
}?>
</select>
I have to make a form for a contact page.
I want that people put their names, email, phone number etc. etc. in different input's. The input's are all tagged with REQUIRED.
If I try to submit the form and I forget to fill in for example a name, it will give a notification that you didn't fill in your name.
That's good.
However, my dropdown menu is also required even if I don't select a value from the dropdown, I will not get a notification.
<div class="form-group">
<select class="selectpicker" name="dropdownmenu" id="selectpicker" required>
<option selected="selected" value="first_value" disabled>Kies je onderwerp</option>
<option value="dropdown_advertentie">Advertentie</option>
<option value="dropdown_suggestie">Suggestie</option>
<option value="dropdown_opmerking">Opmerking</option>
</select>
So the first value, 'Kies je onderwerp' is selected when you open the page. But when that is still selected and you click the submit button, I need a notification that you didn't select a value.
Your value for the first option has to be empty for a required check.
<select required>
<option value="">Kies je onderwerp</option>
<option value="dropdown_advertentie">Advertentie</option>
<option value="dropdown_suggestie">Suggestie</option>
<option value="dropdown_opmerking">Opmerking</option>
</select>
you can use a js validation as bellow
function validateForm() {
var x = document.forms["myForm"]["field_name"].value;
if (x == ""|| x=="first_value") {
alert("Name must be filled out");
return false;
}
}
If you are not ready to leave it empty, you can validate it by using below script. Check below snippet for reference.
$('#btnSubmit').click(function() {
if ($('#selectpicker :selected').text() == 'Kies je onderwerp') {
alert('please select a valid value');
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form><select class="selectpicker" name="dropdownmenu" id="selectpicker" required>
<option selected="selected" value="first_value" disabled>Kies je onderwerp</option>
<option value="dropdown_advertentie">Advertentie</option>
<option value="dropdown_suggestie">Suggestie</option>
<option value="dropdown_opmerking">Opmerking</option>
</select>
<input type="submit" id="btnSubmit" value="submit">
</form>
At the moment I am using this:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
it redirect me on the location inside of the option value. But it doesn't work as expected .. mean that if I click on the first option of the select, then onChange action not running. I was thinking about javascript, but I think you'll have some better suggestions guys. So how can I make it work if I click on each option it'll redirect me to the it's value?
Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.
Here's an example:
https://jsfiddle.net/bL5sq/
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://google.com">Google</option>
<option value="https://yahoo.com">Yahoo</option>
</select>
I'd strongly suggest moving away from inline JavaScript, to something like the following:
function redirect(goto){
var conf = confirm("Are you sure you want to go elswhere?");
if (conf && goto != '') {
window.location = goto;
}
}
var selectEl = document.getElementById('redirectSelect');
selectEl.onchange = function(){
var goto = this.value;
redirect(goto);
};
JS Fiddle demo (404 linkrot victim).
JS Fiddle demo via Wayback Machine.
Forked JS Fiddle for current users.
In the mark-up in the JS Fiddle the first option has no value assigned, so clicking it shouldn't trigger the function to do anything, and since it's the default value clicking the select and then selecting that first default option won't trigger the change event anyway.
Update:
The latest example's (2017-08-09) redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains, as well as both domains requiring 'sameorigin' for framed content. - Albert
to make it as globally reuse function using jquery
HTML
<select class="select_location">
<option value="http://localhost.com/app/page1.html">Page 1</option>
<option value="http://localhost.com/app/page2.html">Page 2</option>
<option value="http://localhost.com/app/page3.html">Page 3</option>
</select>
Javascript using jquery
$('.select_location').on('change', function(){
window.location = $(this).val();
});
now you will able to reuse this function by adding .select_location class to any Select element class
For someone who doesn't want to use inline JS.
<select data-select-name>
<option value="">Select...</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[data-select-name]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
window.location.href = this.options[this.selectedIndex].value;
}
</script>
This can be archived by adding code on the onchange event of the select control.
For Example:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value=""></option>
<option value="http://google.com">Google</option>
<option value="http://gmail.com">Gmail</option>
<option value="http://youtube.com">Youtube</option>
</select>
{{-- dynamic select/dropdown --}}
<select class="form-control m-bot15" name="district_id"
onchange ="location = this.options[this.selectedIndex].value;"
>
<option value="">--Select--</option>
<option value="?">All</option>
#foreach($location as $district)
<option value="?district_id={{ $district->district_id }}" >
{{ $district->district }}
</option>
#endforeach
</select>
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://reactjs.org/">React Js</option>
<option value="https://angularjs.org/">Angular Js</option>
</select>