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/
Related
I am working on a site with an html form, and the form requires the user to submit their age.
The user's age will be used for various purposes through-out the website's program.
However, if the user is under the age of 18, they are not eligible to participate in the program anyway.
Therefore... if the user selects 'Under 18' in the form, and then tries to click the 'continue' (submit) button, I need the form to automatically redirect the user to another URL.
I have tried several php, and a few javascript solutions, but so far, no dice.
And help or advice would be greatly appreciated.
I have included the form page which asks for the user's age.
Form Page
<!DOCTYPE html>
<head>
<title>Form Page</title>
</head>
<body>
<form action="nextPage.php" method="POST">
Please select your age:<br><br>
<select id="userAge" name="userAge" class="ageField" required>
<option value="0" selected="selected" disabled="disabled">Age</option>
<option value="Under 18">Under 18</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60+">60+</option>
</select>
<br><br><br>
<input type="submit" class="continueButton" value="Continue">
</form>
</div>
</body>
</html>
I would do this in Javascript Before its submitted to the PHP page
function detectChange(ageData) {
console.log(ageData.value)
if (ageData.value == 10)
{
console.log("Kick user")
window.location.href = "http://www.w3schools.com";
}
}
<select id="osDemo" onchange="detectChange(this)">
<option value="None">None</option>
<option value="10">under18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
I am making a piano website that makes random melodies based on their scales. But when I choose a certain key and/or scale and/or mode(different kind of scale), the dropdown doesn't update in JS.
JS Code:
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
console.log(specifiedNote, majorMinor, mode);
}, 4000);
HTML Code:
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>
If you look at the console, you'll see the value is the same over 10
times, but the values in the drop downs are different. How do I fix this?
You must read the element again in the the interval function :
setInterval(()=>{
specifiedNote = document.querySelector('#keys').value;
majorMinor = document.querySelector('#types').value;
mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);
You must be reading the value inside the timeout.
Or another method you can do is, make a change event handler for the selects instead of the setTimeout, so the functions work when the select boxes are changed, not periodically.
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>
Get Values Inside your set interval code like below.
setInterval(()=>{
let specifiedNote = document.querySelector('#keys').value;
let majorMinor = document.querySelector('#types').value;
let mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
},
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>
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.
Am a bit new to javascript. This question might sound a bit too silly, but I'm not able to figure it out why the following doesn't work in IE and works in firefox..
<select multiple="multiple">
<option value="tx" onClick="alert('tx');">Texas</option>
<option value="ak" onClick="alert('ak');">Alaska</option>
<option value="ca" onClick="alert('ca');">California</option>
<option value="ws" onClick="alert('ws');">Washington</option>
<option value="tn" onClick="alert('tn');">Tennessee</option>
</select>
The alert doesn't come up in IE (I'm using IE8). But it works in firefox!!!!!
According to w3schools, the option tag does support an onclick attribute. I tried with with bottom of the barrel IE6 and this doesn't seem to be the case.
The simplest way to do this would be:
<select multiple="multiple" onchange="alert(this.value);">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>
This is not exactly what you are after, but should be pretty close.
EDITS
It would just take more work:
<select multiple="multiple" onchange="
switch (this.value){
case 'tx': funcOne(); break;
case 'ak': funcTwo(); break;
etc...
}
">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>
At this point it would be appropriate to wrap the onchange into a function in a js file instead of embedding it in the html.
I would use the onchange event:
<select multiple="multiple" onchange="alert(this.options[this.selectedIndex].value)">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>
Although Daniel Mendel's solution is perfectly valid.
This is because IE doesn't register a click event when you select a new option in a select field (guessing). Instead, you should use the onBlur event (and put the code into your javascript instead) like so (assuming jQuery):
<script type='text/javascript'>
$(document).ready(function(){
$('select#state').bind('blur', function(){
alert(this.val());
});
});
</script>
<select id='state' multiple="multiple">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>