Im sure there have been postings submitted that cover material similar to this, However, I couldn't find any answers from the ones I found.
I have a form with a drop down menu and a submit button. What I am try to do is to have the menu object display the value they picked after they hit submit, example user clicks July and hits submit, the value still displays July.
What is happening is once they hit the submit button the value goes back to "January". My code is as follows.
<form id="NewForm" name="NewForm" method="get" action="index.asp">
<p>
<select name="Step1" id="Step1">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</p>
<input type="submit" name="button" id="button" value="Submit" />
</form>
<p></p>
Am I missing something here? This should be really simple, but I somehow seen to be missing something very elementary. Thank you for your help
<select name="Step1" id="Step1">
<option <% if Step1 = "01" then %> selected <% End if %> value="01">January</option>
<option <% if Step1 = "02" then %> selected <% End if %> value="02">February</option>
</select>
etc.
add "selected" to the selected option:
http://www.w3schools.com/tags/att_option_selected.asp
In this case, March would appear as the selected option, when the dropdown is closed.
<select name="Step1" id="Step1">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04" selected>April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
You can use add ASP code to each one of the tag which will determine which one had been selected.
Related
It seems the javascript function is never executed. Can anyone tell me why?
<form>
<select type="text" name="month" id="month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<button type="submit" id="jobmonth">View all job requests in this month</button>
</form>
<script type="text/javascript">
$('#jobmonth').click(function() {
console.log("work");
var month = $('#month').val();
console.log(month);
}
</script>
None of the console.log work.
PS- Sorry for such a silly question. I'm just a beginner in JS.
Buttons of type submit are intended to submit the form to whatever it's action is. In this case, it would just refresh the page.
Instead, just change the type to button.
<button type="button" id="jobmonth">View all job requests in this month</button>
This will not submit the page and you will see your logged results.
Try giving an ID to your tag, then using the submit event instead. This means the console.log will be triggered when the form is submitted rather than the button being clicked, but the result should be the same:
<form id="myform">
<select type="text" name="month" id="month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<button type="submit" id="jobmonth">View all job requests in this month</button>
</form>
<script type="text/javascript">
$('#myform').on('submit', function() {
console.log("work");
var month = $('#month').val();
console.log(month);
}
</script>
You can also use the "submit" shorthand: https://api.jquery.com/submit/
<select id=workTypeSelection>
<option id="-1">-Select a Work Type-</option>
<option id="1">Common</option>
<option id="3">Computer Maintenance</option>
<option id="5">Facility Maintenance</option>
<option id="19">Furniture Move</option>
<option id="85">Global Work Type</option>
<option id="24">Lease Request</option>
<option id="21">Move Responsibility</option>
<option id="20">Purchase Request</option>
<option id="16">SLA Maintenance</option>
<option id="60">Test 123</option>
<option id="72">TEST J</option>
<option id="73">test jj</option>
<option id="65">TEST JOS</option>
</select>
How to Select "Test 123" as Currently selected option in The Dropdown list using jquery on page Ready using option id-> 60.
Try any from below,
$('select option[id="<your_value>"]').attr("selected",true)
$('#selectTagId option[id="<your_value>"]').attr("selected",true)
$('.selectTagClass option[id="<your_value>"]').attr("selected",true)
Hello Guys i want to change state based upon the country and the city according to state.
<label>Country:</label><br/>
<select onchange="getval(this)">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="" id="">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
<select name="" id="">
<option value="">Select city</option>
<option value="orissa">Nal</option>
<option value="orissa">Mir</option>
<option value="Telangan">Hyd</option>
<option value="Telangan">Vija</option>
<option value="america">KRK</option>
<option value="america">MRK</option>
</select>
How to change state based on country. and afterthat change city based on state.
Thanks in advance.
Just i want look like this below link.
http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/
What you need is easy to make, you only have to play with Ajax and onChange event in yours dropdowns:
<select id="idCountries" onchange="updateStatesByCountry()">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select id="idStates" onchange="updateCitiesByState()">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
...
In your JS code add the needed functions:
function updateStatesByCountry(){
console.log($('#idCountries').val());
//Here add Ajax logic to load a new dropdown with all states of the current country
//Your AJAX call should be something like this
$.get('/getStatesByCountry?country='+ $('#idCountries option:selected').val(), function(data){
$('#idStates').empty();
$('#idStates').append(data);
});
});
}
//Same logic for the next dropdowns.
And I highly recommend you read about AJAX before you write this code.
I want to link categories to their own pages. so I mean when I click to 'Hotels' it should open the page which is Category/Hotels
this is the current code
<select name="category">
<option value="">Any Category</option>
<option value="clubs">Clubs</option></a>
<option value="hotels">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>
lets say I want to link like that
<option value="www.website.com/event_cat/clubs/> Clubs </option>
<option value="www.website.com/event_cat/hotels/> Hotels </option>
.. and so on
but when I do, its directing to this page:
www.website.com/events/?time=&category=%2Fevent_cat%2Fclubs%2F&location=
JSfiddle Demo
<html>
<body>
<form name="blah_blah">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select Site</option>
<option value="http://www.yahoo.com">Yahoo!!!</option>
<option value="http://www.gmail.com">Gmail</option>
<option value="http://www.google.co.in">Google</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>
You just have to use full domain path with http or https(if its a secure server)
<option value="http://www.website.com/event_cat/clubs/> Clubs </option>
<option value="http://www.website.com/event_cat/hotels/> Hotels </option>
Since you have the first option already selected, in the first option, keep the value empty and add the onchange, as per the code below:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Any Category</option>
<option value="www.website.com/event_cat/clubs/">Clubs</option>
<option value="www.website.com/event_cat/hotels/">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>
<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.roomForm.roomMenu.options[this.roomForm.roomMenu.selectedIndex].value">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>
Could someone point out why this piece of code is not working? It should redirect to another page when the drop down menu is changed.
Your code has extra ")" and this itself is select box. jsfiddle
<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.options[this.selectedIndex].value;">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>