I am using the following answer to implement a required dropdown box. The only difference is that the code of dropdown box in my application is in a new page which will be popped up.
The problem is that once user select any option including the one with none value, the form gets submitted!
Page 1
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate
/1.9/jquery.validate.js"
</script>
<script type="text/javascript">
$("#everything").validate({
messages: {
dd1: {
required: "Please select an option from the list, if
none are appropriate please select 'Other'"
}
}
});
function popup(){
document.getElementById("mydropbox").style.display = "Block";
>> send request to server to show the Page 2 in body of mydropbox <<
return false;
}
</script>
</head>
<body>
popup
<div id="mydropbox"></div>
...
</body>
</html>
page 2
<html>
<body>
<form id="everything">
<label for="dd1">Select the best option</label><br/>
<select name="dd1" id="dd1" class="required">
<option value="">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select>
<br/><br/>
<input type="submit" />
</form>
</body>
</html>
Add the required attribute to your select element. That should work in modern browsers at least.
It alerts the user if the option they are selecting has an empty value (like the option "None" in your case). You would have do do server-side validation too of course, because you can't rely on this.
Updated Demo
HTML
<input type="submit" id="sbt" /> //added id to the submit button sbt
js
$('#sbt').click(function (e) {
e.preventDefault(); //stop form submit
if ($('#dd1 option:selected').text() != 'None') {
$('#everything').trigger('submit'); // if selected text not = to None then trigger form submit.
}
});
DEMO
Remove the submit button from the form and use this
form will be submitted only if the dropdownlist value is changed
<select onchange="this.form.submit()">
...
</select>
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 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.
I have a text input, alongside I have option tag with two options.
Basically I want to save the text that the user enters while switching between options, but if the user choose an option that he already enterd a text the text should appear in the input field as the default value.
And of course it's part of the submit form.
Many thanks in advance!
<div>
<p>please enter your description for each of the languages</p>
<input id="description" type="text">
<select id="language-select">
<option value="EN">EN</option>
<option value="FR">FR</option>
</select>
</div>
You can use local storage for this if you want to persist what is saved, otherwise a variable would be good enough.
Example with variable
var previous;
var state = {};
$("#language").on('focus', function() {
previous = $(this).val()
}).change(function() {
state[previous] = $("#test").val();
$("#test").val('');
if (typeof(state[$(this).val()]) != 'undefined') {
$("#test").val(state[$(this).val()]);
}
$("#test").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="test" id="test" />
<select id="language">
<option val="en">EN</option>
<option val="fr">FR</option>
</select>
</form>
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
I use this code to check if dropdown opton is selected before submit.
On my page I have 3 dropdown menus, but only the first works correctly.
Is there a way to extend function for the 2nd and 3rd dropdowns?
My script:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var year = $('#year option:selected').val();
if(year == "")
{
$("#msg").html("Please select a year");
return false;
}
});
});
</script>
My HTML:
<div id="msg"></div>
<form method="post" action="">
<select id="year">
<option value="">OLLA</option>
<option>1991 </option>
<option>1992 </option>
<option>1993 </option>
<option>1994 </option>
<option>1995 </option>
</select>
<div id="msg"></div>
<form method="post" action="">
<select id="year">
<option value="">OLLA</option>
<option>1991 </option>
<option>1992 </option>
<option>1993 </option>
<option>1994 </option>
<option>1995 </option>
</select>
<input type="submit" name="submit" id="submit">
</form>
ID's should be unique and only used once. I advise you to give them all the class msg instead, e.g.
<div class="msg"></div>
...
<div class="msg"></div>
Also, give your selects a class too instead, for the same reason, both:
<select class="year">
Your jQuery would also be changed to:
<script type="text/javascript">
$(document).ready(function(){
$(".submit").click(function(){
var year = $('.year option:selected').val();
if(year == "") {
$(".msg").html("Please select a year");
return false;
}
});
});
</script>
If you put the listener on the form, it will be this within the function so you can just do something like:
$("<form selector>").click(function(){
if (this.year.value == "") {
$("#msg").html("Please select a year");
return false;
} else {
$("#msg").html("");
}
})
You could also check whether the selected index is greater than zero. If it's zero or -1, then either the first or no option is selected (respsectively).
You should turn the ID attributes into NAME attributes, then you can repeat them (and they will be successful when the form is submitted).
Oh, and never name a form control "submit" as it will shadow the form's submit method, making it impossible to call it.
Because Ids of both element are same so selector works with first id match this case .Try to use different ids or USe Class Instead of ID
or use the jquery each function http://api.jquery.com/each/
You could, of course, set an action on the DDL to ensure that a value has been set (enabling the submit button afterwards) thus putting the emphasis of validation directly on the control itself, rather than the submit button. (Just another way of skinning the same cat!)