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>
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");
});
});
Is it possible to make the options redirect to a website url?
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Basically how would i combine the code above and the code below?
Google
Thanks
https://jsfiddle.net/kokb207o/
You can use Javascript to accomplish this feat, by changing the href of your element as follows:
HTML
<select id="browsers" onblur='changeHref()'>
<option value="google">Google</option>
<option value="youtube">Youtube</option>
<option value="facebook">Facebook</option>
<option value="instagram">Instagram</option>
<option value="twitter">Twitter</option>
</select>
<a href='javascript: void(0)' id='url' target='_blank'>Click Me!</a>
Javascript
function changeHref() {
document.getElementById('url').href = 'http://www.' + document.getElementById('browsers').value + '.com';
}
Try this snippet. For some reason websites like google.com is not redirecting due to security reasons. But first link working
function redirect(goto) {
if (goto != '') {
window.location = goto;
}
}
var selectEl = document.getElementById('redirectSelect');
selectEl.onchange = function() {
var goto = this.value;
redirect(goto);
};
<select id="redirectSelect">
<option value="">Please select</option>
<option value="https://www.codeconquest.com/what-is-coding/
">Code Conquest</option>
<option value="https://www.google.com">Google</option>
</select>
I have three dropdowns:-
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<label>1st</label>
<select ng-model="a.value[0]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>2nd</label>
<select ng-model="a.value[1]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>3rd</label>
<select ng-model="a.value[2]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
Controller code:-
$scope.a.value = [];
$scope.func = function () {
if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
scope.notify("error", "Please set unique values");
}
};
What I want is that it should not saved if the values in the dropdowns are not unique. What validations should I apply and where?
What you have made looks like an initiative way to identify duplicate values using lodash. Theoretically your implementation should work. Did you try ?
Ideally you should check for the duplicates values when the user tries to select the value for better user experience. One way of doing that is you can remove the values selected in the 1st dropdown in the subsequent dropdowns and so on.
in your js add:-
$scope.allModels = {
firstDD: 'One',
secondDD: 'Two',
thirdDD: 'Three'
}
and then in your html to all Dropdowns use
<select ng-model="$scope.allModels.firstDD">
<select ng-model="$scope.allModels.secondDD">
<select ng-model="$scope.allModels.thirdDD">
eventiually in save function look for them
$scope.save = function(){
if($scope.allModels.firstDD != $scope.allModels.secondDD != $scope.allModels.thirdDD){
//do the thing you want or post it to server
}
}
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>