I have a select form made in html and I want to make the selected value part of the url destination when they submit it.
Example:
<form>
<select name="state" id="state">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</select>
<input type="submit" value="submit">
</form>
And when they choose, let's say "CA", I want the submit button go to "www.example.com/ca.html".
Here's my JS:
var stLocation = document.getElementById("state").value;
window.location.href = 'www.example.com/stLocation.html';
First of all you need to include yourjQuery library to your script. Then you try this
$('button').click(function (){
selectedValue = $('select').val().toLowerCase(); //I converted it to lowercase due to the case difference in your value and your url
window.location.href = "http://www.example.com/"+selectedValue+".html";
});
But if its in a form tag the use this instead
$('form').submit(function (e){
e.preventDefault();
selectedValue = $('select').val().toLowerCase(); //I converted it to lowercase due to the case difference in your value and your url
window.location.href = "http://www.example.com/"+selectedValue+".html";
});
Related
I want to have a list of options containing different URL's, and then redirect the user based on his selected option once he clicks on submit.
This works - but it works to fast, as the user doesn't need to click any submit.
<select id="dynamic_select">
<option value="" selected>Pick a Website</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.youtube.com">YouTube</option>
<option value="https://www.netflix.com">Netflix</option>
</select>
<script>
$(function(){
// bind change event to select
$('#dynamic_select').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
How can I implement a submit button to this code, so the user doesn't get redirected at once?
Add a submit button and put your code on its click(note:before redirect you should check if url is selected):
<select id="dynamic_select">
<option value="" selected>Pick a Website</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.youtube.com">YouTube</option>
<option value="https://www.netflix.com">Netflix</option>
</select>
<input type="submit" id="submit" value="submit" />
<script>
$(function(){
// bind change event to select
$('#submit').on('click', function () {
var url = $('#dynamic_select').val(); // get selected value
if (url!="") { // require a URL
window.location = url; // redirect
}
else
alert('Please select a Website!');
return false;
});
});
</script>
For this, simply by add a submit button (via an input) you can just handle the submit click then grab the value of the select element. This way it will only trigger on the submit click and not each change of the select
<select id="dynamic_select">
<option value="" selected>Pick a Website</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.youtube.com">YouTube</option>
<option value="https://www.netflix.com">Netflix</option>
</select>
<input type="submit" id="send_url" value="Submit" />
<script>
$(function(){
// bind change event to select
$('#send_url').on('click', function () {
var url = $('#dynamic_select').val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
I have researched this through Stack, W3, and others but the solutions that I fiond there don't work. Below is part of my html code, I did my best to try and keep it neat (not an expert by any means).
<select name="ctl00$ContentPlaceHolder1$ddlSearchCriteria" id="ctl00_ContentPlaceHolder1_ddlSearchCriteria" style="width:150px;">
<option value="LastName">Last Name</option>
<option value="FirstName">First Name</option>
<option value="Phone">Phone Number</option>
<option value="Department">Department</option>
<option value="Division">Division</option>
<option value="Location">Location</option>
<option value="Title">Title</option>
<option value="Email">Email Address</option>
<option value="Keywords">Keywords</option>
</select>
<div style="height:10px"></div>
<input name="ctl00$ContentPlaceHolder1$txtSearchString" type="text" id="ctl00_ContentPlaceHolder1_txtSearchString" style="width:160px;">
<button type="button" name="ctl00$ContentPlaceHolder1$Button1" id="ctl00_ContentPlaceHolder1_Button1" style="position: absolute; height:22px; " onclick="myFunction()">Go</button>
<div style="height:5px;"></div>
</td>
<td style="width:48%; height: 27px;"> </td>
</tr>
</tbody>
</table>
</div>
<script>
var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
function myFunction()
{
var dropDownChoice = document.getElementById("ctl00_ContentPlaceHolder1_ddlSearchCriteria").value;
var inputText = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString").value;
var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
window.open(GoToURL);
}
</script>
I'm trying to make it so that when you click enter the submit button activates. I have tried https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp and Trigger function on Enter keypress as examples.
But this isn't working, all it does is break my code. Not sure if I'm putting it in the wrong spot. I added it right below var inputText in the Function.
You need to add keyup event listener on the input textfield
Add this to your javascript
var input = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("ctl00_ContentPlaceHolder1_Button1").click();
}
});
Working Example
Replace type="button" with type="submit"
Add a <form onsubmit="myFunction">
Wrap your <select> with the <form>:
<form onsubmit="myFunction">
<select>...</select>
</form>
Here's what your function should do to prevent the form from submitting (we didn't include an "action" so it will submit to itself)
function myFunction(event){
// Stop the form from submitting (default functionality)
event.preventDefault();
...
}
Your code should look similar to this (added a fix for obtaining the select list value the proper way)
<form onsubmit="myFunction">
<select id="mySelect">
<option value="LastName">Last Name</option>
<option value="FirstName">First Name</option>
<option value="Phone">Phone Number</option>
<option value="Department">Department</option>
<option value="Division">Division</option>
<option value="Location">Location</option>
<option value="Title">Title</option>
<option value="Email">Email Address</option>
<option value="Keywords">Keywords</option>
</select>
<input type="text" id="myInput">
</form>
<script type="text/javascript">
function myFunction(event){
// Prevent the form from submitting (default functionality)
event.preventDefault();
var myUrl = "http://bccportal01/webapps/agency/epdsearch/Search.aspx?",
selectEl = document.getElementById('mySelect'),
inputEl = document.getElementById('myInput');
// Append the selected value
myUrl += "op=" + selectEl.options[selectEl.selectedIndex].value;
myUrl += "&str=" + inputEl.value;
window.open(myURL);
}
</script>
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");
I have the following drop down menu.
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
Is it possible for me to add two text input fields where the visitor can populate the menu options themselves?
For example, in text field one they input the url for the option, and text field two, they input the name of the option.
So...
Text field one: http://www.randomwebsite.com
Text field two: Random Website
Then an 'Add' button, which would result in this...
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
<option value="http://www.randomwebsite.com">Random Website</option>
</select>
This is the javascript for the current menu, if this helps.
<script type="text/javascript">
function newSrc() {
var e = document.getElementById("MySelectMenu");
var newSrc = e.options[e.selectedIndex].value;
document.getElementById("MyFrame").src=newSrc;
}
</script>
Thanks in advance.
Yes Create two textboxes and Add id's to them and also create a button with a onclick function "Add", Then use the following javascript which is nothing but creating the option and appending to selectbox
function Add()
{
var x = document.getElementById("MySelectMenu");
var opt = document.createElement("option");
opt.value= document.getElementById("url").value;
opt.innerHTML = document.getElementById("name").value; // whatever property it has
x.add(opt);
}
<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.example.com">Example</option>
</select>
<input type="text" name="name" id="name">
<input type="url" name="url" id="url">
<button onclick="Add()">ADD</button>
Try below code
var url=$("#txtUrl").val();
var textValue = $("#txtDisplay").val();
$('#MySelectMenu').append("<option value='"+url+"'>"+textValue+"</option>);
use this code on OnClick event of Add button.
Need form to change it's action depending on the selection from a specific drop down menu.
On change should trigger the script and change the action before user submits. Easier said than done when you're new to JS.. thanks for any help!
Javascript:
<script type="application/javascript">
function chgAction(form1){
if( recipient=="jordachedotcom_Advertising" )
{document.form1.action = "/adv_contact.php";}
else if( recipient=="dept_Public_Relations" )
{document.form1.action = "/pr_contact.php";}
else if( recipient=="dept_Manufacturing" )
{document.form1.action = "/manuf_contact.php";}
else if( recipient=="dept_Brands" )
{document.form1.action = "/brands_contact.php";}
else if( recipient=="dept_Holdings" )
{document.form1.action = "/holdings_contact.php";}
else if( recipient=="dept_Vendor_Inquiry" )
{document.form1.action = "/vend_contact.php";}
else if( recipient=="dept_Other_Inquiry" )
{document.form1.action = "/misc_contact.php";}
}
</script>
FORM HTML:
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
Your code is missing the part to get the selected item from the selectbox.
document.form1.recipient.selectedIndex
The rest should be ok and i have created a Fiddle
I'm guessing as to your full intent, but I think that the best way to accomplish what you're doing here would be via php on the server side. Have the form direct to one particular page and then using your server-side language redirect to the proper url. For example, if you're using php do something like this:
client-side (html)
(note how the action property of the form is one fixed location)
<form id="form1" name="form1" method="post" action="./form-handler.php">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
<select>
<input type="submit">
</form>
No javascript required!
server-side (php)
form-hander.php:
<?php
$recipient = $_POST['recipient'];
//Based on the value of the $recipient value redirect to the correct page
//using the header function
switch($recipient) {
case 'dept_Manufacturing':
header('Location: ./manuf_contact.php'); exit;
case 'dept_Brands':
header('Location: ./brands_contact.php'); exit;
case 'dept_Holdings':
header('Location: ./holdings_contact.php'); exit;
//... etc, etc
}
On your on change function, you can obtain your currently selected element using:-
var currentValue = $("#recipient option:selected").val();
And then apply these if checks as you specified on this currentValue var as shown below:-
if(currentValue == "dept_advertising"){
$("#form1").attr("action",customURL);
}
Try this
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option data-action="/adv_contact.php" value="dept_Advertising">Advertising</option>
<option data-action="/pr_contact.php" value="dept_Public_Relations">Public Relations</option>
<option data-action="/manuf_contact.php" value="dept_Manufacturing">Manufacturing</option>
<option data-action="/brands_contact.php" value="dept_Brands">Brands</option>
<option data-action="/holdings_contact.php" value="dept_Holdings">Holdings</option>
<option data-action="/vend_contact.php" value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option data-action="/misc_contact.php" value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
<script>
function chgAction(){
$('#form1').attr({'action':$('option:selected').attr('data-action')});
$('#form1').submit();
}
</script>
You could also just use the actual form action URLs as the option values and use a simple one line onchange attribute without any additional JS:
<form method="post" name="form1">
<select id="form_action" name="form_action" onchange="document.form1.action = this.value;">
<option value="https://url1.com">URL1</option>
<option value="https://url2.com">URL2</option>
</select>
</form>
Tested and working in Firefox. May possibly benefit from some measures to make it more cross-browser compatible.
Replace:
function chgAction(form1){...}
in
chgAction = function(form1) {....}
Code will work but it is not the ultimate dream. Better to use something like that:
(function(){
var form = document.querySelector('#form1'),
select = form.querySelector('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.addEventListener('change', function () {
var el = this, value = el.value;
if (action[value]) {
form.action = action[value];
}
}, false);}());
Like jQuery:
(function($){
var form = $('#form1'),
select = $('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.on('change', function () {
var el = $(this), value = el.val();
if (action[value]) {
form.attr('action', action[value]);
}
});}(jQuery));