I've written a .jsp file whose contents should be updated on click of the button. I tried using appendChild of Javascript but it's not working as this is a .jsp file.
Here's the code:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title> Hello World!</title>
</head>
<p id="demo"><h1> Hello, </h1>
<body>
<br/>Firstname:<input type="text" name="firstname">
<button onclick="myFunction()">Enter</button>
<%= request.getParameter("firstname")
%>
<script>
function myFunction()
{
var node=document.getElementById("demo");
document.getElementById("demo").appendChild(<%= request.getParameter("firstname")%>);
}
</script>
</body>
</html>
I want the output to be " Hello, Dia", If Dia is entered as the firstname and when Enter button is clicked. The firstname should be appended to Hello, !
You have mixed scriptlets inside script . javascript is a client side technology.
While scriptlets are executed in application servers when you compile (they are nothing but the java codes)
Try this ,
<script>
function myFunction()
{
var node=document.getElementById("demo");
var value=<%= request.getParameter("firstname")%>;
document.getElementById("demo").appendChild(value);
}
</script>
Firstly , the click of your button does not take you back to the server , so you wont need to access the value of the text field using a scriptlet , you can do this in plain HTML and Javascript
as follows :
<html>
<head>
<title> Hello World!</title>
</head>
<body>
<div id="demo"><h1> Hello,<div id="displayName"></div> </h1></div>
<br/>Firstname:<input type="text" name="firstName" id="firstName"/>
<button onclick="myFunction()">Enter</button>
<script>
function myFunction()
{
var firstName = document.getElementById("firstName");
document.getElementById('displayName').innerHTML = firstName.value;
}
</script>
</body>
</html>
Related
I have a problem where my script in HTML page can't call a function outside the HTML file or a function through the library. Here is the HTML code:
`<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
<div>
<label for="sheetLink">Google Sheets Link:</label>
<input type="text" id="myInput">
<button id="myButton" onclick="handleButtonClick()">Click me</button>
</div>
<script>
function handleButtonClick() {
var userInput = document.getElementById("myInput").value;
console.log(userInput);
alert(userInput)
let uwow = LibIdentifier.receiveLink();
Logger.log(uwow);
console.log(uwow);
alert(uwow)
userClicked();
}
</script>
</body>
</html>`
I Expect the code to receive variable uwow from another function, and then do alert from result.
I have tried using google.script.run.functionname(). But it does not work.
What actually resulted is an error like this:
Error on Click
I have one simple html page with a text field that asks for user's name. i want to save what user enter and on another page i want to retrieve that name and say hello + (user's name).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
</head>
<body>
<form>
<p>Enter your name</p>
<input type="text">
<button type="submit" value="submit">Submit</button>
</form>
</body>
</html>
and the second page is where the data from first page comes (through localStorage).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>secondPage</title>
</head>
<body>
<h1>Hello </h1>
</body>
</html>
thank you.
I'm not sure if this is a homework assignment but this should get you started.
It will involve:
First storing the data into localStorage
Then directing the user over to the second page - most likely through window.location.href.
Then pulling the data back out of localStorage to display there.
Here's a jsfiddle to get you started setting and getting data.
https://jsfiddle.net/em92zbod/
The two main functions are:
window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");
Where "key" is any identifier you want to use for the value.
Here's a suggested approach by using sessionStorage.
However, you can also use localStorage with the same implementation method. The only differences between them is localStorage will keep the data even if you close your browser. Which in this case, saving userName I think it's better to use sessionStorage.
1.html
<form action="2.html" onsubmit="callme()">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit" value="submit">Submit</button>
</form>
<script>
function callme(){
var name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
}
</script>
2.html
<h1 id="welcome"> </h1>
<script>
window.onload = function() {
document.getElementById('welcome').innerText = "Hello, " + sessionStorage.getItem('userName');
};
</script>
Code update
page 1
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("myForm").addEventListener("submit", e => {
const form = e.target;
const name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
})
})
<form action="2.html" id="myForm">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit">Submit</button>
</form>
Page 2
window.addEventListener("DOMContentLoaded", () => {
document.getElementById('welcome').textContent = `Welcome ${ sessionStorage.getItem('userName') || "stranger"}`;
})
<h1 id="welcome"></h1>
I was trying to use the example from here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/forms
for my own uses.
The above example is accessing a form on the same page. My example attempts to populate a field on a different page.
Here is the launcher html - launcher.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Launcher page</title>
<script>
function launch(text) {
window.open("http://localhost/page2.html", '_blank');
let entryform = window.document.forms.newentry;
entryform.elements.town.placeholder = text;
window.focus();
}
</script>
</head>
<body>
<p>Click button to launch page2 and populate edit box on form</p>
<button type="button" id="launcher" onclick="launch('Edinburgh')">populate a text field on a different page</button>
</body>
</html>
And the launched page - page2.html:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<header>
<h1>This page launched from launcher.html</h1>
</header>
<main>
<form name="newentry">
<p>Town: </p><input type="text" name="town" value="">
</form>
</main>
</body>
</html>
But when I click the button on launcher.html I get an error on the launcher.html page:
entryform.elements.town.placeholder = text;
Uncaught TypeError: Cannot read property 'elements' of undefined
at launch (launcher.html:10)
at HTMLButtonElement.onclick (launcher.html:20)
Why is this elements property undefined?
How can I fix this?
EDIT
What I really wanted to do was simple, but the window.open object returned was not ready at the point I was attempting to edit. The really simple solution is like this:
function launch(text) {
let p2win = window.open('page2.html', '_blank');
p2win.onload = function(){
p2win.document.forms.newentry.town.value = text;
}
}
Your problem is that this code...
let entryform = window.document.forms.newentry;
is looking in the current window (ie launcher.html) for the form element. What you can do instead is save a reference to the popup window and access its elements via that reference.
let popup = window.open("http://localhost/page2.html", '_blank')
let entryform = popoup.document.forms.newentry
// and so on
As an alternative, I would consider passing a query parameter to the popup page instead of trying to manipulate it externally.
For example
window.open(`page2.html?placeholder=${encodeURIComponent(text)}`, '_blank')
and then in page2.html...
<main>
<form name="newentry">
<p>Town: </p><input type="text" name="town" value="">
</form>
</main>
<script>
let query = new URLSearchParams(location.search)
document.querySelector('form[name="newentry"] input[name="town"]')
.placeholder = query.get('placeholder')
</script>
Live demo ~ https://codesandbox.io/s/determined-archimedes-51vn2
I have one simple html page with a text field that asks for user's name. i want to save what user enter and on another page i want to retrieve that name and say hello + (user's name).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
</head>
<body>
<form>
<p>Enter your name</p>
<input type="text">
<button type="submit" value="submit">Submit</button>
</form>
</body>
</html>
and the second page is where the data from first page comes (through localStorage).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>secondPage</title>
</head>
<body>
<h1>Hello </h1>
</body>
</html>
thank you.
I'm not sure if this is a homework assignment but this should get you started.
It will involve:
First storing the data into localStorage
Then directing the user over to the second page - most likely through window.location.href.
Then pulling the data back out of localStorage to display there.
Here's a jsfiddle to get you started setting and getting data.
https://jsfiddle.net/em92zbod/
The two main functions are:
window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");
Where "key" is any identifier you want to use for the value.
Here's a suggested approach by using sessionStorage.
However, you can also use localStorage with the same implementation method. The only differences between them is localStorage will keep the data even if you close your browser. Which in this case, saving userName I think it's better to use sessionStorage.
1.html
<form action="2.html" onsubmit="callme()">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit" value="submit">Submit</button>
</form>
<script>
function callme(){
var name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
}
</script>
2.html
<h1 id="welcome"> </h1>
<script>
window.onload = function() {
document.getElementById('welcome').innerText = "Hello, " + sessionStorage.getItem('userName');
};
</script>
Code update
page 1
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("myForm").addEventListener("submit", e => {
const form = e.target;
const name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
})
})
<form action="2.html" id="myForm">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit">Submit</button>
</form>
Page 2
window.addEventListener("DOMContentLoaded", () => {
document.getElementById('welcome').textContent = `Welcome ${ sessionStorage.getItem('userName') || "stranger"}`;
})
<h1 id="welcome"></h1>
I have 2 php pages
home.php
about.php
I have 1 Javascript page, which I called javascript from home.php.
I want to access the value of the p tag in about.php.
home.php
<!DOCTYPE html>
<html>
<body>
<input type="submit" onclick='myfunction()'>
</body>
</html>
javascript
<script>
function myfunction()
{
}
</script>
about.php
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
<p id='demo'>i want to access this value in javascript function</p>.
</body>
</html>
You probably want something in pure javascript like:
<script>
document.getElementById('demo').innerHTML='change the p tag value';
</script>
function myfunction(){
var val= document.getElementById('demo').textContent;
alert(val);
}
FIDDLE
var pTag = document.getElementById('demo').innerHTML;
The variable pTag will now hold the value(text) of your "demo" tag,
ready for you to do what you wish with it.
EDIT:
Using Javascript, set the value of a hidden form field when you change the contents of your tag.
Then pass the values using php, like below...
home.php:
<form action="about.php">
<input type="hidden" name="demo" id="demo" />
<p id="pDemo"> </p>
<button type="submit"></button>
</form>
Then in about.php:
<p id='demo'>
<?php
$demo= $_GET['demo'];
//use your variable "demo'
?>
</p>
This link should help, here.
You can use ajax or you can use load of jquery.
<script>
$(document).ready(function() {
$("#bAdd").load("about.php",function(response,status,xhr){// use if less data to load
var pTag = document.getElementById('demo').innerHTML;
alert(pTag);
});
});
</script>
<input type="hidden" id="bAdd" value="">