I dont understand why the button will not become active after it is enabled with the check box. I have got it to work without disabling the submit button but then it works independent of the checkbox being checked
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-
scalable=0, width=device-width;">
<title>Welcome to Tiffany & Co.</title>
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!--Enable media queries in some unsupported subrowsers-->
<script type="text/javascript" src="css3-mediaqueries.js"></script>
<script type="text/javascript" src="main.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<script>
function submitAction()
{
var link = document.location.href;
var searchString = "redirect=";
var equalIndex = link.indexOf(searchString);
var redirectUrl = "";
if (document.forms[0].action == "")
{
var url = window.location.href;
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i=0;i<pairs.length;i++)
{
var pos = pairs[i].indexOf('=');
if(pos == -1) continue;
var argname = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
args[argname] = unescape(value);
}
document.forms[0].action = args.switch_url;
}
if(equalIndex >= 0)
{
equalIndex += searchString.length;
redirectUrl = "";
redirectUrl += link.substring(equalIndex);
}
if(redirectUrl.length > 255)
redirectUrl = redirectUrl.substring(0,255);
document.forms[0].redirect_url.value = redirectUrl;
document.forms[0].buttonClicked.value = 4;
document.forms[0].submit();
}
function reject()
{
alert("You will not be able to access the system!");
}
function loadAction() {
var url = window.location.href;
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos);
var value = pairs[i].substring(pos + 1);
args[argname] = unescape(value);
}
document.forms[0].action = args.switch_url;
}
</script>
<form method="post">
<input TYPE="hidden" NAME="buttonClicked" SIZE="16" MAXLENGTH="15" value="0">
<input TYPE="hidden" NAME="redirect_url" SIZE="255" MAXLENGTH="255" VALUE="">
<input TYPE="hidden" NAME="err_flag" SIZE="16" MAXLENGTH="15" value="0">
<h1>Welcome to Tiffany & Co.</h1>
<p id="desc">We're delighted to offer our customers complimentary Wi-Fi
while shopping in our store.</p>
<form>
<p id="terms">
<input id="termsCheckbox" type="checkbox"
onclick="this.form.submit.disabled = !this.checked"/> I have read and agreed to the Terms of Use
</p>
<p id="error">
Please agree to the Terms of Use by checking the box.
</p>
<p class="connect">
<input id="connect" type="button" name="submit" value="Accept"
class="button" disabled="disabled" onclick="submitAction();">
</p>
</form>
<div id="logo">
<img src="logo.png" width="108" height="14" alt="Tiffany & Co."
/>
</div>
</div>
</body>
</html>
Your code works fine, it's a mess, but it works. The issue is this:
Uncaught ReferenceError: submitAction is not defined
The cause of the issue is that you don't have a closing brace on submitAction()
Here's a working demo. I've also cleaned up your code!
Properly formatting and indenting your code is very important. Not only does it look good and makes it easier to read, you will easily spot mismatched/missing braces.
Try with this
$(function(){
$('#termsCheckbox').change(function(){
$('#connect').prop('disabled', !this.checked);
}
});
Related
I'm new to JS and I'm just practicing. I have this form that sets data in an object which is later displayed on the DOM. It works but it just shows a "key" at a time. If I add new elements they replace the existing one.
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML = newIt.namee + " " + newIt.surnamee
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
I've tried the push() method but it works with arrays. I've also tried to create an object instead of a class but I get the same grief
Thank you in advance
Maybe you looking for this:
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML += `<p>` + newIt.namee + " " + newIt.surnamee + `</p>`;
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
let html = `${document.getElementById('box').innerHTML}<p>${newIt.namee} ${newIt.surnamee}</p>`
document.getElementById('box').innerHTML = html
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
Hope it help :)
or you can use this
https://www.w3schools.com/jsref/met_node_appendchild.asp
any stored value can be wrapped in a div tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
<script>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
const row = document.createElement('div');
row.innerText = newIt.namee + " " + newIt.surnamee;
document.getElementById('box').appendChild(row);
}
</script>
I've got a very simple form and I'm want the values to empty when I submit in order to use again without refreshing the page. What I've got isn't working for some reason.
My initial idea was to set the values of the inputs to empty strings on form submit, but when I log them into the console they don't do that. Anyone know what I'm doing wrong here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="form">
<input id="volume" type="text" />
<input id="denied" type="text" />
<input id="charges" type="number" step="any" />
<button id="submit" type="btn-submit">Submit</button>
</form>
<div class="results">
<p class="rate">Current Denial Rate: </p>
<p class="recoverable">Recoverable Dollars: </p>
</div>
<script src="script.js"></script>
</body>
</html>
let form = document.getElementById("form");
let volume = document.getElementById("volume");
let denied = document.getElementById("denied");
let charges = document.getElementById("charges");
let submit = document.getElementById("btn-submit");
let results = document.querySelector(".results");
let rate = document.querySelector(".rate");
let recoverable = document.querySelector(".recoverable");
form.onsubmit = function (e) {
e.preventDefault();
volume = volume.value;
denied = denied.value;
charges = charges.value;
let curDenialRate = parseFloat((denied / volume) * 100);
charges = parseFloat(charges * 0.4);
function formatNumber(num) {
let formattedNum = num.toFixed(2);
return formattedNum;
}
let recoverableDollars = "$" + formatNumber(charges);
curDenialRate = formatNumber(curDenialRate) + "%";
rate.append(curDenialRate);
recoverable.append(recoverableDollars);
volume = " ";
denied = " ";
charges = " ";
return false;
};
Use HTMLFormElement.reset():
let form = document.getElementById("form");
const volume = document.getElementById("volume");
const denied = document.getElementById("denied");
const charges = document.getElementById("charges");
let submit = document.getElementById("btn-submit");
let results = document.querySelector(".results");
let rate = document.querySelector(".rate");
let recoverable = document.querySelector(".recoverable");
form.onsubmit = function(e) {
e.preventDefault();
let a = volume.value;
let b = denied.value;
let c = charges.value;
let curDenialRate = parseFloat((b / a) * 100);
c = parseFloat(c * 0.4);
function formatNumber(num) {
let formattedNum = num.toFixed(2);
return formattedNum;
}
let recoverableDollars = "$" + formatNumber(c);
curDenialRate = formatNumber(curDenialRate) + "%";
rate.append(curDenialRate);
recoverable.append(recoverableDollars);
form.reset();
return false;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="form">
<input id="volume" type="text" />
<input id="denied" type="text" />
<input id="charges" type="number" step="any" />
<button id="submit" type="btn-submit">Submit</button>
</form>
<div class="results">
<p class="rate">Current Denial Rate: </p>
<p class="recoverable">Recoverable Dollars: </p>
</div>
<script src="script.js"></script>
</body>
</html>
How you are clearing values will not work. You are trying to change the variable but that will not affect the DOM element or its value.
You will have to use the below code with value property to change the value.
document.getElementById("volume").value= " ";
document.getElementById("denied").value= " ";
document.getElementById("charges").value= " ";
I need to make a simple project in javascript, we need to create a single library with javascript objects and let the user to add new books. I requested user data with a form tag in html and created new objects and I stored them inside a single array called library. The books are showed with no problem in the DOM the thing is that I need a button that deletes an specific book, I created a single button but it only deletes the first book in the array. I hope you can help me.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css" />
<title>Document</title>
</head>
<body>
<h1>My Library</h1>
<input id="title" type="text" placeholder="Book Title">
<input id="author" type="text" placeholder="Book Author">
<input id="date" type="text" placeholder="Publish Date">
<select id="read" name="read">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="button" value="New Book" onclick="add_book()">
<div id="display"></div>
<script src="app.js"></script>
</body>
</html>
------------------------------------------------------------------------------------------------
JAVASCRIPT:
var library = [];
var title_input = document.getElementById("title");
var author_input = document.getElementById("author");
var date_input = document.getElementById("date");
var read_input = document.getElementById("read");
function Book(title, author, date, read) {
this.title = title;
this.author = author;
this.date = date
this.read = read
};
function add_book() {
var newBook = new Book(title_input, author_input, date_input, read_input)
library.push(`Title: ${newBook.title.value} <br>`+`Author: ${newBook.author.value} <br>`+
`Realease date: ${newBook.date.value} <br>`+`Readed: ${newBook.read.value} <br>` )
show_library();
};
function delete_book(arr, elem){
index = arr.indexOf(elem);
arr.splice(elem,1);
show_library();
}
function show_library() {
document.getElementById("display").innerHTML = "";
for(i = 0; i<library.length; i++){
document.getElementById("display").innerHTML += library[i]+
'<button onclick="delete_book(library, library[i]);">Delete</button><br>';
}
};
You've written library[i] as plain text into the DOM. This doesn't references the variable i from your loop.
You can simply write the index as argument and use this directly in your function delete_book.
var library = [];
var title_input = document.getElementById("title");
var author_input = document.getElementById("author");
var date_input = document.getElementById("date");
var read_input = document.getElementById("read");
function Book(title, author, date, read) {
this.title = title;
this.author = author;
this.date = date
this.read = read
};
function add_book() {
var newBook = new Book(title_input, author_input, date_input, read_input)
library.push(`Title: ${newBook.title.value} <br>`+`Author: ${newBook.author.value} <br>`+
`Realease date: ${newBook.date.value} <br>`+`Readed: ${newBook.read.value} <br>` )
show_library();
};
function delete_book(arr, index){
arr.splice(index, 1);
show_library();
}
function show_library() {
document.getElementById("display").innerHTML = "";
for(i = 0; i<library.length; i++){
document.getElementById("display").innerHTML += library[i]+
`<button onclick="delete_book(library, ${i});">Delete</button><br>`;
}
};
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css" />
<title>Document</title>
</head>
<body>
<h1>My Library</h1>
<input id="title" type="text" placeholder="Book Title">
<input id="author" type="text" placeholder="Book Author">
<input id="date" type="text" placeholder="Publish Date">
<select id="read" name="read">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="button" value="New Book" onclick="add_book()">
<div id="display"></div>
<script src="app.js"></script>
</body>
</html>
My code error is pretty obvious but I can´t see it.
It's very simple my form ask the height and weight and calculate the corporal mass index the user input height in meters and convert to inches (function works ok)
input kilos and convert to pounds (works ok too) but in this process must calculate the index and write it in another textbox. that's my problem!
What am I doing wrong??? heres my code:
function myFunctionmts() {
var x = document.getElementById("mters");
var y = document.getElementById("inches");
y.value = ((x.value*100)/2.54).toFixed(2);
document.getElementById("mters").value=x.value;
document.getElementById("inches").value=y.value;
}
</script>
<script>
function myFunctionkg() {
var i = document.getElementById("imc");
var p = document.getElementById("inches");
var x = document.getElementById("kilos");
var z = document.getElementById("pounds");
var step1 = 0;
var step2 = 0;
var step3 = 0;
z.value = (x.value/.454).toFixed(2);
libras.value=z.value;
document.getElementById("pounds").value=z.value;
step1.value = z.value*703;
step2.value = step1.value/p.value;
step3.value = (step2.value/p.value).toFixed(1);
document.getElementById("imc").value=step3.value
}
<form method="POST" action="#">
<input type="text" name="mters" id="mters" required onchange="myFunctionmts()">
<input type="text" name="inches" id="inches" placeholder="Inches" readonly>
<input type="text" name="kilos" id="kilos" required onchange="myFunctionkg()">
<input type="text" name="pounds" id="pounds" placeholder="Pounds" readonly>
<input type="text" name="imc" id="imc" readonly>
<input type="submit" value="Save">
</form>
Try to use this code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack Overflow</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form method="POST" action="#">
<label for="mters">meter</label>
<input
type="text"
name="mters"
id="mters"
required
onchange="myFunctionmts()"
/>
<label for="inches">inches</label>
<input
type="text"
name="inches"
id="inches"
placeholder="Inches"
readonly
/>
<label for="kilos">kilos</label>
<input
type="text"
name="kilos"
id="kilos"
required
onchange="myFunctionkg()"
/>
<label for="pounds">pounds</label>
<input
type="text"
name="pounds"
id="pounds"
placeholder="Pounds"
readonly
/>
<label for="imc">imc</label>
<input type="text" name="imc" id="imc" readonly />
<input type="submit" value="Save" />
</form>
<script src="script.js"></script>
</body>
</html>
JS:
function myFunctionmts() {
var x = document.getElementById('mters');
var y = document.getElementById('inches');
y.value = ((x.value * 100) / 2.54).toFixed(2);
document.getElementById('mters').value = x.value;
document.getElementById('inches').value = y.value;
}
function myFunctionkg() {
var imc = document.getElementById('imc'); // mass index
var inches = document.getElementById('inches'); //
var kilos = document.getElementById('kilos');
var pounds = document.getElementById('pounds'); // pounds
var step1 = 0;
var step2 = 0;
var step3 = 0;
pounds.value = (+kilos.value / 0.454).toFixed(2);
// undefined error here, what is this libras all about ???
// libras.value = z.value;
step1 = +pounds.value * 703;
step2 = +step1 / +inches.value;
step3 = (+step2 / +inches.value).toFixed(1);
console.log(step3);
imc.value = step3;
}
Hope it helps.
I am making a web app that takes JavaScript vars and puts them into a math problem. The script is
<HTML>
<head>
<meta name="viewport" content="initial-scale=2, user-scalable=no">
<meta name= apple-mobile-web-app-capable content= yes />
<meta name= apple-mobile-web-app-status-bar-style content= black />
<link rel="apple-touch-icon" href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-SD-Iphone.png" />
<link rel="apple-touch-icon" sizes= 114x114 href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-HD-Iphone.png" />
<link rel="apple-touch-icon" sizes= 72x72 href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-SD-Ipad.png" />
<link rel="apple-touch-icon" sizes= 144x144 href="https://dl.dropboxusercontent.com/u/11681462/untitled%20folder/Icon/Icon-HD-Ipad.png" />
<Title> Diabetes Cal </Title>
<script>
function valuechanged() {
var a = document.getElementById('textA').value;
var b = document.getElementById('textB').value;
var t = document.getElementById('textX').value;
var y = document.getElementById('textY').value;
var z = document.getElementById('textZ').value;
var dec = t * 0.1;
var x = parseFloat(dec).toFixed(1);
if (+x - +y < 0) {
var c = 0;
}
else
{
c = +x - +y;
}
if (c < 0) {
var l = 0;
}
else
{
var l = c / z;
}
var d = parseFloat(l).toFixed(2);
if (a / b < 0)
{
var u = 0;
}
else
{
var u = a / b;
}
var e = parseFloat(u).toFixed(2);
document.getElementById('labelS').innerHTML = e;
document.getElementById('labelG').innerHTML = d;
document.getElementById('labelX').innerHTML =
document.getElementById('labelJ').innerHTML = +d + +e;
}
function myFunction(){
var TS=document.getElementById('textB')
var date= new Date();
var time = date.getHours();
if (time<10)
{
CR = "8";
}
else if (time<16)
{
CR = "10";
}
else if (time<20)
{
CR = "5";
}
else
{
CR = "8";
}
TS.value= CR
}
</script>
</head>
<body BGColor=orange onload="valuechanged();myFunction();" > <center><br> Bolus Wizard <br>
<div>
Bg (without Decimal)<br>
<input type="text" pattern=\d* id="textX" min="25" max="333" value="25" onchange="valuechanged();" /><br><label ID="labelX">-----</label> mmol/L<br>
</div><hr width=45% color=black size=0.5>
<div>
Carbs<br> <input type="text" pattern=\d* ID="textA" max=300 value="0" onchange="valuechanged();" /><br>
</div><hr width=45% color=black size=0.5>
<div>
Carb Ratio<br><input type="text" pattern=\d* ID="textB" value="" onchange="valuechanged();" />
</div>
<div>
Target<br><input type="text" pattern=\d* ID="textY" value="6" onchange="valuechanged();" />
</div>
<div>
Correction Factor<br><input type="text" pattern=\d* ID="textZ" value="2" onchange="valuechanged();" />
</div>
<div>
Food<br> <label ID="labelS"> ---</label> Units
</div>
<p>
<div>
Correction<br> <label ID="labelG"> ---</label> Units
</div>
<p>
<div>
You Need...<br> <label ID="labelJ"> --- </label> Units
</div>
<p>
</center>
</body>
</HTML>
I was hoping that someone could help me make a settings page for textB TextY and TextZ. It would need to be on a different page. This web app is being designed for the Iphone and iPad. Also if there is anyway to make the variables change for var CR to a settings (like a text box saying 8am, and another saying 10am) and it saving on the device, could you include it as an answer. Thanks, you would really help alot.