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
Related
I am attempting to select a dropdown option (out of several dropdowns on the page) by its value. I'm posting below code I think is relevant but if more is needed please let me know!
HTML
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>
jQuery
var example = ".option3";
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).click();
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
enter code here $('#Filters').find('.dropdowns').val(example).click();
This works, selects the correct dropdown option and the dropdown initiates the filtering process (I'm using MixItUp), but it deselects all other dropdowns making them blank instead of their default values, which should be (in this example) Default 1, Default 2, Default 3, etc. (except of course the dropdown that contains the correct value).
I'm hoping to have jQuery code find the dropdown option with the correct value (example = ".option3") but not affect the other dropdowns and make sure they're still on their default initial values.
I haven't been able to find answers to my problem anywhere so any help would be appreciated!
If I got your point you can use .find('option[value="'+example+'"]').prop('selected', true);
Demo
var example = ".option3";
$('#Filters').find('option[value="'+example+'"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>
find does not deselect your selects. val does.
What happens is, $('#Filters') finds the form object. Then .find('.dropdowns') finds all the select objects within it. Then .val(example) sets the value of all of those select objects to .option3. However, that value happens to be invalid for most of them.
What I assume you want is to find only the select objects that actually can take your value, and set the value for those only:
var example = ".option3";
$('#Filters').find('.dropdowns:has(option[value="' + example + '"])').val(example);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
(Hopefully your option values won't have crazy things like quotes inside them.)
Please find below solution, I hope this will help you.
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).prop('selected',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
You need to be more specific when selecting your dropdown.
Use the dropdown ID to select it, then choose a value using val(), then trigger a click event, ei.:
var example = ".option3"; $('#Filters').find('.dropdowns #select2 ').val(example).click();
Otherwise you're assigning the value "option3" for all three dropdowns, which is why #select1 and #select3 look empty.
<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.
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.
The below select box works absolutely fine. It redirects depending on the selected option.
<select name="redirect" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.gmail.com">Gmail</option>
</select>
But I have a complex dropdown box like this:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option value="">Select Project</option>
<option value="http://www.google.com">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
</select>
I know the above select box makes no sense as i am using onChange to redirect and using type 2 & type 3 as options.
Question: When I select the Type 1 it should redirect to google else if type 2 or type 3 are selected, its values should be submitted to my form.
How can we achieve this. Thank you
You should try something like this:
<select name="menu" onChange="javascript: if (this.value == 'http://www.google.com'){window.document.location.href=this.options[this.selectedIndex].value;}else{document.forms['myform'].submit();} " value="GO">
<option value="">Select Project</option>
<option value="http://www.google.com">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
</select>
PS: Here: document.forms['myform'].submit();....you change myForm with your form name-id ;)
Saludos
html is like this as you want:
<form name="fm_memu">
<input type="text" name="ipt_menu" value=""/>
</form>
<select name="menu" onChange="if(this.selectedIndex){if(this.selectedIndex < 2){window.document.location.href=this.value;}else{window.document.forms['fm_memu']['ipt_menu'].value=this.value;}}" value="GO">
<option value="">Select Project</option>
<option value="http://www.google.com">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
</select>