I want to pass values between 2 HTML pages using POST method. I have lot of data to be passed to 2nd page and cannot use GET. My issue is I do no know how to pass values to second HTML page and how do i display user name on page 2. please explain!!!
Here page1.html code:
<html>
<head>
<title>Form</title>
</head>
<body>
<h4>Enter your name</h4>
<form name="form1" method="post" action="page2.html">
<input type="text" name="username">
<input type="submit" onclick="submitForm()">
</form>
<script type="text/javascript">
function submitForm()
{
form1.submit();
}
</script>
</body>
</html>
Here page2.html code:
<html>
<head>
</head>
<body>
....... dont know how to display username entered on page1.html here...
</body>
</html>
Try this
<html>
<head>
</head>
<body>
<?php
if(isset($_POST["username"]))
{
echo $_POST["username"];
}
?>
</body>
</html>
And if you want to do this with javascript then readout about AJAX
ajax Tutorial
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button id="submitbutton">Submit</button>
</form>
<script>
document.getElementById("submitbutton").addEventListener("click", setItem);
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>
I'm trying to transfer "jobreference1" from the 1st snippet to the 2nd using local storage. As you can see, I've stored it in one external JavaScript file and sent it to another. But when I try to call it in the HTML code in the 2nd snippet, to which the value was transferred to, it simply doesn't work. I've decided to include all of my HTML and JavaScript code for my second snippet because I believe that's where the issue lies. Thank you.
Note: no Inline JavaScript or jQuery.
This is a working example. The index.html sets the reference on page load. The form submit redirects to apply.html and it reads the correct value at page load.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button>Submit</button>
</form>
<script>
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>
apply.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Job Reference Number: <span id="job1"></span></p>
<script>
document.getElementById("job1").innerHTML = localStorage.getItem("jobreference1");
</script>
</body>
</html>
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.
A server process changes the content of a file readme.txt which is located in a users home directory (Linux Ubuntu 20.04 Server). I want to reflect the file content on the page without fully reloading the site. Therefore I tried AJAX in the index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Read a File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<?php
$reader = file_get_contents("/userhome/readme.txt");
echo $reader;
?>
<script type="text/javascript">
function readFile() {
$.get("index.php");
return false;
}
</script>
<button onclick="readFile()">Click me</button>
</body>
</html>
Shouldn't an AJAX GET request to the PHP file itself load the new content and display it on the page?
reader.php
<?php
$reader = file_get_contents("/userhome/readme.txt");
echo $reader;
?>
So basically after clicking the Read me button, the div with id read will be filled with the txt content
index.php
<!DOCTYPE html>
<html>
<head>
<title>Read a File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="read">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#load").click(function(){
$("#read").load("reader.php");
});
});
</script>
<button id="load">Read me</button>
</body>
</html>
there are many other solutions for this
I have a form where I have a file input field, where I can choose multiple files. Now the problem is that
If I choose 3 files then it should create 3 input fields having files from 1 to 3. Eg can be seen below.
I want to to do it using jquery. The code which i have written is
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<form name="form" class="form-group" method="post" action="" enctype="multipart/form-data">
<input type="file" id="track" name="tracks" multiple>
<button type="button" id="btn-submit"> Upload</button>
<script>
$(document).on("click", "#btn-submit", function() {
});
</script>
</body>
</html>
What approach or methodologies should I use to get the result expected?
Any help is appreciated.
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.