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);
}
Related
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.
I have index.html and page.html
index.html has an anchor to page.html
I would the backbutton press and ask to the user if he really want go back to index.html
This is my code:
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
<script src="cordova-2.6.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready",onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
Go to page
</body>
</html>
page.html
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
<script src="cordova-2.6.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready",onDeviceReady, true);
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
function onBackKeyDown(e) {
navigator.notification.alert("PhoneGap back is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap Page</h1>
<h2>Edit assets/www/page.html</h2>
</body>
</html>
The problem is that the back button press is not handled, but cordova is loaded correctly because I have the alert box showed.
What I am doing wrong?
I have a Samsung Google Nexus with Android 4.2.2
Thanks a lot.
Put your back button listener inside of the onDeviceReady function.
I have created a website that intensively use Ajax to load its contents.
I want the pages I select to load on AJAX but at the same time the URL also changes without reloading the whole page content. How would I achieve that? I've googled already but my search did not yield any results.
Let's say I have this page:
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<sj:head />
</head>
<body>
<h5>Struts Jquery Ajax Integration </h5>
<div id="resultContent"></div>
<noscript>Please Turn On Javascript to make the full use of this site</noscript>
<h4>Choose A task</h4>
<ul>
<s:url value="views/ajaxvalidation.jsp" var="ajaxvalidation" />
<li><sj:a targets="resultContent" href="%{ajaxvalidation}">Ajax Validation </sj:a></li>
</ul>
<div>
<h6>Play A Music while You Navigate</h6>
<audio src="x.mp3" controls>Your browser does not support the
audio element.
</audio>
</div>
</body>
</html>
I clicked the Ajax Validation link. it will not reload the page but however the url would be something like this:
localhost:8090/AppName/ajaxvalidation.jsp
or this:
localhost:8090/AppName/ajaxvalidation.action
How would I achieve such a goal?
Note that I am using this plugin: struts2-jquery
You need to use the History API
window.history.pushState(data, title, url)
Update
Noticing that you use struts2-jquery you can add ajaxhistory="true" to enable the build in ajax history functionality. See http://code.google.com/p/struts2-jquery/wiki/HeadTag#Attributes
<sj:head ajaxhistory="true" />
Keep in mind, though, that it is not supported in all browser versions..
You can use history.pushState if the browser supports (read < IE10)
var boolPushState = false;
if (typeof history.pushState !== "undefined") {
boolPushState = true;
}
if (boolPushState) {
history.pushState(null, null, "URL");
}
I'm looking to create an online form that on the surface is very basic.
The goal is to create a mailto form with submit button that, upon submission with copy the current url with in the browser address bar and paste it into the mailto email window.
The form itself is straight forward:
form method="post" action="mailto:address#address.ca">
Report a broken link, please use the submit button below. The URL for the broken link will be included automatically.
<br />
<input type="submit" value="Submit">
</form
the simpler the better, html/java is preferred... suggestions?
I suggest you get the URL with javascript's document.URL and do whatever you want to do with it.
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'>
</script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var url = "mailto:address#address.ca?Subject=" + window.location;
$('#mailtoLink').attr('href', url);
window.alert($('#mailtoLink').attr('href')); // = url;
});//]]>
</script>
</head>
<body>
Some Text <a id="mailtoLink" href="mailto:address#address.ca" name="mailtoLink">Send Mail</a>
</body>
</html>
I have a file, containing czech text common file split to two lines:
<html>
<head>
<meta http-equiv="contet-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>Běžný</p>
<p>soubor</p>
</body>
</html>
When I load this file to JEditorPane using HTMLEditorKit and then save it (like having it edited), the underlying model (HTML code) is changed to:
<html>
<head>
<meta http-equiv="contet-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p style="margin-top: 0">Běžný</p>
<p style="margin-top: 0">soubor</p>
</body>
</html>
Is there some way to get out of margins and entities? Must I inevitably override some methods of HMLEditorKit?
PS: Is there some another embedable (and free) simple Java HTML (WYSIWYG-like) editor? But I need to handle some special tags from my own XML-namespace. (Ideally HTML 4.0 compliant.)
Please use Net Beans IDE 7.0.
Downloads free
http://netbeans.org/downloads/