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!)
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'm trying to validate a select menu I have on my page. If the first option is selected(the one with no value)and clicks the submit button, then I want to either display a span next to the menu or display the span under the menu. The span should tell the user to select an option (male/female). I'm having trouble doing either of these things. Is span not the correct thing to use here?
Note on possible duplicate: I read some of the answers posted on Stack similar to this question but some used JQuery which I have not learned yet. There was one answer that used Javascript which I tried to follow. It used a function with parameters and errorPlacement but I was having trouble understanding it and wanted to do it in a simpler way. There were other questions I looked as well, but I'm listing one for now.
Here is the link to the question: Problem with display error message in span element when validation
Also I'd specially like to use span tags if possible then prepend & append.
Here is my code:
HTML
<form onsubmit="return Validate();">
<div id="div1">
<select id="gender">
<option value="">Select gender:</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<input type = "submit" value="submit"/>
</form>
JAVASCRIPT
function Validate() {
var gender = document.getElementById("gender");
if (gender.value == "") {
var gendererror = document.createElement("span");
gendererror.innerHTML = "please select a gender";
return false;
}
return true;
}
I think this is what you want. Always have a error-msg div to give styles to your errors.
function Validate() {
var gender = document.getElementById("gender");
if (gender.value == "") {
if(!document.getElementById("error-msg").childNodes.length){
var gendererror = document.createElement("span");
gendererror.innerHTML = "please select a gender";
document.getElementById("error-msg").appendChild(gendererror);
}
return false;
}else{
return true
}
}
<form onsubmit="return Validate();" action="#">
<div id="error-msg"></div>
<div id="div1">
<select id="gender">
<option value="">Select gender:</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<input type = "submit" value="submit"/>
</form>
<script type="text/javascript" src="./jsfile.js"></script>
I think why you didn't get error message is because, javascript is confuse where to put the created tag and its content. You might have forgot to appendChild with some tag, so that javascript knows where to put created tag
Html:-
<form onsubmit="return Validate();">
<div id="div1">
<select id="gender">
<option value="">Select gender:</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<input type = "submit" value="submit"/>
</form>
Just below, Script:-
function Validate() {
var gender = document.getElementById("gender");
if (gender.value == "") {
var relationshiperror = document.createElement("span");
document.body.appendChild(relationshiperror); // You can add to any new div for example, also after submit button
relationshiperror.innerHTML = "Please select the type of relationship";
return false;
}
return true;
}
I am using the datalist HTML property to get a drop down inout box:
<input list="orderTypes" value="Book">
<datalist id="orderTypes">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
The problem is that now I have to clear the input box to view all the drop down values. Is there a way to have a default value but still view all the values in the datalist when the drop down icon is clicked?
I have the same problem.
I just simple added placeholder with the default data.
In your example:
<input list="orderTypes" name="orderType" id="orderType" placeholder="Book" />
I listen submit event. If the input value is empty, I use Book as default value, otherwise I use the given value...
$("#mySubmitButton").click(() => {
// use event prevent here if need...
const orderType = $("#orderType").val() || "Book";
console.log(orderType);
});
I know of no way to do this natively. You could make a "helper" div to use when the input field has value. I couldn't hide the native drop down so I renamed the ID. Uses jQuery.
html
<input list="orderTypes" id="dlInput">
<div id="helper" style="display:none;position:absolute;z-index:200;border:1pt solid #ccc;"></div>
<datalist id="orderTypes" style="z-index:100;">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
script
$(function(){
// make a copy of datalist
var dl="";
$("#orderTypes option").each(function(){
dl+="<div class='dlOption'>"+$(this).val()+"</div>";
});
$("#helper").html(dl);
$("#helper").width( $("#dlInput").width() );
$(document).on("click","#dlInput",function(){
// display list if it has value
var lv=$("#dlInput").val();
if( lv.length ){
$("#orderTypes").attr("id","orderTypesHide");
$("#helper").show();
}
});
$(document).on("click",".dlOption",function(){
$("#dlInput").val( $(this).html() );
$("#helper").hide();
});
$(document).on("change","#dlInput",function(){
if( $(this).val()==="" ){
$("#orderTypesHide").attr("id","orderTypes");
$("#helper").hide();
}
});
});
jsFiddle
Is this what you trying to do?
var demoInput = document.getElementById('demoInput'); // give an id to your input and set it as variable
demoInput.value ='books'; // set default value instead of html attribute
demoInput.onfocus = function() { demoInput.value =''; }; // on focus - clear input
demoInput.onblur = function() { demoInput.value ='books'; }; // on leave restore it.
<legend>(double) click on the input to see options:</legend>
<input list="orderTypes" id="demoInput">
<datalist id="orderTypes">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
The only "problem" here is that in order to see the options the user have to click the input again so it's like "double-click the input to see options".
Hope that helps.
I would use input's placeholder attribute along with a Javascript code that'll make sure that the field isn't empty upon submission.
Obviously this is just an example, you'll have to modify the submission event.
document.getElementById('submitButton').addEventListener('click', function() {
let inputElement = document.getElementById('myInput');
if (!inputElement.value) {
inputElement.value = 'Book';
}
});
<input id="myInput" list="orderTypes" placeholder="Book">
<datalist id="orderTypes">
<option value="Book">
<option value="Copy">
<option value="Page">
</datalist>
<input id="submitButton" type="submit">
I've menaged to get what You described with just <select> + <option> tags instead of <input> + <datalist>:
<select name="sortBY">
<option value="Book">Book</option>
<option value="Copy">Copy</option>
<option value="Page">Page</option>
</select>
Putting it all inside <form></form> tags will send it eg. with POST method with $_POST['sortBY'] value.
If this helps at all:
$('#grouptext').val($('#grouplist option#48').attr('value'));
where '#grouptext' is your text input to which your datalist '#grouplist' is attached, and #48 is the ID you're looking to "pre-select".
here's what my data list looks like, for clarity
worked for me.
In Chrome's console it shows up like this with "option#115", which corresponds to the correct text in the datalist for that "id" (being 115)
set id for your input and with js set default value
<script>
setTimeout(() => {
document.getElementById('orderTypes').value = "Book";
}, 100);
</script>
How can I get a value from list and use it somewhere else (for example in "if" statement)?
<h2> <form>
<select id="day">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option> <option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>
<option>31</option>
</select>
<select id="month">
<option>Styczen</option><option>Luty</option><option>Marzec</option><option>Kwiecien</option><option>Maj</option>
<option>Czerwiec</option><option>Lipiec</option><option>Sierpien</option><option>Wrzesien</option>
<option>Pazdziernik</option><option>Listopad</option><option>Grudzien</option>
</select>
</form>
I need to use selected value - and depending on choosed numbers I want to make some buttons inactive.
Type this:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
days=$("#day option")
months=$("#month option")
//Now you have a JQuery object which acts like an array.
//Just get the html of each value with `.html()`.
days[0].html() //this is 1
months[3].html() //this is Kwiecien
</script>
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>