Display Post value from HTML form to another HTML form - javascript

Quick question. I am starting learn on local storage HTML5. How can I get value from a form and display that value on another HTML form page?
For example, I have two forms here.
If I fill on form 1 and click submit button, and the value will display on form 2 in readable only.
I tried below:
HTML Form 1:
<html>
<head>
<title>Save Value</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="display.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
HTML Form 2:
<html>
<head>
<title>Display</title>
<script type="text/javascript">
function result() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
</form>
</body>
</html>

In display.html you didn't call function result(),
try this,
<html>
<head>
<title>Display</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>

Related

Why is my HTML form not displaying my input?

I'm pretty new to JavaScript and am creating a simple page to output the form values. But there's seem to be a problem that it is not showing.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1" onsubmit="form()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
function form() {
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
}
</script>
</body>
</html>
I can't seem to find any problems, the console was fine with the code.
You have to stop the form from submitting.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1" onsubmit="return form()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
function form() {
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
return false;
}
</script>
</body>
</html>
Use an event listener to handle the submit and preventDefault() for stopping the submission. Following code is tested and working.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
document.getElementById("form1").addEventListener("submit", form);
function form(e) {
e.preventDefault();
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
}
</script>
</body>
</html>
<script src="script.js"></script>
</body>
</html>

HTML Form submitting automatically

I am new to HTML and JavaScript. I just made a simple page to add two numbers. The output that I am getting is correct but when I click the sum button the sum is there for a fraction of second and then again the page reloads itself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First</title>
<script>
function get_sum() {
let num_a = parseInt(document.getElementById('first').value);
let num_b = parseInt(document.getElementById('second').value);
document.getElementById('sum').innerText = (num_a + num_b).toString(10);
}
</script>
</head>
<body>
<form id="form" onsubmit="return get_sum()">
<label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
<br>
<label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
<button type="submit">Sum </button>
</form>
<h1 id="sum"></h1>
</body>
</html>
You need to pass the event and add event.preventDefault(); at the beginning of the function to prevent page from reloading since it's a submit button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First</title>
<script>
function get_sum(event) {
event.preventDefault();
let num_a = parseInt(document.getElementById('first').value);
let num_b = parseInt(document.getElementById('second').value);
document.getElementById('sum').innerText = (num_a + num_b).toString(10);
}
</script>
</head>
<body>
<form id="form" onsubmit="return get_sum(event)">
<label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
<br>
<label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
<button type="submit">Sum </button>
</form>
<h1 id="sum"></h1>
</body>
</html>
The onsubmit must return false to prevent browser from submitting it to server.
Like this
<form id="form" onsubmit="get_sum(); return false;">
You can add an event listener to handle the click after you change the type to "button". Or you can stop the event from propagating to the actual "submit" action. OR, do both to prevent the submit of the form.
Why both? A form can also be submitted by hitting "return/enter" or via script.
This is perhaps a bit of overkill but shows how to handle the events.
function get_sum(event) {
event.preventDefault();
let num_a = parseInt(document.getElementById('first').value);
let num_b = parseInt(document.getElementById('second').value);
document.getElementById('sum').innerText = (num_a + num_b).toString(10);
}
const sumButton = document.getElementById('sum-click');
sumButton.addEventListener("click", get_sum, false);
const form = document.getElementById('form');
form.addEventListener('submit', get_sum);
<form id="form">
<label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
<br>
<label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
<button id="sum-values" type="submit">Sum </button>
<button id="sum-click" type="button">Sum (Not submit)</button>
</form>
<h1 id="sum"></h1>

JQuery(JavaScript)+PHP syntax explanation

Going through some exercise which including JQuery + PHP combined together .The part I am not completely understand is in the Jquery code when the if statement starts ,can someone please explain from this point on what's going on?
HTML code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label for="name">Name:</label><br>
<input type="text" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" autocomplete="off"><br><br>
<label for="password">Password:</label><br>
<input type="text" name="password"><br><br>
<input type ="submit" name="submit" value="Sign up">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
PHP code:
<?php
if(! empty($_GET['email'])){
$email=filter_var($_GET['email'],FILTER_VALIDATE_EMAIL);
if($email){
$con="mysql:host=localhost;dbname=eshop;charset=utf8";
$db= new PDO($con,'root','');
$query=$db->prepare("SELECT email FROM users WHERE email = ?");
$query->execute([$email]);
$email=$query->fetch(PDO::FETCH_ASSOC);
if($email){
echo true;
}
}
}
JQuery code:
$('#email').on('keyup', function(){
var userEmail= $(this).val().trim();
$('#result').remove();
var emailRegex= /^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
if(emailRegex.test(userEmail)){
$.get('check_email.php',{email:userEmail},function(res){
if(res ==1){
$('#email').after('<span id="result">*Email is taken</span>');
}
});
}
});

how to output textbox value in javascript ajax

basically i have a form which inside that form i have a textbox and a submit button, now what i want is to output text box value into console when a user type something, i found this link https://codepen.io/jnnkm/pen/WxWqwX?editors=1111 which works just perfect but when i copied the html and script code and putted it my editor and ran it trough my browser, it doesn't works at all,
here is how i tried it out:
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
you can try it yourself too, but it didn't worked for me.
okay i found what the problem was, first i had to specify
$(document).ready(function() {
and then input my ajax code, i mean fully it was suppose to be this way
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$(document).ready(function() {
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
now it works perfect!

documnet.getElementById does not fetch the value . what is going wrong?

i am sure this is quite a numb question to ask and most probably the most basic one. i am just a starter for JS.
i am trying to access the value of input field by document.getElementById and it is returning null to me i am not sure why here is the code.
<html>
<head>
<script type="text/javascript">
var name = document.getElementById("e_name");
alert(name);
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
</body>
</html>
the following code prints the value null in alert box. what is wrong?
Update :
When i use the following code.
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById('name').value;
alert(name);
</script>
</body>
</html>
it prints Enter your Name but if i change the value it does not print the changed value. i would want to perform the following for validation purpose
a) holds the value of e_name in a javascript variable in the head tag
b) so that i should be able to process it for validation.
how do i do it?
Because you're calling that line of script even before document object is ready!
Try this
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById("e_name").value;
alert(name);
</script>
</body>
Or this in your head tag.
<script type="text/javascript">
window.onload = function() {
var name = document.getElementById("e_name");
alert(name);
}
</script>
The Javascript code is executing before that HTML has loaded. The element with id="e_name" doesn't actually exist in the document yet.
function validate()
{
var nam=name.value;
alert("name"+nam);
}

Categories