Am trying to validate a listbox and Radio button using by ID, only on onsubmit.
if I ran in browser it is not showing any alert. When the submit button is clicked, I want to run the script to verify a radio and listbox is selected, if one is selected to do nothing. If one isn't selected I want it to post an alert message.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function validate()
{
if (document.getElementById("drop1").value == "-1")
{
alert("please select A");
}
if (document.getElementById("drop2").value == "-1")
{
alert("please select B");
}
if (document.getElementById("drop3").value == "-1")
{
alert("please select C");
}
if (document.getElementById("drop4").value == "-1")
{
alert("please select D");
}
if (document.getElementById("drop5").value == "-1")
{
alert("please select E");
}
var radios = document.getElementsByName("A");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length)
{
if (radios[i].checked) formValid = true;
i++;
}
if (!formValid) alert("Must check some option!");
return formValid;
}
}
</script>
</head>
<body>
A:<select id="drop1">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
B: <select id="drop2" >
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
C:<select id="drop3" >
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
D:<select id="drop4" >
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
E:<select id="drop5" >
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
<input type="radio" id=myradio1 name="A" value="1">one
<input type="radio" id=myradio2 name="A" value="2">two
<input type="radio" id=myradio3 name="A" value="3">three
<input type="submit" value="submit" onclick="validate()">
</body>
</html>
onsubmit isn't a valid property for a input type, it should be on the <form> element :
<form method="POST" onsubmit="validate()">
</form>
wrap your code inside the <form>
jsFiddle
If you don't want to use a <form> you should use onlick instead of onsubmit:
<input type="submit" value="submit" onclick="validate()"/>
jsFiddle
If you want to check if any selectbox is selected you can use this:
if (document.getElementById("drop1").value == "")
{
alert("please select A");
}
Note that you want a 'placeholder' for your select box that hans't a value. So when the user didn't select anything, the placeholder is selected by default; which hasn't a value.
So when the placeholder is selected a error is thrown
Html:
A:<select id="drop1">
<option value="" style="display: none;">Placeholder</option>
<option value="2">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
jsFiddle
I did only one listbox check, you can do the others the same way.
Also put your ID names inside a quote:
<input type="radio" id='myradio1' name="A" value="1"/>one
<input type="radio" id='myradio2' name="A" value="2"/>two
<input type="radio" id='myradio3' name="A" value="3"/>three
<input type="submit" value="submit"/>
Hope this helped!
You can check value of particular select box:
http://jsfiddle.net/sMNd2/
<select id="drop4" >
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
$("#selector").click(function() {
alert($("#drop4").val());
});
and see which value is selected. Based on that alert the user.
onsubmit Event can only be set on a form element. On the input element you can set a onclick event.
Related
I want to create a form that would submit onchange but only on certain options. This is my code do far:
<form method="post" action="">
<select name="period" id="period" class="form-control m-1" onchange='this.form.submit()'>
<option value="" disabled hidden selected>default</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
</form>
On options 1-3 I want to have it sumbitted onchange or just whenever the option is chosen but for option 4 I want to create a modal in which the user would input his data and then it would submit. Is there any way to do that?
try out the following code
<form method="post" action="">
<select name="period" id="period" class="form-control m-1" onchange='onChangeFun()'>
<option value="" disabled hidden selected>default</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
</form>
javascript below
function onChangeFun() {
selected_val = document.getElementById('period').value
if (0 < selected_val < 4) {
// form submit function
// this.form.submit()
}
if ( selected_val == 4) {
// perform action on selection of 4 th option
}
}
if any doubt comment ill happy to help
I don't know if it is simple or no. What I want to solve is,
One drop down "select" form field is there, another "input type="text" " field is below. Some options are there in "select dropdown". When I type in Below "input type="text" " field, There should be some suggestions from the above "select" dropdown field (like Auto Complete). Any help?
You can use the normal <select> tag with Select2:
$(function () {
$("select").select2({
width: 250
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<select name="" id="">
<option value="item-1">Item 1</option>
<option value="item-2">Item 2</option>
<option value="item-3">Item 3</option>
<option value="item-4">Item 4</option>
<option value="item-5">Item 5</option>
<option value="entry-1">Entry 1</option>
<option value="entry-2">Entry 2</option>
<option value="entry-3">Entry 3</option>
<option value="entry-4">Entry 4</option>
<option value="entry-5">Entry 5</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
</select>
<select name="first" id="select1">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
</select>
<select name="second" id="snack">
<option value="1">snack 1</option>
<option value="2">snack 2 second</option>
<option value="3">snack 3 second</option>
</select>
<select name="third" id="drink">
<option value="1">drink 1</option>
<option value="2">drink 2</option>
<option value="3">drink 3 third</option>
</select>
I want to change second or third dropdown menu on first dropdown 1st and 2nd option.
i.e. when we select Item 1 second dropdown should come up and when we select item 2 third dropdown should be up.
I have tried lot thing but couldn't achieve it. I'm looking for JavaScript solution
This is the Javascript solution:
HTML
<select name="first" id="select1" onchange="changeTime(this);">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
</select>
<select name="second" id="snack" style="display:none;">
<option value="1">snack 1</option>
<option value="2">snack 2 second</option>
<option value="3">snack 3 second</option>
</select>
<select name="third" id="drink" style="display:none;">
<option value="1">drink 1</option>
<option value="2">drink 2</option>
<option value="3">drink 3 third</option>
</select>
Javascript:
function changeTime (obj)
{
if(obj.value == 1) {
document.getElementById('snack').style.display='block';
document.getElementById('drink').style.display='none';
}
else{
document.getElementById('drink').style.display='block';
document.getElementById('snack').style.display='none';
}
}
Try this
$('#drink').hide();
$('#select1').on('change', function () {
if($('#select1').val() == 1) {
$('#snack').show();
$('#drink').hide();
} else {
$('#snack').hide();
$('#drink').show();
}
});
jsfiddle here: http://jsfiddle.net/ewwAX/604/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#snack").css({"display":"none"}); //using css function make snak & drink are hidden
$("#drink").css({"display":"none"}); //use display property so that no effect on the layout .. no space taken by the hidden item
$("#select1").change(function (){ // on change
var val = $("#select1").val(); // of the value of select 1
if(val == 1){ // if value = 1
$("#snack").css({"display":"inline"}); // display snak
$("#drink").css({"display":"none"}); // & hide drink
}else if(val == 2){ // if value = 2
$("#snack").css({"display":"none"}); // hide snack
$("#drink").css({"display":"inline"}); // display drink
}else { // other wise
$("#snack").css({"display":"none"}); // make all hidden
$("#drink").css({"display":"none"});
}
});
});
</script>
</head>
<body>
<select name="first" id="select1">
<option value="0" >Select Item</option> <!-- this option added by me -- you can omit it if you want -->
<option value="1" >Item 1</option>
<option value="2" >Item 2</option>
</select>
<select name="second" id="snack">
<option value="1">snack 1</option>
<option value="2">snack 2 second</option>
<option value="3">snack 3 second</option>
</select>
<select name="third" id="drink">
<option value="1">drink 1</option>
<option value="2">drink 2</option>
<option value="3">drink 3 third</option>
</select>
</body>
I have three drop-down fields. I want to validate them using JavaScript when the submit button is clicked to see if any of the values in the three drop-down fields are not selected.
On click of submit button it should display a warning message indicating that one of the three drop-downs have not been filled.
Based on the information in the comments from my previous answer, this should work for you. I have tested it but you can refine the JavaScript if statement to test each individually and report a different message for each as long as you you always return false; to make sure the submission gets halted
function validateForm() {
if (document.getElementById("ddOne").value == "" || document.getElementById("ddTwo").value == "" || document.getElementById("ddThree").value == "") {
alert("You need to fill in all three dropboxes and not just some");
return false;
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
<label>Dropdown 1</label>
<select id="ddOne">
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
<br />
<label>Dropdown 2</label>
<select id="ddTwo">
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
<br />
<label>Dropdown 3</label>
<select id="ddThree">
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
<br />
<input type="submit" value="Submit">
</form>
</body>
</html>
Instead of using JavaScript, have you tried taking advantage of the required attribute of the select HTML tag?
When used, a drop-down field should look somewhat like this:
<select required>
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
When setup this way, you cannot submit a button for the form body without having a value defined option selected for that field.
I have a form with 8 select (drop-down) fields. I need to the form to be successfully submitted only when at least 1 option from the 8 select fields has been selected. If none of the options is selected, I need an alert to pop-up when the user tries to submit without selecting at least one option.
I have no knowledge in javascript or php.
I hope I'm clear enough.
Thanks guys.
Here's a JSFiddle.
Here's the code:
<select class="dropdown1">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown2">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown3">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown4">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown5">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown6">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown7">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown8">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button class="submit-btn">Submit</button>
<script type="text/javascript">
$(".submit-btn").click(function(){
var dropdown_selected = false;
// Select all the selected dropdown values
var dropdown_values_arr = new Array();
dropdown_values_arr.push($(".dropdown1 option:selected").val());
dropdown_values_arr.push($(".dropdown2 option:selected").val());
dropdown_values_arr.push($(".dropdown3 option:selected").val());
dropdown_values_arr.push($(".dropdown4 option:selected").val());
dropdown_values_arr.push($(".dropdown5 option:selected").val());
dropdown_values_arr.push($(".dropdown6 option:selected").val());
dropdown_values_arr.push($(".dropdown7 option:selected").val());
dropdown_values_arr.push($(".dropdown8 option:selected").val());
// Loop over these values
for(var i=0; i<dropdown_values_arr.length; i++){
// If the value is not empty, then break the loop
// Condition is met: at least one dropdown is selected
if(dropdown_values_arr[i].length > 0){
dropdown_selected = true;
break;
}
}
// If there's no selected values in any of the dropdowns, then throw an alert message
if(dropdown_selected == false){
alert("Please fill at least one dropdown");
}
});
</script>
I do not quite understand your question, but if I'm correct, you want to check if something is selected in a drop-down box? (select)
Javascript (no JQ)
function checkdropdown() {
if(document.getElementById('select').value != "") {
return true;
}
else {
return false;
}
}
HTML code
<form action='file.php' action='post'>
<select name='select' id='select'>
<option value=''>Select an option</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
</select>
<input type='submit' onClick='if(!checkdropdown()) {alert("You need to select a value!"); return false;}' value='Submit form' />
</form>
jsfiddle: http://jsfiddle.net/KNd47/