How to print user input data on screen - html

When the user inputs data into each box and then clicks submit, how would I have that information stored into some memory so it can be outputted onto the screen. It is ok if the page is refreshed and all data is lost. As long as it is possible to output the data while on the page. I was told html5 could do this without the need of the page refreshing.
Basically, I want the user to input a Job ID, a Date and a description. The user then clicks submit. the data is then outputted onto the table.
My Code is probably not worth much here, I just have it up so people know where I'm standing.
And I understand it's not as simple as just writing a bit of code. I just need someone to give me a bit of direction, where exactly I should start and how I should approach this. I've searched the internet but I couldn't find what I needed. I'd like the simplest way to output the user input onto the screen. I want to try and avoid any heavy programming or any new languages for the moment but if that's not possible then let me know.
I was also told to use the 'memory' for storing. That's all the information I was given. I apologize if I haven't asked the question very technically, I've only began using HTML5.
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>Form table</title>
<link rel="stylesheet" href = "testing.css" />
</head>
<body>
<section>
<div class = "scrollWrapper">
<table>
<tr>
<th>Job ID</th>
<th>Date</th>
<th>Description</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</section>
<section id = "sec2">
<form name="input" action="html_form_action.asp" method="get">
<p>Job ID:</p><input type="text" name="jobid"><br>
<p>Date:</p><input type="text" name="date"><br>
<p>Description:</p> <input type="text" name="description"><br>
<br>
<input type="submit" value="Submit">
</form>
</section>
</body>
</html>

I think you are going to need a little bit of JavaScript in order for that to work. You don't need memory (since you say it doesn't matter if the data gets lost on page refresh).
HTML5 has an <output> element where you can output what a user inputs.
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>Form table</title>
<link rel="stylesheet" href = "testing.css" />
<script>
function display(form){
form.o_jobid.value = form.jobid.value;
form.o_date.value = form.date.value;
form.o_description.value = form.description.value;
return false;
}
</script>
</head>
<body>
<form name="input" action="" method="get" onsubmit="return display(this);">
<section>
<div class = "scrollWrapper">
<table>
<tr>
<th>Job ID</th>
<th>Date</th>
<th>Description</th>
</tr>
<tr>
<td><output name="o_jobid" style="width:100px; height:20px"></output></td>
<td><output name="o_date" style="width:100px; height:20px"></output></td>
<td><output name="o_description" style="width:100px; height:20px"></output></td>
</tr>
</table>
</div>
</section>
<section id = "sec2">
<p>Job ID:</p><input type="text" name="jobid"><br>
<p>Date:</p><input type="text" name="date"><br>
<p>Description:</p> <input type="text" name="description"><br>
<br>
<input type="submit" value="Submit">
</section>
</form>
</body>
</html>
I have placed the form outside of the sections in order for the output elements to work and added a display function in the forms onsubmit method.
The display function basically adds the users input in the corresponding output elements. (return false) is only so the form doens't actually submit it's data to the browser.
For browser support, the output element is supported by most modern browser (Chrome 13+, Firefox 6+, IE10+).
If you need support for a wider range you need to change the display function and the output elements.
Hope it helps.

Related

How to create html form that directly goes to specific search on a website?

I know that the code below will go to the result page of google when the user types some texts and the submit button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Hello!
</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input name="q" type="text">
<input type="submit" value="Submit Form">
</form>
</body>
</html>
But I try this with https://www.jitta.com/. It does not seem to have the same structure as google.
When searching on this website the url will be https://www.jitta.com/stock/bkk:ptt where "ptt" is the word that I want to search. Unlike google, if I want to search "ptt" the url will be https://www.google.com/search?q=ptt.
Can it be only HTML code? no other parts involved (like Javascript,...)
Appreciate anyone who answers this.

How to set page redirect link on multiple buttons in html?

I am developing a website in jsp. in that webpage i have 5 buttons i want to set links to each buttons.
That is i have a button called add_data. if add_data button is clicked it should go to add_data.jsp.
And same like if edit_data is clicked it should go to edit_data.jsp.
What i tried so far is..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form method="post" action=""
<marquee><H1><B><i><font color="green"> PASSNOTES.....</i></B></H1></marquee>
<table width="100%">
<tr>
<th> STUDENT PROFILE</th>
<th> STAFF PROFILE </th>
<th>ADMINISTRATION</th>
<th>SMS</th>
<th> ATTENDANCE </th>
<th> SIGN OUT</th>
</tr>
</table>
<hr>
<br>
<br>
<div style="align-items: left">
<input type="submit" name="add_student" value="ADD STUDENT"><br><br>
<input type="submit" name="add_student" value="EDIT STUDENT"><br><br>
<input type="submit" name="add_student" value="STUDENT SEARCH"><BR><BR>
</div>
</body>
can anyone suggest me a sollution please ... thank You...
I have never worked in JSP, but I know how HTML works. From that knowledge, I can suggest, one way is to have separate forms for each submit button, which I think you don't want. Other way is that you can make separate AJAX calls on each button click. Using Javascript/JQuery it can be easily done.

HTML: How to output to .txt or xml file

How I'm trying to create a survey and out the answers to a text or xml file.
is that possible in HTML?
<html>
<head>
<title>Testing the Survey Application</title>
</head>
<body bgcolor="#E6E6FA">
<font color=black size=+3>Modifying Sentiment</font>
<hr>
Add positive adjective:
<img Adjective src="http://findicons.com/files/icons/2776/android_icons/96/ic_question_mark.png" alt="question" title="Adjective: is a word naming an attribute of a noun, such as sweet, red, or technical."
width=20 />
<br>
<textarea cols=40 rows=3 name=textBox1></textarea>
<p>
<hr>
<input type=submit value=Submit>
<input type=reset value=Clear>
<br>
</form>
</body>
</html>
HTML is a markup language. It is used to describe the elements of a web page.
If you want functionality, such as submitting and processing forms, for example. You will need to add a server-side language, such as Python, PHP, Ruby, among many others.

HTML file with Dojo refuses to work from my local machine

I am using some CDN links in a file copied directly from a dojo tutorial. I can't figure out why it won't work. There is supposed to be a dialog when you click the Show Me! button but the parts of the dialog are just visible on the page and the button does nothing.
<!DOCTYPE html>
<html >
<head>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address">
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name" id="name"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"> </td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" id="ok">OK</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}"
id="cancel">Cancel</button>
</div>
</div>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
Show me!
</button>
</body>
</html>
You've always got to use a webserver even if you're viewing locally. It simply won't run from your local filesystem.
Run your source code from a web server, not the file system, even if the web server is
running on your development machine. The browser's handling of HTTP requests from the local
file system are more restrictive than from a web server, even when it's running in the same
machine. For consistent results, you should always run Dojo from within any HTTP web server
(Apache, nginx, Tomcat, IIS, Jetty, etc.).
Lucian's remark about the missing http:, that isn't a problem:
You may also load Dojo from a CDN. This is useful for quickly using Dojo, as it doesn't
require you to host your own copy of Dojo. You'll notice in many of our tutorials that we
show protocol-less URLs, e.g. . This allows you to use Dojo within http and https
applications without adjusting the URL. For more information, check out the Dojo CDN
tutorial
See: Dojo Start
First you had a "http:" missing in the second CDN loading thingy. And then it seems that somehow the dijit dialog files aren't loading... ! You could load them manually OR
you could switch the version of dojo from 1.7.4 to 1.8 (i would advise that) by loading 1.8 files & then it should work. Here is the code:
<!DOCTYPE html>
<html >
<head>
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address">
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name" id="name"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"> </td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" id="ok">OK</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}"
id="cancel">Cancel</button>
</div>
</div>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
Show me!
</button>
</body>
</html>

Inclusion of HTML into another page on the same site?

I have an HTML webpage with a specialized purpose. However, I also have a HTML page with a generic set of actions used elsewhere in my site/app.
Specific Page
<html>
<head><title>Specific Page</title></head>
<body>
<h1>My Specific Action</h1>
<div id="NameAction">
<!-- Action HTML goes here... -->
</div>
</body>
</html>
Generic Action
<html>
<body>
Please tell me your name...
<input id="NameText" type="text" size="50" />
<input id="NameSubmit" type="submit" />
</body>
</html>
The question is, I would like to inject the Generic Action HTML into the NameAction div in the Specific Page. What are some ways I would go about doing this?
Use an iframe
<html>
<head><title>Specific Page</title></head>
<body>
<h1>My Specific Action</h1>
<div id="NameAction">
<iframe src="Path-to-generic-html" />
</div>
</body>
</html>
You could use an iframe, which is a way to embed one html document into another, however this makes it difficult for the two html fragments to interact on the front end (Javascript, etc.). Depending on what templating engine you're using (jsp, php, asp) you should be able to include html fragment into a page as follows (server side include):
Generic Action Fragment
Please tell me your name...
<input id="NameText" type="text" size="50" />
<input id="NameSubmit" type="submit" />
Specific Page
<html>
<head><title>Specific Page</title></head>
<body>
<h1>My Specific Action</h1>
<div id="NameAction">
<% include generic action fragment here using engine specific code %>
</div>
</body>
</html>