how to enable a href in javascript

how to enable a href in javascript - javascript

I have a form, like this:
<form action="" method="get">
<select>
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
New Page
</form>
and I want to enable the href only if the option value is not "-".
Can you help me, please?
Thanks,

Here is your code:
checkSelect = function ()
{
var mySelect = document.getElementById("mySelect");
return mySelect.options[mySelect.selectedIndex].text !== "-";
}
<form action="" method="get">
<select id="mySelect">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
New Page
</form>

What you want is to add an onChange event to the select, And then when the change function is called you can do a check to see whether you would like to change your page with this value, See code below for example
<form action="" method="get">
<select onchange="getValue(this);">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
</form>
<script>
function onChange(sel){
if(sel.value != "-"){
document.location.href = newUrl;
}
}
</script>

It should look like this with the onChange event, +1 to david
<form action="" method="get">
<select id="sel" onchange="myFunction()">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
<a id="link">New Page</a>
then myFunction should look like this
if(document.getElementById("sel").value != "-"){
document.getElementById("link").href = "your link here";
}
else{
document.getElementById("link").href = "#";
}

Here is working code
$(function() {
$("select").change(function() {
if ($("select option:selected").val() != "0") {
$("a").attr("onclick", "javascript:return true;")
} else {
$("a").attr("onclick", "javascript:return false;")
}
})
})
Here is JSFiddle code

function changeHref() {
console.log(this.value)
if (this.value == 0) {
document.getElementById("anc").href="";
} else {
document.getElementById("anc").href="page6.html";
}
}
var select = document.getElementById('sel');
select.addEventListener('change', changeHref, false);
<form action="" method="get">
<select id='sel'>
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
<a id='anc' href="" onclick="return false;">New Page</a>
</form>

Related

Conditional Submit Form Not Posting

I am trying to figure out a way to have a form submit to a different page.php depending on the selection made.
The code below works in redirecting, however its not posting the information over to the next page.
Form
<form id="form1" method="post" action="javascript:redirect();">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
</form>
Javascript:
function redirect() {
var Value = document.getElementById("man").value;
if(Value == 0)
{
location.href = "page2.php";
}
else
{
location.href = "page3.php";
}
}

This is a variant I normally use for this cases. I think it's better than redirecting via JS:
HTML:
<form id="form1" method="post">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
</form>
JS:
form1 = document.getElementById("form1");
form1.onsubmit = formSubmit;
function formSubmit() {
var manValue = document.getElementById("man").value;
if (manValue == 0) {
form1.action = "page2.php";
} else {
form1.action = "page3.php";
}
}
You just modify the form's action depending on which option was selected. Hope it helped.

Okay I sorted this one out. Changed the code to:
<form action="" method="post" onsubmit="return send(this);">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
<script type="text/javascript">
function send( frm ) {
if ( frm.man.value == "0" )
frm.action = "page2.php";
else
frm.action = "page3.php";
}
</script>

Required attribute not working for select tag by onclick button

I am trying to alert a value when a user clicks the submit button. I gave the "required" attribute to both select tag but it is not working.
I want to alert a value when a user submits a button. Can anyone tell where i went wrong?
Code:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
var ORSZ = OR + SZ;
alert(ORSZ);
}
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox" required>
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">

Here you go with a solution https://jsfiddle.net/1mydje82/1/
$('select').on('change', function(){
var required = false;
$('select').each(function(){
if($(this).val() === '')
required = true;
});
$('input[value="Submit"]').attr('disabled', required);
});
$('input[value="Submit"]').click(function(){
var OR = $("#request").val();
var SZ = $("#sites").val();
var ORSZ = OR + SZ;
alert(ORSZ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" value="Submit">
</form>
I've used jQuery. Initially your Submit button will be disabled.
Once you select both the drodown with values then only Submit button will be enabled.
Hope this will help you.

You can't rely on required attribute of <select>(because it's only work when form submits normally, and not supported in Opera anyhow).
You can make it happening like below:-
Example:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
if(OR =='' || SZ ==''){
alert('Please select values from both select-box'); return false;
}else{
var ORSZ = OR + SZ;
alert(ORSZ);
}
}
<form>
<select id="request" class="dropdownbox">
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
</form>

Button still disables if a selection is still present but input box is blank

I really need your help,
So what I am trying to accomplish, is still keeping the "Search" button enabled even if there is no text in my input box. So I guess on the key up, the code should check the select boxes for any and all selected present values, if there are none then disable continue disabling the search button.
But the problem is, I am not that brilliant enough to be able to code this properly.
Here is a pic:
Here is the HTML Markup:
window.onload = function() {
$(document).on('change', 'select', function() {
if (this.value.length > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
$(document).on('change keyup', 'input', function() {
if (this.value.length > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
</body>
</html>

Try this: https://jsfiddle.net/bb70t83u/
I removed both of your function and put inside the document ready function. I only did for the select. You can do the same for input. Let me know if you need help with it.
This is based on what I think you said. Please clarify if this isn't what you are looking.
JQuery:
$(function() {
$("select").on("change", function() {
if (this.value.length > 0) {
$('#search').prop('disabled', false)
}
else {
$('#search').prop('disabled', true)
}
});
})

Validate entire form on any user action,
window.onload = function() {
var validateForm = function() {
return $(':input').filter(function() {
return this.value === '';
}).length;
}
$(document).on('change keyup', ':input', function() {
$('#search').prop('disabled', validateForm());
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>

Try wrapping your code in a $(document).ready() function.
<script>
$(document).ready(function(){
$(document).on('change', 'select', function() {
if (this.value.length > 0 || $('input').value.lenght > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
$(document).on('change keyup', 'input', function() {
if (this.value.length > 0 || $('select').value.lenght > 0) {
$('#search').prop('disabled', false)
} else {
$('#search').prop('disabled', true)
}
});
})
</script>
<!--- Just before body tag --->
</body>
DEMO

Using Javascript to check form elements and enabling/disabling the search button

I need your help,
Using javascript, how could I add some sort of data form validation that would be two-fold:
1st Event, [OnKeyUp] attached to all of the input boxes
2nd Event, [OnChange] attached to all of the select boxes
Typical User Scenarios
If there is any data present in any of the input boxes and no selected option values then { enable the search button } else { keep the search button disabled }
If there are any selected option values who’s option value is not null and no data present in all of then { enable the search button } else { keep the search button disabled }
<!DOCTYPE html>
<html>
<head></head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>

var car=$('#car'); var fruits=$('#fruits');
var veggie=$('#veggie'); var number = $('#number');
$('select').change(function(){
validate();
});
$('input').keyup(function(){
validate();
});
function validate(){
if(($(veggie).val()!='' || $(number).val()!='') &&
$(car).val()=='' && $(fruits).val()==''){
$('#search').prop('disabled',false);
}else if($(veggie).val()=='' && $(number).val()=='' &&
($(car).val()!='' || $(fruits).val()!='')){
$('#search').prop('disabled',false);
}else{
$('#search').prop('disabled',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>

I'm not 100% sure, but it looks like you want to enable the button if only one of the select elements has a value or one of the input elements has a value, but not if both (or neither) do.
If that's the case then this should work, and it allows you you add as many elements to it as you need by adding IDs to the arrays at the top.
https://jsfiddle.net/j7by6bsz/
var selectInputIds = ['fruits', 'car'];
var textInputIds = ['veggie', 'number'];
function setButtonState() {
var hasVal = function(arr) {
for(var i = 0; i < arr.length; i++) {
if(document.getElementById(arr[i]).value) {
return true;
}
}
return false;
};
var hasSelectValue = function () {
return hasVal(selectInputIds);
}
var hasTextValue = function () {
return hasVal(textInputIds);
}
var theButton = document.getElementById('search');
var s = hasSelectValue();
var t = hasTextValue();
theButton.disabled = ((s && t) || (!t && !s)); // you can do this bit smarter, but this is explicit
}
(function attachStuff (arr, evt) {
function listenIn(arr, evt) {
for(var i = 0; i < arr.length; i++) {
document.getElementById(arr[i]).addEventListener(evt, setButtonState);
}
}
listenIn(selectInputIds, 'change');
listenIn(textInputIds, 'keyup');
}())
Your requirements could use some clarification around what happens if both input types have values though.

Javascript code is not working

How can I amend the code so that when I select a option from the first drop down menu the second drop down menu becomes editable otherwise the second drop-down menu should be read only, and if the option in the first drop down menu is "default" then the second drop down menu should be read only.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onload="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>

Look at the capitals:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">
The first is with "M" and the seccond with "m"

You have misspelled MySelection with mySelection
In the JS you have document.getElementById("MySelection") // notice the uppercase M
and in the HTML you have id="mySelection"
Also set the second select to false when the window loads and add a onChange event to the first select that will set the second event to enabled/true... it this what you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("mySelection").disabled = true;
};
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>
You may want to set the second select back to disabled if the user selects 'default' in the first menu after changing the value

JavaScript selectors are case sensitive. Your mistake is at mySelection id:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">

You must use that inside body tag .
fiddle
<head>
</head>
<body onload="mySecondFunction()">
<form action="">
<select name="cars" >
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
<script type="text/javascript">
function mySecondFunction() {
alert("aaa");
document.getElementById("mySelection").disabled = false;
}
</script>
</html>

As others pointed out you mispelled the id of the second <select> but also you used the wrong event, onchange is what you want instead of onload.
function mySecondFunction() {
document.getElementById('mySelection').disabled = false;
}
<form action="">
<select name="cars" onchange="mySecondFunction();">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
But consider using jQuery and attach your events in javascript instead of having them stored in html.

Try this:
Replace
document.getElementById("mySelection").disabled = false;
with this
document.getElementById("mySelection").removeAttribute('disabled');
Also, you may want to change
onload="mySecondFunction()"
with this:
onchange="mySecondFunction()"
Hope this helps.

Change onload to onchange.
<select name="cars" onchange="mySecondFunction();">

if you want to remove the disable in a specific value like (Saab)
See fiddle
note: put the script in b4 the head tag
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "saab")
{
document.getElementById("mySelection").disabled = false;
}else {
document.getElementById("mySelection").disabled = true;
}
}
<form action="">
<select id="1" name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
UPDATE
See fiddle
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "default")
{
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}

Develop Reference

JavaScript is the programming language of the Web.

how to enable a href in javascript - javascript

Here is working code $(function() { $("select").change(function() { if ($("select option:selected").val() != "0") { $("a").attr("onclick", "javascript:return true;") } else { $("a").attr("onclick", "javascript:return false;") } }) }) Here is JSFiddle code

Related

Conditional Submit Form Not Posting

Required attribute not working for select tag by onclick button

Button still disables if a selection is still present but input box is blank

Using Javascript to check form elements and enabling/disabling the search button

Javascript code is not working

Categories

Resources