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
});
});
Related
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>
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>
I can't seem to get this working with the onchange event. The alert triggers but I need the form submitting.
<script>
function validatelink3(returnpartid){
alert("test");
var theform = document.partsform;
theform.action="process_quickedited.asp?returnpartid="+returnpartid;
}
</script>
<form id="partsform" name="partsform" method="post" action="process_quickedited.asp?returnpartid=undefined">
<select name="STOCKACTION<%=objRst.fields("returnpartid")%>" id="STOCKACTION<%=objRst.fields ("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">
<option value="<%response.write objRst.fields("stockaction")%>" selected="selected"><%response.write objRst.fields("stockaction")%></option>
<option value="Return To Supplier">Return To Supplier</option>
<option value="Stock">Stock</option>
<option value="Scrap">Scrap</option>
<option value="Quarantine">Quarantine</option>
<option value="Test">Test</option>
</select>
If you want validatelink3() to submit the form, you can use the HTMLFormElement.submit method:
function validatelink3(returnpartid){
alert("test");
var theform = document.partsform;
theform.action="process_quickedited.asp?returnpartid="+returnpartid;
theform.submit();
}
I want menu to be in select control, like this
<form id="go">
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="">Select option</option>
<option onclick="openChangePassword()">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
This is changing url not a problem, but i have problem with some option because values are calling function, onclick="openChangePassword() and it is not working this way, any solution.
On some option i need url redirect on other i need function call?
As A. Wolff points out in his comment, you should add an event listener to the <select> element instead. Like this:
<form id="go">
<select name="URL">
<option value="">Select option</option>
<option value="openChangePassword">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
<script>
document.querySelector('select[name="URL"]').addEventListener('change', function(e){
var selection = this.options[this.selectedIndex].value;
if(selection == 'openChangePassword'){
openChangePassword();
} else {
window.location.href = selection;
}
});
</script>
Notice that I only use the value attribute of <option> and then decide what to do in the listener callback function.
I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO
On your demo, you've selected the default onLoad option in jsfiddle.
This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.
Change this option to no wrap(head) and it will work.
The code you have will work good on a page, assuming you have the <script> tags for the javascript.
Fiddle here
About your <button onclick="changeHiddenInput (objDropDown)">Try it</button>, objDropDown is not defined... and also add type="button" otherwise the default is a submit button.
I made some changes for the demo, so my code is:
html
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
javascript
var select;
window.onload = function () {
select = document.getElementById('dropdown');
console.log(select);
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}