Develop Reference

How can I get id of span element inside select element?

My html form has the content below:
<form name="profile">
...
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
...
In my javascript, I'm trying to grab the form's ID to show a message telling the user to choose something in the dropdownlist if they haven't chosen anything and pressed the submit button. The problem is that the javascript block returns undefined.
//validate the profile form
function validate(e){
e.preventDefault();
var valid=true;
if(document.profile.province.value == ""){
document.getElementById('provinceWarning').innerHTML="*Please choose a province*";
valid=false;
}
if(valid){
alert("Thank You!");
}
return valid;
};

You can't have a span tag inside a select tag. Browser while rendering this HTML would have stripped it off.
See the demo below (check in your browser's dev tools that browser is stripping off span tag while rendering)
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
You need to put the span tag outside the select tag.

Try this, it comes down and reset once u select and submit.
function submit(){
if(!document.getElementById("province").value){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
document.getElementById("provinceWarning").innerHTML=""
valid=true;
window.alert("thank you")
}
}
<form name="profile">
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
<span id="provinceWarning" class="alert"></span>
</form>
<button id="btnSubmit" onclick="submit();">Submit</button>

Problems:
1- You can not define span in select option then move it out of your select
2- To check select value you should getElementById("province") and then check the value
3- Testable code can be as below(You can change it as you want):
function func()
{
var ddl = document.getElementById("province");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == ""){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
alert("Thank You!");
}
}
<form name="profile">
<div>
<span id="provinceWarning" class="alert"></span>
</div>
<div>
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
</div>
</form>
<button id="btnSubmit" onclick="func();">Click Me</button>

Required attribute not working for select tag by onclick button

I am trying to alert a value when a user clicks the submit button. I gave the "required" attribute to both select tag but it is not working.
I want to alert a value when a user submits a button. Can anyone tell where i went wrong?
Code:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
var ORSZ = OR + SZ;
alert(ORSZ);
}
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox" required>
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">

Here you go with a solution https://jsfiddle.net/1mydje82/1/
$('select').on('change', function(){
var required = false;
$('select').each(function(){
if($(this).val() === '')
required = true;
});
$('input[value="Submit"]').attr('disabled', required);
});
$('input[value="Submit"]').click(function(){
var OR = $("#request").val();
var SZ = $("#sites").val();
var ORSZ = OR + SZ;
alert(ORSZ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" value="Submit">
</form>
I've used jQuery. Initially your Submit button will be disabled.
Once you select both the drodown with values then only Submit button will be enabled.
Hope this will help you.

You can't rely on required attribute of <select>(because it's only work when form submits normally, and not supported in Opera anyhow).
You can make it happening like below:-
Example:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
if(OR =='' || SZ ==''){
alert('Please select values from both select-box'); return false;
}else{
var ORSZ = OR + SZ;
alert(ORSZ);
}
}
<form>
<select id="request" class="dropdownbox">
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
</form>

Dropdown Select Form, Go to URL On SUBMIT

Is there a simple way to have a user go to a URL from a dropdown list on SUBMIT, rather than onChange.
I have this code:
<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
Tried changing onChange to onSubmit, but it doesn't work.

Try this instead.
Also: You'll want to keep your JavaScript separated from your HTML. Do not use onchange or similar HTML attributes. While it's technically not wrong, it's bad from a code quality/maintainability perspective.
var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");
goBtn.onclick = function() {
window.location = menu.value;
}
<select id="menu">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
<input type="button" id="goBtn" value="GO!">
Does this work for you?

You can use the onsubmit event on the <form> element, but you'll want to preventDefault on the event, and for the onsubmit event you need to use a return:
<form name="cityselect" onsubmit="return redirectTo(this)">
<select name="menu" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
</form>
<script>
function redirectTo(elem) {
event.preventDefault();
top.location.href = elem.firstElementChild.options[elem.firstElementChild.selectedIndex].value
}
</script>

Form submit onChange event does'nt work with JQuery function

I want to do a form submit on a onChange event of a selectbox. The submit action should trigger a JQuery function. When I use a submit button instead of a onChange event function it works fine. However when I use the onChange event I can't trigger the function.
MY form:
<form id="zoekSchool" method="get">
<div class="form-group">
<label for="thema" class="desktop small">School</label>
<select class="form-control" name="school" id="school" onchange="this.form.submit()">
<option value="" disabled selected>Search</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
...
</select>
</div>
</form>
My Javascript/Jquery:
function initMap(x) {
$('#zoekSchool').submit(function() { // bind function to submit event of form
var schoolID = $('#school').val();
...
return false; //prevent default action
});
}
<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"
async defer></script>
where ... stands for 'some code'.
Maybe important: I'm working with the googleMaps Api.
What could be the problem here?

you can try like this..
onchange="$(this).parents('form').submit()"
or
onchange="$('#zoekSchool').submit()"
instead of onchange="this.form.submit()"
<form id="zoekSchool" method="get">
<div class="form-group">
<label for="thema" class="desktop small">School</label>
<select class="form-control" name="school" id="school" onchange="$('#zoekSchool').submit()">
<option value="" disabled selected>Search</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
...
</select>
</div>
</form>

Create Event handler in document Ready, use the following code
$(document).ready(function () {
$('#school').change(function () { //Event handler for drop down
var form = $(this).closest('form');
$(form).submit();// this fires submit event of form
});
});

How to disable the reset upon submitting a form

How can I maintain the value of the form when I submit it?
<select name="Year">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<input type="submit" value="Filter"/>

If you use jquery (you tagged it): Submit your form via $.post to your php script. Something like
$("form").submit(function() {
$.post("URL/TO/FORM.PHP", $(this).serializeArray(), function(data) {
console.log(data);
});
return false;
});
So you submit your form to your script but the site don't refresh because you set the return to false. You can get the url to your script from your action="" like this
$("form").attr("action")

if you are using php then:
<select name="Year">
<option value="2013" <?php if($_REQUEST['Year']=='2013'){echo "selected"}?>>2013</option>
<option value="2014" <?php if($_REQUEST['Year']=='2014'){echo "selected"}?>>2014</option>
<option value="2015" <?php if($_REQUEST['Year']=='2015'){echo "selected"}?>>2015</option>
</select>
<input type="submit" value="Filter"/>