I am simply trying to get the results of a calculation from one html file to another html file using local storage, as It has worked for me before, and now I just can not seem to figure it out. My goal is to get a stored"result" that was calculated on page one to show up on page two.
The following is the code for the script:
function run()
{
const testConst = 41;
var age = document.getElementById('age').value;
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
var result = (10*weight) + (6.25* height) - (5*age)+5;
document.getElementById('myDiv').innerHTML = "There should be text here and the number " + result + "!";
sessionStorage.setItem("storedResult", result)
document.getElementById('divResult').innerHTML = "Your BMR is " + sessionStorage.getItem("storedResult");
The following is the code for the "first page", where we get the information for the stored calculation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer src="script.js"></script>
<title>Home</title>
</head>
<body>
Age:<input type="text" id="age">
Weight:<input type="text" id="weight">
Height:<input type="text" id="height">
<br>
<input type="submit" value="Submit" onclick="run();">
<br>
<br>
<div id="myDiv"></div>
<div id="divResult"></div>
</body>
</html>
The following is the page I am trying to get the stored result to appear on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Results</title>
</head>
<body>
<h1>You are on the second page</h1>
<div id="divResult"></div>
</body>
</html>
What the first page looks like when the results page is not linked, here i believe the storage is working properly
What the results page looks like when linked, should have text along the lines of "Your bmr is ..." somwhere in there.
Thank you for your help.
How are these 2 HTML pages connected?
1. Via page submit : page1 submits to server and then server sends page2
2. Single page application
For case 1 'page submit' - you can capture the "result" calculated on run() into a form hidden element, say its name is "resultHidden". On server side read this value as request.getParameter("resultHidden"). Write this variable on the 2nd page. I use JSP to write the value onto 2nd page, you could be using another technology.
For case 2 'single page application' - after run() calculates the result, store it in a global variable which is part of a JS file which is imported on both page1 and page2. On page2 read this JS variable and write onto HTML.
For both cases you can also use cookie. Js can be used to write to a cookie from page1 and read from page2. Also when page1 is submitted to server the cookie can be read on the server side.
Related
I'm researching building a simple web app using Polymer. I'd like to pass an numerical id to a custom component. I can accomplish this using JSP by adding the id to a map and passing it in to a Viewable:
private Response buildUI(LinkedHashMap<String, String> map) {
return Response.ok(new Viewable("/MyApp", map)).build();
}
I would prefer not to introduce JSP to handle a single value though.
Is there a simpler way to accomplish this?
The HTML code-in-progress is:
// MyApp.html
<html>
<head>
<title>iron-form demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="custom-form-element.html">
<link rel="import" href="custom-id-element.html">
</head>
<body unresolved>
<custom-form-element>
<template>
<form is="iron-form" method="get" action="/" id="basic">
<custom-id-element value="{id}"/>
<paper-button raised onclick="_submit(event)">Submit</paper-button>
</form>
<script>
function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
basic.addEventListener('iron-form-submit', function(event) {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});
</script>
</template>
</custom-form-element>
</body>
</html>
It turns out the solution was simple using the Polymer component "app-route". My app is REST-based, and the ID is a resource, so it was logical to place it in the URI path:
<app-route
route="{{route}}"
pattern="/:id"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
Now I can databind to the id where I need it:
<iron-label>
route = {{routeData.id}}
</iron-label>
my question is how to get the contents of a textbox in my javahttpserver webinterface
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Message - Send</title>
</head>
<body>
<input id="message" type="text"/>
<button id="message_send" type="button">Send</button>
</body>
</html>
Do I need to do it via javascript or java?
Call this function with jquery in it when the button is pushed. (I put an alert function in it so you can test it)
Make sure you include the jquery.js
function getstuff(){
var box = $("#textboxtarget").val();
alert(box);
}
I want to send a query string from one jsp page to jsp page but I want to hide the name-value pairs(attributes) at address bar when I send the query string.
First.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>First Page</title>
</head>
<body>
Click Here
</body>
</html>
Second.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Second Page</title>
</head>
<body>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
%>
Username : <%=username %><br/>
Password : <%=password %><br/>
</body>
</html>
Here, I pass a query string "Second.jsp?username=aditya123&password=abc12345" from First.jsp page to Second.jsp page but I want to send this without showing username and password attribute and their value at address bar.How can it possible?
Try this code
<form action="some.jsp" method="post">
<input type="text" name="uid" >
<input type="password" name="pass">
<input type="submit" name="login" >
</form>
Adding method ="post" hides the query stringThat is ,if i remove ' method="post" ' the processed url on pressing submit button would be having
Following as query string
uid="whatever i wrote in text field"&pass=""&login="Submit"
But after writing ' method="post" ' the new url will be free of query string...!
it is not possible with link.
alternate solution of not showing attribute is encode that name value pair and send it with url and decode at another page.
use either url encoder given by java or make use of your own encrypt-decrypt method.
The easiest thing to do is <form action="some.jsp" method="post">
Do this formatting in the html code.
And contents of url will be hidden...
You can store all the objects/information you want to pass to the second jsp file by storing the objects in the 'session' implicit object using session.setAttribute() method. In the second page you can retrieve those objects from the 'session' object using session.getAttribute(). My assumption here is that both the jsp pages are being executed in the same HttpSession, hence the same 'session' object will be available to both the jsp pages.
i have a very simple layout where i have three icons in the right side of the HTML page and have hard coded the Heading in the middle.
I am giving the size of heading in percentage :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="images/upload.png">
<img src="images/render.png" class="menuc">
<div style="width: 100%;text-align: center;position: fixed;z-index: 100;background-color: #C2C2A3;height: 100%">
<span id="cannvasfilename" style= "position:fixed;left:40%; z-index: 100; color:#3C3C41; font-weight:bold; background:transparent;font-size: 200%;">Filename:Meshworks Test</span>
</div>
</body>
</html>
its a very simple page and u can see the layout using the link Test.
But when i am opening this HTML page in the browser , the icons shrinks and the heading also comes in small size.
So my question is that is there any way to set the size so that it automatically takes the page length and width and then set the size of the heading and the icons. ???
I am already giving the text size in percentage so i thought this will do the task. but no !
NOTE : you can check the link i have given. Its just a sample so don't see the alignments. Only the size variance is a issue.
It will come properly in your browser but try and open the link in your mobile phone browser. That is the issue !
What simple change i can do in the code to solve this problem ?
Okay, I'll answer my own question and close this question.
I used HTML meta tag in the head and the issue is solved.
<meta name="viewport" content="width=device-width, initial-scale=1">
It might help someone with the same problem!
i am running a simple web server in java that is running on port 8080 on my machine , the server do receive request that come from browsers (when i write this URL (localhost:8080) ) however i wanted to receive request that come from this html page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form method="post" action="192.168.1.1:8080">
<input type="text" name ="txt">
<input type="submit" name="sub">
</form>
</body>
</html>
and the result was The webpage cannot be displayed
and my second try was this
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form method="post" action="server.java">
<input type="text" name ="txt">
<input type="submit" name="sub">
</form>
</body>
</html>
and after i clicked the submit button it opened the download dialog (download server.java).
however i managed to initiate a request on my own in java
Socket socket = new Socket("localhost",8080);
String request = "get / http/1.1";
OutputStream os = socket.getOutputStream();
os.write(request.getBytes());
os.flush();
os.close();
and my server received that request with no problems , i am not sure what am I missing here and what is that layer that initiate a correct request to a php website for example.
Java is not a scripting language and does not work like php or perl. In your server you should map request URI to handling code (e.g. in web.xml). In your <form action="..."> you should provide an URI which your server will handle.