I was wondering if it's possible to submit a form (dropdown list for the input) when the selected value selected="selected" is clicked. I can't seem to get it to work.
My code:
<form method="post" name='myform' id="box" action="javascript:alert('submitted')" onsubmit="if(this.f.value == -1){return false;}">
<fieldset class="box_fieldset">
<select name="f" id="f3" onchange="if(this.options[this.selectedIndex].value != -1){ document.forms['myform'].submit() }">
<option value="-1">-- select --</option>
<option value="1" >one</option>
<option value="2" selected="selected" >two</option>
<option value="3" >three</option>
</select>
</fieldset>
</form>
With the corresponding jsFiddle
As you can see, it's not possible to 're-submit' option 2 because it is already selected
(alert doesn't get triggered).
Is there a way to do this?
Well, use another event trigger.
window.onload should be appropriately.
jsFiddle link
when you are using onchange event you can't handle default values, like the one you chose (two);
<option value="-1" selected>-- select --</option>
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3" >three</option>
<html>
<head>
</head>
<body>
<select id="slct">
<option value="1" onclick="clicked(this)">one</option>
<option value="2" onclick="clicked(this)">two</option>
<option value="3" onclick="clicked(this)">three</option>
</select>
<script>
function clicked(e){
var xml = new XMLHttpRequest();
xml.open("GET",""+this.value,false);
xml.send();
}
</script>
</body>
use such a trick to handle your requests
Related
I have a jsp with a dropdown, I want to set the selected value based on parameter.The code is below:
<% String option=request.getparameter("option"); %>
<select name="option">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
So if I pass parameter like "test.jsp?option=2",then the second options is selected. Any hint on how to do it? Thx.
I have a dropdown list which runs the javascript function printResult when the default selection is changed:
<form action="">
<select name="list" onChange="printResult();">
<option value="1"> Option 1</option>
<option value="2" selected> Option 2</option>
<option value="3"> Option 3</option>
</select>
</form>
I would like the form to submit the option that is selected as default when the page loads, as well as when another option is selected. All tutorials I can find only cover onchange, rather than what I want.
Is this possible?
if you want to call a function on page load do this:
<body onload="printResult();">
<form action="">
<select name="list" onChange="printResult();">
<option value="1"> Option 1</option>
<option value="2" selected> Option 2</option>
<option value="3"> Option 3</option>
</select>
</form>
</body>
or in jquery you can postpone the load function anywhere in the page :
$(window).on("load",function(){ printResult(); })
or on document ready:
$(document).ready(function(){printResult();})
console.log($('select[name="Units[]"] option:not(:first:selected)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
</select>
As you can see I don't want to display value 1 and selected value in the console but my program is not working according to my expectation How can I solve this issue?
What I understood from the question is that you don't want to display first option and selected option.
You can't use two selector like that. Instead you need to use it like this
console.log($('select[name="Units[]"] option:not(:selected):not(:first)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
<option value="4" >Example4</option>
</select>
If you only want the selected values, you can get it like this
console.log($('select[name="Units[]"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
<option value="4" >Example4</option>
</select>
I have two forms on the same page. I want to enable/disable a form element based on the drop down value selected on the first form.
On the first drop down When option 1 selected or <option value="">Select</option> I want to disable the second dropdown from the first form or <select name="tractor" ..> and everything on 2nd Form form.
if from <select name="tire">: Rear Tire or Front Tire selected but Nothing selected in the second dropdown i want to enable <select name="tractor"> and keep 2nd Form disable.
1st Form
<form method="post">
<select name="tire">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select>
<select name="tractor">
<option value="">select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit" value="Go" name="cmd_submit" />
2nd Form // want to be disabled when page loads
<form method="post" id="vehicle" action="page.php">
.
.
.
</form>
Simply check the value of the first dropdown. I added some classes to the dropdowns first and second:
<h3> First form </h3>
<form method="post" class="firstform">
<select name="tire" class="first">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select>
<select name="tractor" class="second" disabled>
<option value="">select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit" value="Go" name="cmd_submit" />
</form>
<h3> Second form </h3>
<form method="post" id="vehicle" action="page.php" class="secondform">
<label>A form with no fields is useless: </label>
<input type="text" placeholder="so here a field" class="secondformfield" /> <br />
<label>This is a dropdown: </label>
<select name="tractor" class="secondformfield">
<option value="">...</option>
<option value="2wd">With an option</option>
<option value="mfwd">And another option</option>
</select> <br />
<textarea class="secondformfield">some text</textarea>
<input type="button" value="And away!" name="cmd_away" class="secondformfield"/>
</form>
And the Js
$(document).ready(function(){
$(".secondform .secondformfield").prop("disabled",true);
$(".first").change(function(){
if($(this).val() !== ""){
$(".second").prop("disabled",false);
}
else{
$(".second").prop("disabled",true);
}
checkIfEverythingIsFilledIn();
});
$(".second").change(function(){
checkIfEverythingIsFilledIn();
});
function checkIfEverythingIsFilledIn(){
if($(".first").val() !== "" && $(".second").val() !== ""){
$(".secondform .secondformfield").prop("disabled",false);
$(".secondform").attr("method","post").attr("action","page.php");
}
else{
$(".secondform .secondformfield").prop("disabled",true);
$(".secondform").removeAttr("method").removeAttr("action");
}
}
});
For preventing the submit of the form there are multiple solutions. The submitbutton will be disabled automatically because it is also of type input. Another option is to remove/add the attributes of the form like I did above and in a JsFiddle
Edit: Updated js code by a good advise of #WorldFS
I am looking for a way to change my selected value on a select box, but based on 2 attributes for example:
<select id="user_select">
<option value="1" value2="1">John</option>
<option value="2" value2="1">Jonas</option>
<option value="1" value2="2">George</option>
<option value="3" value2="1">Carl</option>
</select>
For example i want to set George as the selected value, normal $('#user_select').val(1) won't work as it it will cause confusion between John and George.
Thanks in Advance
One option is to select by value and value2
$('[value="1"][value2="2"]').attr('selected',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="user_select">
<option value="1" value2="1">John</option>
<option value="2" value2="1">Jonas</option>
<option value="1" value2="2">George</option>
<option value="3" value2="1">Carl</option>
</select>