Stupid question no doubt but driving me mad!
Django template html but really a jquery question.
The following line checks a checkbox on my page....
$(id_exam_choices_1).prop('checked', true);
Fine no problem.
I want to create the same using a variable...
value = 1;
var thename = 'id_exam_choices_' + value;
alert(thename);
The alert shows the string is correct ....
How do I feed the variable into a command...??
$(thename).prop('checked', true);
I hope this is enough info - it seems straightforward but ....
Thanks.
Im not sure that I got your question correctly. If you are trying to check a checkbox depending on its number which is decided by value variable number then I would propose this solution. i.e if value=3 then checkbox with id= id_exam_choices_3 will be checked and so on.
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var value = 3;
var thename = "id_exam_choices_" + value;
$("body").find('#' + thename).prop("checked", true);
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<form method="post">
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_1" />
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_2" />
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_3" />
</form>
</body>
</html>
Related
I am trying to create a calculator that solves the Pythagoras theorem. I have created a function inside a tag in my code which takes two arguments (one for each leg length of the right-angled triangle) The function works if I just do a console.log with two numbers as arguments and the function executes properly if it is inside the script tag. But I just want to know how to take the two arguments in the text boxes and then when I press the button make the result appear on the screen.
<html>
<main>
<head>
<!--Textboxes to input lengths of legs-->
<input type = "text" required placeholder= "1st legnth">
<br> <br>
<input type = "text" required placeholder= "2nd legnth">
<br> <br>
<button type = "submit">Give me the answer.
</head>
</main>
</html>
<script>
function solveforHyp (a, b)
{
var c = a*a + b*b;
return Math.sqrt(c);
}
var final = (solveforHyp(3, 4));
console.log(final);
</script>
add a span after the button to contain the final result:
<span id="final-result"></span>
add an onclick event to your button, it might look like this:
<button type="button" onclick="onButtonSubmit()"></button>
you might also give some relevant ID's to the input like this:
<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">
and finally, write the onButtonSubmit function to access the inputs and call the solveforHyp function :
function onButtonSubmit(){
const firstValue = document.getElementById('first-length').value;
const secondValue = document.getElementById('second-length').value;
document.getElementById('final-result').innerText = solveforHyp(firstValue,secondValue); // finally, put the returned value in the created span.
}
First of all your document structure is entirely wrong, a lot of tags are not closed script is after the HTML tag, and content is written inside head tag and head is inside main, NO doctype declaration is done, and most importantly if you wanna submit something you should have a form at least with preventing its default behavior. Learn HTML before JavaScript Brother, and also its a good practice to use input type Number when you already know the input will be always a Number.
and here is the code what you are trying to make
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form id="formOne">
<input type="number" required placeholder="1st legnth" id="first">
<br> <br>
<input type="number" required placeholder="2nd legnth" id="second">
<br> <br>
<button type="submit">Give me the answer</button>
</form>
</body>
<script>
let form = document.querySelector("#formOne");
let inputOne = document.querySelector("#first");
let inputTwo = document.querySelector("#second");
form.addEventListener("submit", function(e){
e.preventDefault();
console.log(Math.sqrt(Math.pow(inputOne.value,2) + Math.pow(inputTwo.value,2)));
})
</script>
</html>
Js file function to be called
function tryMe(arg) {
document.write(arg);
}
HTML FILE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='object.js'> </script>
<title>abc</title><meta charset="utf-8"/>
</head>
<body>
<script>
tryMe('This is me vishal bhasin signing in');
</script>
</body>
</html>
You can try like this:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="form">
<input type="text" id="first_length" name="first_length" />
<input type="text" id="second_length" name="second_length" />
<input type="submit" value="Submit" />
</form>
<script>
function logSubmit(event) {
event.preventDefault();
var first_length = document.getElementById("first_length").value;
var second_length = document.getElementById("second_length").value;
var final = solveforHyp(first_length, second_length);
console.log(final);
}
const form = document.getElementById("form");
form.addEventListener("submit", logSubmit);
function solveforHyp(a, b) {
var c = a * a + b * b;
return Math.sqrt(c);
}
</script>
</body>
</html>
I have the following code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
<body>
<form onsubmit="return results();" method="post" action="results.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
</body>
</html>
Another HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<script type="text/javascript">
function results() {
var name = document.getElementbyId('name').value;
document.write(name);
}
</script>
</body>
</html>
I am trying to pass on the value 'name' and retrieve it on a different html page (results.html). How do I accomplish this? I am not sure what I am doing wrong. Please help. Thank you!
pass the variable in the url using GET like :
<form method="get" action="result.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
and retrieve it in the other page like :
<h2> Your Form Has Been Submitted </h2>
<script>
let params = (new URL(document.location)).searchParams;
let name = params.get("name");
console.log(name) // this is your variable
document.querySelector('h2').innerText += name;
</script>
One way is: you could use the 'get' method on the form, and not 'post':
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OrderUp</title>
</head>
<body>
<!-- Use method 'GET', not 'POST', to pass the form values via the url in the address bar -->
<form method="GET" action="results.html">
Name :
<input name="name" type="text">
<br>
<input value="Submit" type="submit">
</form>
</body>
</html>
Then, in result.html, use javascript to extract the name value from the page url.
result.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<span>Name Submitted: </span>
<span id="name-label"></span>
<script type="text/javascript">
// Get the value passed in the url by the form
var querystring = location.search;
// => ?name=Roger
// Remove the '?' at the beginning
var nameValuePair = querystring.replace(/^\?/, '');
// => name=Roger
// Split into parts
var parts = nameValuePair.split('=');
// The name is the second value
var name = parts[1];
// Set the name in the HTML element.
document.getElementById('name-label').innerHTML = name;
</script>
</body>
</html>
You cannot simply take a function from one html and put it into another. Using pure JavaScript and HTML the best way to accomplish this would be to make a JavaScript file, put the function there and load it on both pages. That way if you edit the function in one place, it will change in both.
The code would look like this:
Page 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
<body>
<form onsubmit="return results();" method="post" action="results.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
<script type="text/javascript" src="results.js"></script>
</body>
</html>
Page 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<script type="text/javascript" src="results.js"></script>
</body>
</html>
results.js
function results() {
var name = document.getElementbyId('name').value;
document.write(name);
}
Probably the simplest would be to append it to the url:
<script>
function goToResults() {
window.location = "results.html#" + document.getElementbyId('name').value;
}
document.getElementById("submit").onclick = goToResults;
</script>
<input id = "name" />
<button id = "submit" > Submit </ button>
And on results.html just get it from the location:
document.body.innerHTML += document.location.href.split("#")[1];
You need a way to save the information you want to share between pages. There are many options for javascript each with pros and cons
use the uri hash:
location.hash = myValue / var retrieveValue = location.hash;
use localstorage:
localStorage.setItem("key", "value"); / localStorage.getItem("key");
also document.cookie is an option, (you can look that one up as it's slightly more involved to implement with many good answes already around)
I'm just starting to learn Javascript and following a tutorial. I've copied this code verbatim but it's just not doing what it's supposed to be doing. The video is from 2015 so maybe something about the language has changed? I have no idea, any help will be appreciated, thanks
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
title.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute();" />
</body>
</html>
make it,
<input type="text" id="myTextBox">
<input type="submit" value="Click Me" onclick="substitute();">
You created a function substitute but trying to call substitut.
Variable title hasn't been defined.
You should change it to this:
myTitle.innerHTML = myValue;
I have two codes, one is form.html:
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Form</title>
<script type="text/javascript">
$(function(){
$("#sub").on("click", function(){
sessionStorage.n1 = $("#no1").val();
sessionStorage.n2 = $("#no2").val();
location.href = "main.html";
});
});
</script>
</head>
<body>
No1:<input type="text" id="no1">
No2:<input type="text" id="no2">
<br>
<input type="button" value="Submit" id="sub">
</body>
</html>
and the other is main.html:
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Main</title>
<script type="text/javascript">
var n1_arr = new Array();
var n2_arr = new Array();
$(function(){
n1_arr.push(sessionStorage.getItem("n1"));
n2_arr.push(sessionStorage.getItem("n2"));
$("#a").click(function(){
location.href = "form.html";
});
$("#s").click(function(){
for(var i = 0; i < n1_arr.length; i++)
{
alert(n1_arr[i] + " and " + n2_arr[i]);
}
});
});
</script>
</head>
<body>
<input type="button" value="Add" id="a">
<input type="button" value="Show" id="s">
</body>
</html>
I want these to work like this:
First, main.html will open, and on clicking on the 'Add' button, the form.html will open in the same browser tab. The user will enter two numbers in the text boxes with id's no1 and no2. The user will then click on 'Submit' and then again, main.html should open(again in the same browser tab). The user will continue to do this for as long as he wants. On clicking the 'Show' button, alerts of all the values entered by the user, separately in pairs, will occur. How can I achieve this? In this case, only the last entered pair is alerted.
first you have to run the command on console:
sessionStorage.clear();
main.html
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Main</title>
<script type="text/javascript">
var n1_arr = JSON.parse(sessionStorage.getItem("n1")) || [];
var n2_arr = JSON.parse(sessionStorage.getItem("n2")) || [];
$(function(){
$("#a").click(function(){
location.href = "form.html";
});
$("#s").click(function(){
for(var i = 0; i < n1_arr.length; i++)
{
alert(n1_arr[i] + " and " + n2_arr[i]);
}
});
});
</script>
</head>
<body>
<input type="button" value="Add" id="a">
<input type="button" value="Show" id="s">
</body>
</html>
form.html
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Form</title>
<script type="text/javascript">
$(function(){
$("#sub").on("click", function(){
var n1 = sessionStorage.n1 || [];
if(n1.length > 0){
n1 = JSON.parse(sessionStorage.n1);
}
n1.push($("#no1").val());
sessionStorage.n1 = JSON.stringify(n1);
var n2 = sessionStorage.n2 || [];
if(n2.length > 0){
n2 = JSON.parse(sessionStorage.n2);
}
n2.push($("#no2").val());
sessionStorage.n2 = JSON.stringify(n2);
location.href = "main.html";
});
});
</script>
</head>
<body>
No1:<input type="text" id="no1">
No2:<input type="text" id="no2">
<br>
<input type="button" value="Submit" id="sub">
</body>
</html>
It would appear you are overwriting your existing n1 and n2 values.
sessionStorage stores key value pairs, with the value being a string. When you do sessionStorage.setItem('n1', 'test') it will overwrite the existing value.
What you need to do is read the existing value (it will be a string), parse it, append your new value on the end, then insert the whole object back into storage. When storing an object it will be best to stringify it as JSON first.
If you need to store complex objects like arrays etc you may find it better to use indexedDB.
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="fuctions.js"></script>
<title>Count JS</title>
</head>
<body>
<fieldset>
<input type="number" value="1" id="num" min="1" max="5"/>
<button onclick="getValue()">
Submit
</button>
</fieldset>
</body>
</html>
JS:
function getValue() {
var x = parseInt(document.getElementById("num"));
alert(x);
}
I just want to print this value that I get using document.getElementById, but when I print appears it:
Can someone help?
.value returns value from input, in your case, you try convert DOMNode to Integer that will return NaN
var x = parseInt(document.getElementById("num").value);
Example
Add .value after document.getElementById
function getValue() {
var x = parseInt(document.getElementById("num").value);
alert(x);
}