<form action="Url1" method="post">
<select class="selectpicker">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
<button type="submit" class="btn btn-success pull-right">Submit</button>
</form>
This is a example code for my problem. What i want is to get different urls When select Text 1 Option or Text 2 Option. How can i do it?
Edit: I want to get different web URLs for these 2 options. For an example when someone select Text 1 Option, He must be directed to URL 1 And when someone selects Text 2 option He must be directed to URL 2
Add id attribute to your selector and get the selected value using java and use window.location to redirect on selected url
The corrected code is as below.
Try this ..
<form action="Url1" method="post">
<select name="url" id ="url" class="selectpicker"
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
<button type="submit" class="btn btn-success pull-right">Deposit
Now</button>
</form>
<script type = "text/javascript">
function Redirect() {
var e = document.getElementById("url");
var strUrl = e.options[e.selectedIndex].text;
window.location = strUrl;
}
</script>
Related
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 = () => {...}
I have multiple search functions/text boxes that I would like to condense into a textbox + dropdown selection.
http://jsfiddle.net/rhnt9vme/3/
<div>
<form>
<input type='text' id='searchOneInput' />
<button type='submit' onclick='searchOne()' target="_blank">Search 1</button>
</form>
</div><br>
<div>
<form>
<input type='text' id='searchTwoInput' />
<button type='submit' onclick='searchTwo()' target="_blank">Search 2</button>
</form>
</div><br>
<div>
<form>
<input type='text' id='searchThreeInput' />
<button type='submit' onclick='searchThree()' target="_blank">Search 3</button>
</form>
</div><br>
function searchOne(){
var searchOneInput = document.getElementById('searchOneInput').value;
window.open("http://one.com/search=" + searchOneInput);
}
function searchTwo(){
var searchTwoInput = document.getElementById('searchTwoInput').value;
window.open("http://two.com/search=" + searchTwoInput);
}
function searchThree(){
var searchThreeInput = document.getElementById('searchThreeInput').value;
window.open("http://three.com/search=" + searchThreeInput);
}
I want to combine these into a dropdown selection single textbox search that looks like this:
<form>
<input type="text" id="userInput" />
<select id="dropdown">
<option value="">Search 1</option>
<option value="">Search 2</option>
<option value="">Search 3</option>
</select>
<button type="submit" onclick="">Search</button>
</form>
Set an ID to your form and listen for "submit" event using Element.addEventListener() method
Set the respective websites URL inside the <option>s value attribute
Don't forget to trim the user input, just in case of accidental wrapping whitespaces
document.getElementById("searchForm").addEventListener("submit", function(ev) {
ev.preventDefault(); // Comment out if not needed
var dropdownURL = document.getElementById("dropdown").value;
var searchInput = document.getElementById("userInput").value.trim();
var address = dropdownURL + searchInput;
console.log(address);
window.open(address);
});
<form id="searchForm"> <!-- PS: add ID to form -->
<input type="text" id="userInput">
<select id="dropdown">
<option value="http://one.com/?search=">Search 1</option>
<option value="http://two.com/?search=">Search 2</option>
<option value="http://three.com/?search=">Search 3</option>
</select>
<button type="submit">Search</button>
</form>
In case you need a combined URI string with additional suffixed query parameters like
https://example.com/?search=**USERINPUTHERE**&c=%2FDefault.asp
than you could use a placeholder in the set of not URI allowed characters, like |, and replace it with the user input string using String.prototype.replace()
document.getElementById("searchForm").addEventListener("submit", function(ev) {
ev.preventDefault(); // Comment out if not needed
var dropdownURL = document.getElementById("dropdown").value;
var searchInput = document.getElementById("userInput").value.trim();
// Replace "|" with the user input
var address = dropdownURL.replace(/\|/, searchInput);
console.log(address);
window.open(address);
});
<form id="searchForm"> <!-- PS: add ID to form -->
<input type="text" id="userInput">
<select id="dropdown">
<option value="http://one.com/?search=|">Search 1</option>
<option value="http://two.com/?search=|">Search 2</option>
<option value="http://three.com/?search=|">Search 3</option>
<option value="https://four.com/?search=|&c=%2FDefault.asp">Search 4</option>
</select>
<button type="submit">Search</button>
</form>
PS: since the order of query params is not important, you can always define your string like: https://example.com/?c=%2FDefault.asp&search= and use the first example anyways.
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>
How to make go to "link" button after changing option value and click sumbit?
I've got problem, because when I change value it's going to "link" before i click submit
<form action="search-form" method="post">
<select onChange="window.location.href=this.value" >
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
Remove the onchange from the select element and write a listener for your submit button (you are using search-form action already)
<form action="search-form" method="post">
<select>
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
EDIT:
#Peril Adding a solution as requested. Now it is working if you use onsubmit for the form submit as per below. Note that you should give valid links for the option values
function submit_form() {
window.location.href= document.getElementById('select-box').value;
}
<form onsubmit="submit_form()" method="post">
<select id="select-box">
<option value="http://google.com">coffie medium</option>
<option value="http://yahoo.com">coffe big</option>
</select>
<button type="submit" name="submit" value="submit">submit</button>
</form>
EDIT 2:
#Peril Normally we load external links into a page when we click on anchor tag. If you load it using window.location.href, you will get the cross-origin access error. Take the below snippet into a local html file and check it out.
// load href initially
document.getElementById('form-button').setAttribute('action', document.getElementById('select-box').value);
// load href on value change of select
function onChangeValue() {
document.getElementById('form-button').setAttribute('action', document.getElementById('select-box').value);
return false;
}
<body>
<select id="select-box" onchange="onChangeValue()">
<option value="http://www.google.com">coffie medium</option>
<option value="http://www.facebook.com">coffe big</option>
</select>
<form action="#" id="form-button" style="display:inline">
<input type="submit" value="Submit" />
</form>
</body>
Try including in your select the attribute 'onchange' and in the value of option the link, how that:
<select name="form" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
remove the onchange event from select box and validate it in js on button click. If the page redirects what is the use of submit button
<form action="search-form" method="post">
<select>
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
This isn't working, it only ads to adres url "search-form"
Ok, so if you use JavaScript or Jquery?
First Created the select:
<select name="form" id="form">
<option value="url">Home</option>
<option value="url">Contact</option>
<option value="url">Sitemap</option>
</select>
Try .change for assing a new location:
$("#form").change(function(){
var url = $(this).val();
location.assign(url);
});
I have something like the below:
<select name="blah">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit"/>
I want it such that the submit button only appears if the user has selected an option with value >= 1 So on page load it will not display the submit button because the currently selected option has no value, but the moment a user selects a valid option, the submit button appears.
Is this something that can be accomplished with JS/JQ?
If you don't want to display submit button when page loads then add below css
input[type=submit] {display:none;}
To show submit button on value changes try below js code
$(function(){
$('select').change(function(){
var value = parseInt($(this).val().replace(/[^0-9-]/,""),10)
if(value >= 1)
{
$('input[type=submit]').show();
}
});
});;
Working Demo
Try following code in java script
function isSelected() {
var value =document.getElementById("blah").selectedIndex;
if(value >='1'){
document.getElementById('btnSubmit').style.display='block';
}else{
document.getElementById('btnSubmit').style.display='none';
}
}
Your HTML
<select id="blah" onChange="isSelected();">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit" style="display:none" id="btnSubmit"/>
change this
<input type="submit" value="Submit"/>
to
<input type="button" value="Submit" id="submit"/>
in jQuery:
$(document).ready(function(){
$('#submit').click(function(){
if($('select[name="blah"]').val() > 1)
$('#yourform').submit();
else
alert('selected value > 1');
});
});
you form need to have an id for example, in my case yourform
DEMO