We Keep Coding

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 = () => {...}

Changing form action based on select value - with 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>

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");

send get variables for pretty url

I'm creating a pretty url base web and I have a problem with get variables in form.
I have a url like localhost/events/1 (1 is a get variable $_GET['eventID']).
I want to send the eventID with a form like below
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
but when i click on submit button to send information into page and my url change to this
localhost/events/?eventID=1
but i want my url to be look like this
localhost/events/1
how could I achive to this?

If you want to do this at the client side, you can use the javascript onsubmit event and redirect to the page that you want. For example:
<script type="text/javascript">
function yourFunction()
{
var sel = document.getElementById('eventID');
if (sel.selectedIndex !== -1)
{
window.location.href = '/events/' + sel.options[sel.selectedIndex].value;
}
return false;
}
</script>
<form method="get" onsubmit="return yourFunction()">
<select name="eventID" id="eventID">
<option value="1">firstEvent</option>
<option value="2">secondEvent</option>
<option value="3">thirdEvent</option>
</select>
<input type="submit">
</form>

According to W3C The question mark is part of the definition of form submission with the GET method, so you can't actually do this. but you can redirect the page with javascript.
<form id="form" method="get">
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
<input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
</form>

thanks to all.
I want a solution without javascript or jquery
but it seems, there is no way to do this without them both.
I finally wrote some code in Jquery to solve this problem.
<form id="events" method="get">
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
<input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
</form>
$('#events').on('submit', function(e){
e.preventDefault();
document.location.href= '/events/' + $(this).find('select#sportID').val();
})

Display HTML while <option> is viable selection

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