I am trying to make a function that sets a cookie to a true/false value depending on if a checkbox has been clicked or not. I can then use this value when the page loads to render the checkbox as toggled.
HTML:
<form name="example">
<div class="checklist-item">
<label for="example">Example</label>
<input type="checkbox" id="example" name="example">
</div>
</form>
JS:
document.getElementById("example").addEventListener("click", exampleCookie)
function exampleCookie() {
document.cookie = "exampleCookie";
}
How might I use the function exampleCookie to be equal to the value of the checkbox?
sorry, i give you a referrence from here https://www.javatpoint.com/javascript-cookies
maybe it helps
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="color" onchange="display()">
<option value="Select Color">Select Color</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>
<script type="text/javascript">
function display()
{
var value = document.getElementById("color").value;
if (value != "Select Color")
{
document.bgColor = value;
document.cookie = "color=" + value;
}
}
window.onload = function ()
{
if (document.cookie.length != 0)
{
var array = document.cookie.split("=");
document.getElementById("color").value = array[1];
document.bgColor = array[1];
}
}
</script>
</body>
</html>
Related
The button should be clicked automatically when amount is >0 and dropdown is selected
<html>
<head>
<script>
document.getElementById("changeLanguage").onchange = function() {
if (inputtxt.value.length == 0) {
$('#bt').trigger('click');
}
};
</script>
</head>
<body>
<label for="fname">Amount</label><input type="number" id="amt" name="amt">
<select onchange="changeLanguage(this.value)">
<option value="Choose" selected="selected">Choose</option>
<option value="IT">Italian</option>
<option value="FR">France</option>
</select>
<button type="button" id="bt">Click Me!</button>
</body>
</html>
I have tried using above code, but didn't work.
If amount means value then you should compare inputtxt.value > 0 in if condition.
document.getElementById("changeLanguage").onchange = function() {
if (inputtxt.value > 0) {
$('#bt').trigger('click');
}
};
You have a few places to adjust.
First you should see the error message
Uncaught TypeError: Cannot set properties of null (setting 'onchange')
This is because you didn't set your select element id attribute.
So replace
<select onchange="changeLanguage(this.value)">
with
<select id="changeLanguage" onchange="changeLanguage(this.value)">
In addition, if you already have jquery, it is recommended not to use inline event, and there is actually no changeLanguage method.
So replace
<select id="changeLanguage" onchange="changeLanguage(this.value)">
with
<select id="changeLanguage">
When you make adjustments, you will find that the change event is listening, but you should see an error message
Uncaught ReferenceError: inputtxt is not defined
This is because you didn't declare the inputtxt variable.
So please add this line
const inputtxt = document.getElementById('amt').value;
The complete code is shown below
document.getElementById('changeLanguage').onchange = function() {
const inputtxt = document.getElementById('amt').value;
if (inputtxt.length == 0) {
$('#bt').trigger('click');
}
};
But I observed that you have used jquery, you can refer to the following code.
$('#changeLanguage').on('change', () => {
if ($('#amt').val().length == 0) {
$('#bt').trigger('click');
}
});
e.g.
$('#changeLanguage').on('change', () => {
if ($('#amt').val().length == 0) {
$('#bt').trigger('click');
}
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label for="fname">Amount</label>
<input type="number" id="amt" name="amt">
<select id="changeLanguage">
<option value="Choose" selected="selected">Choose</option>
<option value="IT">Italian</option>
<option value="FR">France</option>
</select>
<button type="button" id="bt">Click Me!</button>
</body>
</html>
i think you can just trigger the function instead of the click action
document.getElementById("changeLanguage").addEventListener(
'change',
function(e) {
if (e.currentTarget.value.length === 0) {
submit()
}
)
)
<body>
<label for="fname">Amount</label>
<input type="number" id="amt" name="amt">
<select id="changeLanguage">
<option value="Choose" selected="selected">Choose</option>
<option value="IT">Italian</option>
<option value="FR">France</option>
</select>
<button type="button" id="bt" onclick="submit()">Click Me!</button>
</body>
I wanna create select drop down list where selected value will be depends on input value. Example:
If i write 0 in <input type='text' name='answer' id="ans" oninput="myFunction();"> than will be selected dynamically value NO.
<select id="abcd">
<option value="1">OK</option>
<option value="0">NO</option>
</select>
My attempts
function myFunction() {
var x = document.getElementById('ocena7');
if (x == 0)
{
document.getElementById("abcd").selectedIndex = 2;
}}
Greetings
The problem is that with var x = document.getElementById('ans'); you get the DOM element not the value of it.
You need to replace that with: var x = document.getElementById('ans').value;
Just look at this answer: https://stackoverflow.com/a/1085810/826211
And for your code:
You want to use
var x = document.getElementById('ocena7').value;
if you want the value of the element. Now you're just getting a reference to the element with
var x = document.getElementById('ocena7');
This may help
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById('ans').value;
if (x == 0)
{
document.getElementById("abcd").options[1].selected = 'selected'
}
}
</script>
</head>
<body>
<select id="abcd">
<option value="1" >OK</option>
<option value="0" >NO</option>
</select>
<input type='text' name='answer' id="ans" oninput="myFunction();">
</body>
</html>
I have one Dropdown list it has some values and other option,when i select other option it shows textbox ,i have to enter some text into it ,so i want to add that value to dropdown lilst,so how can i solve this?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
Add a button, get select value to check if it's others or pick / display the button according to it.
To add a new element, create an option and add it inside the select with x.add(option);
function CheckColors(){
var element = document.getElementById("mySelect");
var element2 = document.getElementById("color");
var element3 = document.getElementById("addColor");
if(element.value =='pick a color'|| element.value =='others'){
element2.style.display='block';
element3.style.display='block';
}
else {
element2.style.display='none';
element3.style.display='none';
}
}
function addValue(){
var textToAdd = document.getElementById("color").value;
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = textToAdd;
x.add(option);
}
https://jsfiddle.net/7woyyw4h/
Please check below code hope it will helpful for you.
<script>
$(document).ready(function(){
$('#btnAddToBegining').click(function(){
var data = $("#txtAdd").val();
$("#ddlList").prepend("<option value='0' selected='selected'>"+ data +" </option>");
});
$('#btnAddToEnd').click(function(){
var data = $("#txtAdd").val();
$("<option value='6'>" + data +"</option>").appendTo("#ddlList");
});
});
</script>
<select id="ddlList">
<option value="1">ASP.NET</option>
<option value="2">C#</option>
<option value="3">VB.NET</option>
<option value="4">HTML</option>
<option value="5">jQuery</option>
</select>
<input type="text" id="txtAdd" />
<br/><br/>
<input type="button" id="btnAddToBegining" Value="Add Item to Begining" />
<input type="button" id="btnAddToEnd" Value="Add Item to End" />
I want to store a string locally so when the user reloads the page it saves what was last there.
I looked at this and tried to implement it.
I had this code which basicllay has a button and a dropdown list of colors to change the background.
When I close and reopen the doc I want it to be the color that I saved.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="">
<label>
<select id="color">
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#FFCC00">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#663366">Indigo</option>
<option value="#FF00FF">Violet</option>
</select>
</label>
<input type="button" onClick="inputForm()" value="change color"/>
<form>
<script language="JavaScript">
<!--
function inputForm(){
var color = document.getElementById("color");
var outputContents=color.value;
document.body.style.backgroundColor = outputContents;
}
//-->
</script>
</body>
</html>
I made this code to do that but it didn't work
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="storeColor()">
<form action="">
<label>
<select id="color">
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#FFCC00">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#663366">Indigo</option>
<option value="#FF00FF">Violet</option>
</select>
</label>
<input type="button" onClick="inputForm()" value="change color"/>
<input type="button" onClick="storeColor()" value="save color"/>
<script>
var outputContents;
function inputForm(){
var color = document.getElementById("color");
outputContents=color.value;
document.body.style.backgroundColor = outputContents;
}
function storeColor(){
// Store
localStorage.color = outputContents;
// Retrieve
document.body.style.backgroundColor = outputContents;
}
</script>
<form>
</body>
</html>
Local storage in JavaScript is uses (key, value) pairs of strings so if you wanted to save the value This is my test value. you would need to give it a key that you can get it from later, for example myTestValue.
So in code this would be
// set the value in window.localStorage
window.localStorage.setItem('myTestValue', 'This is my test value.')
// get the value from window.localStorage
window.localStorage.getItem('myTestValue')
Here is some more information: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
You code is almost complete. You only need to apply background color on window load. I added one more function applyColor:
function applyColor(color) {
color = color || localStorage.color;
document.body.style.backgroundColor = color;
// Select corresponding option in selectbox
var select = document.getElementById("color");
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].value == color) {
select.options[i].selected = true;
return;
}
}
}
applyColor();
Also note that when page is loaded we should also select the option from selectbox corresponding to currently saved color.
Demo: http://jsfiddle.net/sd2Cx/
I have a VM file with the following codes:
UPDATED:
<html>
<head>
<title>Input Form</title>
<style>
#FW{
display: none;
}
</style>
<script type="text/javascript">
function showSelect()
{
var post = document.getElementById('post');
var fwork = document.getElementById('FW');
fwork.style.display = post.selectedIndex == 1 ? 'block' : 'none';
}
function getMeThere(){
var post = document.getElementById('post');
var fwork = document.getElementById('frwork');
if( post.value.toString() == "dpost"){
document.forms["adform"].action="https://google.com" ;
document.forms["adform"].method="post" ;
}
else{
if(fwork.value.toString() == "wap"){
document.forms["adform"].action="https://mail.yahoo.com" ;
document.forms["adform"].method="post" ;
}
else {
document.forms["adform"].action="bbc.co.uk" ;
document.forms["adform"].method="post" ;
}
}
document.forms["adform"].submit() ;
}
</script>
</head>
<body>
<form name="forum" id="adform" >
<label>Payment Amount:</label>
<input type = "text" name="paymentAmount" value=""/>
<label> Reference:</label>
<input type = "text" name="Reference" value=""/><br />
<label>Choose post</label><br/>
<select name="postCode" onchange="showSelect()" id = "post">
<option value="dpost">Desktop post</option>
<option value="mpost">Mobile post</option>
</select><br/>
<div id = "FW">
<label>Choose Your Toolkit</label><br/>
<select name="frwork" id = "frwork">
<option id=""></option>
<option id="jqm">jQuery Mobile</option>
<option id = "wap">Webapp-Net</option>
<option id = "tst">a Test</option>
</select>
</div>
<input type="submit" onclick="getMeThere()"/>
</form>
</body>
The redirection doesn't work at all, and I can't seem to find the problem. please notice that the URLs are fake, because I could post the real URL due to security issues.
Typo? it would work if you changed:
document.forms[this].action
to
document.forms["adform"].action
Edit
You also have var fwork = document.getElementById('FW');then later fwork.value.toString() but FW is a DIV not the SELECT.
Change the select to <select id="frwork" name="frwork"> and read it with var fwork = document.getElementById('frwork');
Edit 2
Your fwork.value.toString() == "wap" will never be true as the only occurence of "WAP" is <option id = "wap">w-Net</option> which is not a .value.
Change the HTML to:
<select name="frwork" id = "frwork">
<option value=""></option>
<option value="jqm">jQuery Mobile</option>
<option value = "wap">Webapp-Net</option>
<option value = "tst">a Test</option>
</select>
And to read the selected value replace:
if (fwork.value.toString() == "wap") {
with:
if (fwork.options[fwork.selectedIndex].value == "wap") {