I want to use a drop down list with url, when the user choose an element it will be open like a simple link, this is what I did but it's not working, I still in my current page.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header-link1").change(function() {
if ($(this).val() != '') {
window.location.href = $(this).val();
}
});
</script>
</head>
<body>
<form>
<select name="forma" id="header-link1">
<option value="Select option">
Select option
</option>
<option value="http://www.surtymar.com/fr/reglementation-internationale/">
Réglementation internationale 15
</option>
<option value="http://www.surtymar.com/fr/reglementation-union-europeenne/">
Réglementation 15
</option>
</select>
</form>
</body>
</html>
Try this:-
Use JQuery to achive this.
$(document).ready(function() {
$("#header-link1").change(function(){
if ($(this).val()!='') {
window.location.href=$(this).val();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
<select name="forma" id="header-link1" >
<option value="Select option">
Select option
</option>
<option value="http://www.surtymar.com/fr/reglementation-internationale/">
Réglementation internationale 15
</option>
<option value="http://www.surtymar.com/fr/reglementation-union-europeenne/">
Réglementation 15
</option>
</select>
</form>
Try this! Should work! It just select options value and redirect user!
<form >
<select name="forma" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="http://surtymar.com/fr/reglementation-internationale/">Réglementation internationale 15</option>
<option value="http://surtymar.com/fr/reglementation-union-europeenne/">Réglementation 15</option>
</select>
</form>
Related
I have a local server with NodeJs and on one page I have three select tags. I would like when one option in the first select tag is selected to completely remove it from the list of the other select tag. Unfortunately nothing seems to be happening. The file remove.js is in public/js (so don't think that's the problem)
html:
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script type="text/javascript" src="/js/remove.js"></script>
<select name="rank1" size="1" id="select1" >
<option value="" selected disabled hidden>Rank</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>
</select>
<select name="rank2" size="1" id="select2" >
<option value="" selected disabled hidden>Rank</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>
</select>
<select name="rank3" size="1" id="select3" >
<option value="" selected disabled hidden>Rank</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>
</select>
JavaScript remove.js:
$(document).ready(function(){
$("select").change(function(){
var selectedValue1 = $(this).val();
var selectedValue2 = $("select").not($(this)).val();
$(this).find("option[value!="+selectedValue2+"]").show();
$("select").not($(this)).find("option[value!="+selectedValue1+"]").show();
$("select").not($(this)).find("option[value="+selectedValue1+"]").hide();
});
});
Thank you in advance!
You failed to include JQuery.
Change this :
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
To :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
Change javascript write this
$(document).ready(function () {
var selected = 0
var prevSelected = 0;
$("select").change(function () {
prevSelected = selected;
selected = $(this).val();
$("select").not("#"+this.id).each(function(){
$("#"+this.id).find("[value=" + selected + "]").hide();
$("#"+this.id).find("[value=" + prevSelected + "]").show();
})
});
});
I think this might work your original code wasn't working as expected.
$(document).ready(function(){
var select1,select2,select3;
$("#select1").change(function(){
if(select1 > 0){
$("#select2").find("option[value="+select1+"]").removeAttr('disabled');
$("#select3").find("option[value="+select1+"]").removeAttr('disabled');
}
select1 = $(this).val();
$("#select2").find("option[value="+select1+"]").attr("disabled","disabled");
$("#select3").find("option[value="+select1+"]").attr("disabled","disabled");
});
$("#select2").change(function(){
if(select2 > 0){
$("#select1").find("option[value="+select2+"]").removeAttr('disabled');
$("#select3").find("option[value="+select2+"]").removeAttr('disabled');
}
select2 = $(this).val();
$("#select1").find("option[value="+select2+"]").attr("disabled","disabled");
$("#select3").find("option[value="+select2+"]").attr("disabled","disabled");
});
$("#select3").change(function(){
if(select3 > 0){
$("#select1").find("option[value="+select3+"]").removeAttr('disabled');
$("#select2").find("option[value="+select3+"]").removeAttr('disabled');
}
select3 = $(this).val();
$("#select1").find("option[value="+select3+"]").attr("disabled","disabled");
$("#select2").find("option[value="+select3+"]").attr("disabled","disabled");
});
});
Open this link in IE to exactly understand the behavior that I will be describing and seek a hack for.
I have the following select list:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
When I render this in IE, drop-down behavior of this changes compared to other browsers due to which some of the options are pushed above the selectbox while the others are pushed below (based on the selected option)
Since this is the default behavior of IE, what I am looking for is that the options should get re-ordered i.e. the option that a user selects should be made the first option. Check the image below:
Does anyone have a work-around for this ?
Also if anyone knows a hack to alter this default IE behavior, it would be great to know and learn that
Is this the right way ?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
var choose = $("#choose").bind('change',function(){alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Here is a method that works in Jquery:
HTML
<select id = "choose">
<option value="null" name="volvo">Volvo</option>
<option value="1" name="saab">Saab</option>
<option value="2" name="mercedes">Mercedes</option>
<option value="3" name="audi">Audi</option>
</select>
jQuery
var choose = $("#choose").bind('change',function(){
choose.find('option:selected').prependTo(choose);
});
(Source)
FULL CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var choose = $("#choose").bind('change', function() {
alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<html>
<head>
<script src="jquery-3.1.0.js"></script>
<script>
$(function () {
var selectedItem = $("#selectItem").bind('change', function () {
selectedItem.find('option:selected').prependTo(selectedItem);
});
});
</script>
<head>
<body>
<select id="selectItem">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</body>
</html>
Thanks... :)
I've checked a few pages online on how to disable a submit button of a dropdown box unless an option has been selected. But can't find one that works for me.
Any help on how to do that would be great!
Edit: I don't want <option value="not_valid">-- select an option --</option> to be considered as an option
<form action="action_page.php">
<select name="attacks" id="attacks">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
use onChange event
<html>
<head>
</head>
<body>
<form action="action_page.php">
<select name="attacks" id="attacks" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
<script>
function selectChanged(){
attacks = document.getElementById("attacks");
if(attacks.value =="not_valid"){//or whatever th unwanted value is
document.getElementById("battle").disabled = true;
} else{
document.getElementById("battle").disabled = false;
}
}
</script>
</body>
</html>
Given an HTML form like:
<html>
<body>
<form method="GET">
Select:
<select id="param" name="param">
<option></option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>
How can I omit the parameter entirely from the form submission if the blank option is selected?
If you wanted a pure JavaScript approach, something like this would remove the name attribute of the select element if the selected option value was empty before the form is submitted.
Just give the form element a name..
<form name="formName" method="GET"></form>
JS - EXAMPLE HERE
document.forms["formName"].addEventListener('submit', function(){
var el = this.querySelector('select[name="param"]');
if(!el.value){
el.removeAttribute('name');
}
});
Alternatively, here is a jQuery version.. not much different.
EXAMPLE HERE
$('form[name="formName"]').submit(function(e){
var el = $(this).find('select[name="param"]');
if(!el.val()){
el.removeAttr("name");
}
});
This is what I came up with (JQuery):
$("form").submit(function(e) {
if ($("#param").val() === "")
$("#param").removeAttr("name");
});
It has the advantage that it doesn't visibly change the DOM immediately after clicking submit.
Use below code, you need Jquery
<script type="text/javascript">
function checkForm()
{
var paramVal = $('#param').val();
if(paramVal == "0"){ return false;}
}
</script>
<select name="param" id="param">
<option value="0"></option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
<button type="submit" onclick="return checkForm();">Submit</button>
<script type="text/javascript">
function validate()
{
if ($("#param").val() == "")
$("#param").removeAttr("name");
}
</script>
<form action="" method="post" onsubmit="return validate()">
<select name="param" id="param">
<option value=""></option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
<button type="submit">Submit</button>
</form>
I have a form with two options and whenever the user selects the option I want it to go to a URL. Can this be done without submitting the form? If not, could you help me with the submit part?
Here's my code:
<select>
<option value="Webclient" name="">Web Client</a></option>
<option value="DownloadClient" name="">Download Client</option>
</select>
<select name="forma" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
<select id="options" onchange="optionCheck()">
<option></option>
<option value="Webclient" name="">Web Client</a></option>
<option value="DownloadClient" name="">Download Client</option>
</select>
<script type="text/javascript">
function optionCheck(){
var option = document.getElementById("options").value;
if(option == "Webclient"){
window.location = "http://yahoo.com";
}
if(option == "DownloadClient"){
window.location = "http://google.com";
}
}
</script>