Pure Javascript: How to keep form inputs after submit without PHP? - javascript

Javascript beginner here - I looked up a bunch of answers on similar questions, but they all use PHP which I don't know anything about. I was hoping to do the following in pure Javascript:
I have a input field and a button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form>
<label for="someNum">Some number:</label>
<input type="number" id="someNum">
<input type="submit" id="button" value="Submit">
</form>
<script src="script.js"></script>
</body>
</html>
When I hit "Submit", I want to console.log the value of someNum:
const button = document.getElementById("button")
button.addEventListener("click", calculate)
function calculate () {
let someNum = document.getElementById("someNum").value
console.log(someNum)
}
However, upon clicking "Submit", the value entered by the user is no longer shown in the form. How do I prevent that?

Related

jQuery .load() not letting me fill input text

I'm a noob at coding, and I'd like some help on this. I have a page (index.php) that checks if cart is empty or, if it's not empty, from another page (data.php) using jQuery.
If It's empty, it will say it's empty and if it's not empty, it will display a form where you can enter your name and submit.
When the cart is empty, it does display the form, but I'm unable to type anything because of the refresh. Would like a solution to this or an alternate method. Thanks in advance!!
Index.php
<!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'>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js'></script>
<title>Document</title>
</head>
<body>
<script>
$(function () {
function loadData() {
$('#loaddata').load('data.php');
}
setInterval(function () {
loadData();
}, 5000);
});
</script>
<div id='loaddata'></div>
</body>
</html>
data.php
<?php
if (empty($_SESSION['cart'])) {
?>
<h1>Cart Empty</h1>
<?php
} else {
?>
<form action="" method="post">
<input type="text" name="f_name">
<input type="text" name="l_name">
<input type="submit" value="submit">
</form>
<?php
}
?>
You need to rethink your logic. You must somehow know when to update your #loaddata, instead of calling it on a set timer.
The best practice would be to add the loadData() in all your add to cart and remove from cart functions.
The simpler way, based on your code would be to fetch whether your cart is empty before loading the data.php and only if its status has changed update it.

Make Javascript calculate HTML input from user

I want to make a website that can calculate the numbers that the user enters in the text field. Below, I am trying to store the users input in a variable and then return it to the console, but this does not seem to work. It is supposed to take in more calculations down the line, but I thought I would keep it simple at first.
What have i forgotten?
PS: I'm currently still learning JavaScript, so don't roast me too hard :)
Thanks!
Best
Mikkel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/JavaScript/culjo.js" defer></script>
<title>Culjo</title>
</head>
<body>
<h1>Culjo</h1>
<input id="inputOne" type="text">
<input id="inputtwo" type="text">
<input id="result" type="number">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-
QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Javascript
function calculate() {
var inputOne = document.getElementById("inputOne")
var inputTwo = document.getElementById("inputTwo")
result = inputOne+inputTwo + inputTwo
return result
}
calculate()
You need to get the value of the field like this:
var inputOne = document.getElementById("inputOne").value;
and then use
parseInt() or parseFloat() as stated at the comments to parse the string.

XSS injection and innerhtml

I am trying to learn about XSS vulnerabilities and am having some issue grasping the concept. I have a test site http://mytestpage/index.html and am trying to launch an alert box via xss from a secondary page http://xsstest.html. I can not seem to get the alert to occur. I think my issue is that the code from my xsstest page is not injecting into my mytestpage/index.html page. I am trying to use innerhtml as the posts I read seemed to leverage this in XSS testing. I am fairly certain that I am not using the innerhtml correctly or pehaps it is not the right "tool for the job" and i am running down the wrong path. Any suggestions would be appreciated.
My code for the XSS test is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>XSS TEST PAGE</title>
</head>
<body>
<body onload="document.forms[0].submit()">
<form method="POST" id="test" onsubmit="test()" action="http://mytestpage/index.html" >
</form>
</body>
<script>
function test(){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
</html>
The test homepage code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
</html>
This right here is no bueno:
<script>
function test( ){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
document.getElementById() requires you pass it the ID of an element. So, for example, if there's a div on the page with the ID of #alert, you'd do document.getElementById('alert').
You also can't assign a function to the inner HTML of an element. You need to create a script element and then append it to the document or another element. Instead, try:
<script>
let myTest = document.createElement('script')
myTest.text = `
function test() {
alert('Hiya buddy!')
};
test();
`
const body = document.querySelector('body')
body.appendChild(myTest)
</script>
You are not doing XSS. You are simply displaying alert upon form submission. That too has error that document.getElementById() requires a id to select the element.
XSS is done where you have some input to enter. SO you cannot do XSS in XSStest page but you can do it from test home page code by changing it as
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post" action="some page url">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
And Suppose the page whose url you have given in action attribute is like
<!DOCTYPE html>
<HTML>
<body>
Name is: <%=request.getParameter("myname")%>
</body>
</HTML>
I have assumed you are using jsp here.
Now when you enter XSS payload in inputbox in this page and submit it the page whose url you have given will open up and display the alert as you have not sanitized the input value before using it in second page.

html autocomplete on input text does not work; no history shown

Here is my simple html file, I ran on firefox 47; the autocomplete attribute does not have any effect.
I'm expecting press "down" arrow will show my history. However, it does not work. Why?
Note1: I've checked Firefox | Options | Privacy | Firefox will: Remember History; I've also disabled all add-ins and restarted Firefox; still not work.
Note2: these code are just running on client browser, I don't need a form to submit to server. All I need is to click the button, then retrieve the text from input and do something in JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript">
function runCommand(command_str) {
};
</script>
</head>
<body>
<input id="command_text" type="text" autocomplete="on" size="80" >
<button onclick="runCommand(document.getElementById('command_text').value)">Run Command</button>
</body>
</html>
This happens because you have not wrapped your inputs in a form.
Please wrap it in a form like below and autocomplete attribute to the form too. Also name your parameter.
<form autocomplete="on">
<input id="command_text" type="text" autocomplete="on" name="command_text" size="80" >
<button onclick="runCommand(document.getElementById('command_text').value)">Run Command</button>
</form>

Keep dynamic changes when saving webpage in ie11

I need to save a webpage to the filesystem using the Save Webpage function while keeping changes done with javascript. I have an input field where you can type in your name and save it, which is then displayed on the website. If i use Save As... in firefox my changes are saved in the resulting html file. When i use IE11 i get the original source code without my user input.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<script>
function saveUser(form) {
var form = document.getElementById('saveUserForm');
form.previousElementSibling.innerHTML = form.previousElementSibling.innerHTML + "<br />Created by: " + form.name.value;
form.parentNode.removeChild(form);
}
</script>
</head>
<body>
<div>
<h1>Test Page</h1>
<p>Created at: Today
<form class="userForm" id="saveUserForm" action="" method="get">
<label for="name">Created by: </label>
<input id="name" name="name">
<input type="button" name="button" value="Save" onclick="saveUser(this.form)" />
</form>
</p>
</div>
</body>
</html>
Can anybody make any suggestions on how to keep dynamic changes when saving a web page in IE11?

Categories