I keep getting this error: {"code":"MethodNotAllowedError","message":"POST is not allowed"} when submitting my HTML form. My Javascript seems to work fine because it works when I put it inside the HTML in a script tag, but when I try to use it in its own file, I get this error on a form submit. I am launching this code from Adobe Dreamweaver and am using the realtime preview mode in Chrome/Safari. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link href="dopeStyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="" method="post" id="numberForm">
<label for="enterNumber">Enter any number to multiply it by 10: </label>
<input type="number" id="enterNumber"><br>
<input type="submit"><br>
<label for="result">Result: </label>
<input type="number" id="result">
</form>
</body>
<script src="trippyJavascript.js"></script>
</html>
& here is the Javascript:
function calculate()
{
'use strict';
var numInput = document.getElementById('enterNumber').value;
numInput*= 10;
document.getElementById('result').value = numInput;
return false;
}
function init()
{
'use strict';
document.getElementByID('numberForm').onsubmit = calculate;
}
window.onload = init;
Hi i have tested you code.The mistake is 'document.getElementById' in this way not 'document.getElementByID'.
function calculate()
{
'use strict';
var numInput = document.getElementById('enterNumber').value;
numInput*= 10;
document.getElementById('result').value = numInput;
return false;
}
function init()
{
'use strict';
document.getElementById('numberForm').onsubmit = calculate;
}
window.onload = init;
Related
I'm trying to create an simple web page to test the crypto module in js, but even when i use browserify my brower returns Uncaught ReferenceError: require is not defined.
My script.js:
const { createHash } = require('crypto');
function hasher() {
const password = document.getElementById("js_n_password").value;
const hash = createHash(password);
document.getElementById("hashed").innerHTML = password;
}
My index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="bundle.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Web Hash</h1>
<form class="input" id="input">
<label for="n_password">Password:</label>
<input type="password" id="js_n_password" name="n_password">
</form>
<button onclick="hasher()">hash it</button>
<p class="hashed" id="hashed"> </p>
</body>
</html>
Why browserify isn't working and how can i make it work?
PS: add module.exports = function (n) { return n * 111 } to script.js doesn't change anything.
The library I am using: https://github.com/icambron/moment-countdown
My code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()>
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
The question: How do I make the variable timeVar when it obtains its values from timeInputHTML in the HTML code, not contain contain a T in the middle like so: "2018-05-05T14:30" I believe this is what is wrong with my code and is causing the Uncaught TypeError if it is not the issue then please can you explain to me what is please?
The image / screenshot:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
your are missing " this in input function it should be like this
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
This question already has an answer here:
Javascript not working on submit
(1 answer)
Closed 5 years ago.
I recently started doing form validation and I am trying to understand something. I have yet to find this anywhere else on SE.
When I have onsubmit="return validateForm()" or onsubmit="validateForm()" in the <form> element, the form does not do anything. However, when I remove onsbumit from the form tag and instead do document.forms["favorite"].onsubmit = function validateForm() in the JS file, it works fine.
I got it working, but I am trying to understand why the "normal" method of onsubmit in the html isn't working.
For reference, here is my code as it works now:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="form.js"></script>
<title>Form</title>
</head>
<body>
<form name="favorite" action="#" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>
JS:
window.onload = function(){
document.forms["favorite"].onsubmit = function validateForm(){
var input = document.forms["favorite"]["car"].value;
if(input == ""){
alert("You missed an entry");
return false;
}
}
}
First of all we define a function and then we call that function. and you are calling that function before defining as you are using window.load.You need to define the validation function before window.load as you are using. Sorry for my poor English.
<script>
window.onload = function () {
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
}
</script>
define validateForm() function before window.load you do not need to write this function inside the window.load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<script>
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
</script>
</head>
<body>
<form name="favorite" action="#" onsubmit="return validateForm();" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>
What does my teacher mean by this exactly? I have very little experience with HTML so I'm not sure what to do? Wouldn't it stop working without the form element?
The whole instructions say:
" Remove the form element and in its place put a div with a unique id. Don’t forget the closing div element. Add a second button for Delete Task. Change the “submit” type to “button” for both buttons and give each one a unique id."
(function(){
// Variable that stores the tasks:
var tasks = [];
// Function called when the form is submitted.
// Function adds a task to the global array.
function addTask() {
'use strict';
var task = document.getElementById('task');
var output = document.getElementById('output');
var message = '';
if (task.value) {
tasks.push(task.value);
message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + tasks[i] + '</li>';
}
message += '</ol>';
output.innerHTML = message;
} // End of task.value IF.
// Return false to prevent submission:
return false;
} // End of addTask() function.
// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = addTask;
} // End of init() function.
window.onload = init;
})();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do List</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<!-- Script 6.5 - task.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Enter an Item To Be Done</legend>
<div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
<input type="submit" value="Add It!" id="submit">
<div id="output"></div>
</fieldset>
</form>
<script src="js/todo.js"></script>
</body>
</html>
You need change your event from onsubmit to on click since form is not available anymore.
Try this :
(function(){
// Variable that stores the tasks:
var tasks = [];
// Function called when the form is submitted.
// Function adds a task to the global array.
function addTask() {
'use strict';
var task = document.getElementById('task');
var output = document.getElementById('output');
var message = '';
if (task.value) {
tasks.push(task.value);
message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + tasks[i] + '</li>';
}
message += '</ol>';
output.innerHTML = message;
} // End of task.value IF.
// Return false to prevent submission:
return false;
} // End of addTask() function.
// Initial setup:
function init() {
'use strict';
document.getElementById('submit').onclick = addTask;
} // End of init() function.
window.onload = init;
})();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do List</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<!-- Script 6.5 - task.html -->
<form action="#" method="post" id="theForm"
<fieldset><legend>Enter an Item To Be Done</legend>
<div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
<input type="submit" value="Add It!" id="submit">
<div id="output"></div>
</fieldset>
</form>
<script src="js/todo.js"></script>
</body>
</html>
This is my code. When I click the calculate button it is displaying just the number 35. WHere have I gone wrong and how can I fix it?
<!doctype html>
<html>
<head>
<title>JS Practise 2</title>
</head>
<body>
<h1> Problem 1.1 </h1>
<script language="javascript">
var topsoil_amount = 1;
function calculate() {
var topsoil_amount = document.getElementById(Input);
var topsoil_cost = 15;
var cost = (topsoil_amount * topsoil_cost) + 35;
alert(cost);
}
</script>
<br>
<input type="text" name="Input" size="16" id="Input">
<input type="button" value="Calculate" onClick="calculate()">
</body>
</html>
topsoil_amount is a DOM element, not a number. You need to reference the value. Secons issue is you need quotes around the id.
var topsoil_amount = document.getElementById("Input").value;