Changing form action based on select value - with JavaScript - javascript

I have a form that I wish to change the action of, depending on what value a user selects in a drop down box.
The example code below shows each option value, I want to change the form action to whatever option value is chosen on a button press, how can I do this with JavaScript?
<form name ="form1" action="VariableFormAction" method ="post" target="_blank">
<select name="formchoice">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>

In order to do this you need to specify an onSubmit JavaScript event handler on the form that retrieves the value of the select list and updates the form action.
You can do this using the following code.
//Add onSubmit() event handler to form to call JavaScript method when the form is submitted.
<form name ="form1" onSubmit="actionOnSubmit()" method ="post" target="_blank">
<select id="formchoice" name="formchoice">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>
<script>
function actionOnSubmit()
{
//Get the select select list and store in a variable
var e = document.getElementById("formchoice");
//Get the selected value of the select list
var formaction = e.options[e.selectedIndex].value;
//Update the form action
document.form1.action = formaction;
}
</script>
Note, for this to work you will need to make sure the select list has an id as you are using the document.getElementById[] JavaScript method to retrieve the value of the control.
You could also call the JavaScript in the OnChange() event of the control. The issue with this is that it implies that the value has changed before the form is submitted. If the user simply left the default select list value it is possible that the OnChange() event would never fire.

You can try like following.
function selectChanged(ctrl) {
var val = ctrl.value;
var frm = document.getElementById('form1');
frm.action = val;
}
<form id="form1" name="form1" action="/formaction1" method="post" target="_blank">
<select name="formchoice" onchange="selectChanged(this)">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>

Use on change attribute.
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>

Related

Check string in select option

I have created with javascript and I get a result of a string.I get that result on my html code
<div id="results"></div>
Next,I want when I select for example Red to check if it is the the same thing (string), the select option - > Red with the string of this code
<div id="results"></div>
I was trying to do it but I failed.It is not working not even sure ,if I press the submit button I will send the string.
<div id="results"></div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="submit" value="results"/>
It appears that you want to check whether the selected option is equal to the text value of the div #results. You can achieve this effect like so:
$(document).ready(function(){
var select = $("select");
$("input[type=\"button\"]").click(function(){
var text = select.find(":selected").text();
if(text==$("#results").text()){
$("#results").html(text+" is equal!");
}else{
$("#results").html(text+" is not equal :(");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results">Red</div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="button" value="results"/>
</form>
A form is going to be Sending data somewhere, it would be best to remove the form, leaving the select and button elements. In the button add the code onclick='myFunction() ; when the button is clicked it will run the javascript function called myFunction(). Also you need to give the select a Id. I'm using selectInput
<script>myFunction() { document.getElementById('result').innerHTML = document.getElementById('selectInput').value;} </script>
Now when ever the button is pressed it will set the content of the div equal to the value entity in the selected select box option
You lack an action attribute.
<form method="post" action="path/to/file">
<select name="select">
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input type="submit" value="Get Results" />
</form>
Use a function, and a regular button. No form is needed.
<button onclick='func()'></button>
const func = () => {...}

Go to URL from input dropdown

I have a dropdown on my website, where users can select different site-names.
Next to the dropdown I have a submit button.
I would like users to select a site-name, from the dropdown, and when they click on submit they should be redirected to a specific url, with the dropdown value appended.
<form id="form" method="get">
<option value="1">Website Name 1</option>
<option value="2">Website Name 2</option>
<option value="3">Website Name 3</option>
<button class="btn" type="submit">GO!</button>
</form>
Example case:
Users selects "Website Name 2"
User clicks "GO!" button
Site opens a new window with target "https://example.com/site/2"
There are many ways to do this. However you can try below way.
In the dropdown value add a complete url which you want to redirect to instead of just value and on button click redirect to that site.
Make sure button type is not 'submit' and attach a click event with a javascript funtion.
In the javascript function read the selected value from the dropdown and use
window.location.href
to redirect to that site.
function redirect() {
var value = document.getElementById("site").value;
window.location.href = value;
return ;
}
<form id="form" >
<select name="site" id ="site">
<option value="https://Google.com/1">Google</option>
<option value="https://stackoverflow.com/2">StackOverflow</option>
</select>
<button class="btn" type="button" onclick="redirect()">GO!</button>
</form>
There are multiple ways to accomplish this functionality. I prefer having minimal HTML and handling everything in the JavaScript. We will be using an EventListener to accomplish this in my example.
Change your HTML to this:
<form id="form" method="get">
<select id="selection">
<option value="1">Website Name 1</option>
<option value="2">Website Name 2</option>
<option value="3">Website Name 3</option>
</select>
<button class="btn" type="submit">GO!</button>
</form>
Then you can use simple JavaScript to accomplish what you want:
let url = "https://example.com/site/";
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let selection = document.getElementById('selection').value;
console.log(url + selection);
window.location.href = url + selection;
});
This answer assumes that all URLs follow the https://example.com/site/1 format. If not, you can change the value in the option tags to be the actual URL and remove the URL prefix from the JavaScript.

Submit select option and current page url parameter

I have webpage like: index.php/voting/?name=someName which has form with select options:
<form id="voting-form" method="GET" action="index.php/vote/">
<select name="company" id="company">
<option value="company1">company 1</option>
<option value="company2">company 2</option>
<option value="company3">company 3</option>
</select>
<input type="submit" value="Submit">
</form>
I need to submit this form with select value and url name parameter from current page. For example user chose company1: index.php/vote/?company=company1&name=someName
I tried to modify form action like this:
var url_string = window.location.href
var url = new URL(url_string);
var name = url.searchParams.get("name");
document.getElementById('voting-form').action = "index.php/vote/?name=" + name +"&";
But when I submit button, I am redirected to index.php/vote/?company=company1. so name param is missing
You can add to form input with type hidden to add this to url params
<input type="hidden" name="name" value"someName" id="nameInput">
To set value of input you can use your JS with a bit modification
var url = new URL(window.location.href),
name = url.searchParams.get("name");
document.getElementById('nameInput').value = name;
or PHP like in #Globus example
The form post doesn't care about your javascript, and does what it pleases.
You should create a hidden field in your form where you store the name in your GET parameter, so that the form submission also adds this parameter to the URL.
Change your code to:
<form id="voting-form" method="GET" action="index.php/vote/">
<select name="company" id="company">
<option value="company1">company 1</option>
<option value="company2">company 2</option>
<option value="company3">company 3</option>
</select>
<input name="name" value=<?=$_GET['name']?> type="hidden" />
<input type="submit" value="Submit">
</form>

how do i redirect based on selection in jsp?

My form is :
<div>
<form name="redirect">
<select name="selection">
<option value="">--------service--------</option>
<option value="plumber.jsp">PLUMBER</option>
<option value="electrician.jsp">ELECTRICIAN</option>
<option value="carpenter.jsp">CARPENTER</option>
</select>
<select name="locality">
<option value="">--------select--------</option>
<option value="KOMMADI">KOMMADI</option>
<option value="MVP">MVP</option>
<option value="RTC">RTC</option>
</select>
<input type=submit value="Go!" onClick="WinOpen();">
</form>
and the javascript is
<script language="javascript">
function WinOpen() {
var url = document.redirect.selection.value;
document.location.href = url;
response.sendRedirect(url);
}
</script>
The above code is not working for me. The page just refreshes instead of redirecting. I want to redirect to page based on the selection value and also send the locality parameter to the other page.
Change your javascript like this.It will assign value of selection to the action attribute of form.
<script language="javascript">
function WinOpen()
{
document.redirect.action = document.redirect.selection.value;
document.redirect.submit();
}
</script>
It should work.
One more thing,you can access your locality paramter on the destination jsp by
String locality=request.getParameter("locality");

Submit a form without using submit button

I am using a form to submit the data to get the records from the database.
In the form I am using the two select tag options.
So after selecting the options the form should submit without using the submit button.
I am waiting for the response to submit the form after selecting the inputs without using the submit button(or any button) it should submit automatically.
Make a function to check everything you want has been set, and then if it has, submit the form:
function submitIfFormComplete()
{
// Check the select has something selected
if (document.getElementById('selectOne').selectedIndex > 0)
{
document.getElementById('formID').submit();
}
}
Then on your select, bind the onchange event to run the function.
Here is a working example: http://jsfiddle.net/JE6AM/
Select your car make:
<select id='sel1' name='selectCar' onchange="checkAndSubmit()">
<option value="0">Select...</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br/><br/>
Select your gender:
<select id='sel2' name='selectGender' onchange="checkAndSubmit()">
<option value="0">Select...</option>
<option value="Male">Volvo</option>
<option value="Female">Saab</option>
</select>
Javascript:
function checkAndSubmit()
{
if (document.getElementById('sel1').selectedIndex > 0
&& document.getElementById('sel2').selectedIndex > 0)
{
//document.getElementById('formID').submit();
alert('both have been selected!');
}
}
I've replaced the submit with an alert() to show you how the code triggers.
Edit: You can use $_REQUEST['selectCar'] to access the value.
Every form has a submit() function.
<form name="myForm">
...
</form>
can be submitted with
document.myForm.submit();
Jquery has been used to easily to submit the form.
<form id="test">
<select name="select1" id="select1">
</select>
</form>
$('#select1').change(function() {
$("#test");
});
<form action="submit.php" id="submitform" method="post">
Name:<input type="text" name="nm"> <br>
Age:<input type="number" name="age">
submit

Categories