I have a HTML form (called form.html)and a JavaScript function such that when form is submitted, information in that form will be displayed.
Now I want all those info will be shown in new HTML page (called confirm.html), where should I go from?
NOTE: No php or sever-side or anything that really seriously related, it's just simple OFFLINE HTML-form problem, I just have 2 html place in same folder, I will test it on my browser, that's it. Only thing that I worry is how to use information from form.html file in confirm.html file since they are obviously separated.
Thank you very much, here is my form.html ( I dont have confirm.html yet)
<HTML>
<HEAD>
<TITLE>Contact</TITLE>
<script type="text/javascript">
function addtext()
{
var fname = document.myform.first_name.value;
var lname = document.myform.last_name.value;
var email = document.myform.email.value;
document.writeln("Thank you! You have just entered the following:");
document.writeln("<pre>");
document.writeln("First Name : " + fname);
document.writeln("Last Name : " + lname);
document.writeln("Email Address : " + email);
}
</script>
</HEAD>
<BODY>
<center>
<b>CONTACT US</b> <br></br>
<form name="myform">
<label for="first_name">First Name </label>
<input type="text" name="first_name" maxlength="50" size="30">
<br>
<label for="last_name">Last Name </label>
<input type="text" name="last_name" maxlength="50" size="30">
<br>
<label for="email">Email Address</label>
<input type="text" name="email" maxlength="80" size="30">
<br>
<input type="submit" value="Submit" onClick="addtext()">
</form>
</BODY>
</HTML>
Check out the window object of JavaScript: http://www.devguru.com/technologies/javascript/10855.asp
It has a property location, if you write into it, your browser will redirect:
window.location = "http://www.google.com";
Note though, that this will not post your data to confirm.html. what you are trying to do without server-side scripting is not very useful. An HTML form will use CGI (common gateway interface) to send data to a server, that can then process the information. If you use the file:// protocol (as you seem to be doing; all local, static files), there is no server-side to process the data, only JavaScript.
If using the GET method of sending the data through CGI, you could extract the data from the URL using javaScript (as mentioned in another question). To do this, just update your form like this:
<form action="confirm.html" method="get">
And do not put a onClick handler on the submit button, just let it submit.
Many other tools exist though that way more are suitable for the job: server-side scripting languages, examples include PHP, ASP, JSP. For local setups, your best best is using XAMPP.
If you don't want to rely on server-side technology, this becomes more complicated (and hacky, I might add). Probably the easiest would be to generate a url like this on submit -
http://localhost/confirm.html?first_name=val1&last_name=val2&email=val3
then add some code to confirm.html to unpack this. Here's a related question you may find helpful.
If you'd allow me a moment of editorializing, what exactly are you trying to do? If this is just a personal project to see how html works, then I'd strongly recommend starting to learn about server-side technology - once you start wanting to handle user data and persist state, you're pretty much forced to use the server. The web is by design pretty stateless; you can't pass variable in-between pages without either using the server, or through some very complicated AJAX & DOM updating techniques which tend to rely on specialized server files anyway. You can run a PHP & MySQL server locally using existing technology, and if you're interested in expanding your knowledge of web technology this is an inevitable step.
Related
I am new to HTML and Javascript, but I have tried to do research on how to get a form to send its information to an e-mail address when the submit button is selected. Most of my research showed that PHP is needed, but when I asked my professor, he said it can be done using only javascript and the assignment needs to be submitted that way. Below is what I am trying to get to work.
<SCRIPT LANGUAGE="JavaScript">
function mailMe(form){
Subject=document.Registry.name.value;
location = mailto:XXXXXX#yahoo.com?subject="+Subject;
return true;
}
</SCRIPT>
<FORM NAME=“Registry” onSubmit="return mailMe(this.form)" >
<h3><font size=6pt> Visitor Registration </font></h3>
</br>
Name <input type="text" name=“name”><br>
<br>
E-Mail Address <input type="text" name=“mail”><br>
<br>
<INPUT TYPE="submit"><br>
</FORM>
It can't be done using only javascript or client-side technologies.
But you can probably open a new window with a mailto link.
Please note this won't send an e-mail, but instead open your local e-mail application to send an e-mail.
This is a really bad idea. You should use AJAX and PHP, this is really the better method.
If you really want your code, you have a few errors. This is correct:
var Subject = document.getElementById("name").value;
window.location = "mailto:XXXXXX#yahoo.com?subject=" + Subject;
Then you have to add an ID to the name field:
<input type="text" name=“name” id="name"><br>
But let me say that you really should use PHP mail(), because then not the client email program is used to send the mail and all is done in background.
I just tried the example below which I found at Microsoft and it worked fine. Can even be done without Javascript by simply adding the "mailto:" to the form action attribute. Also note that the form element names correspond to mailto query string parameters, i.e., "subject" and "body".
References: Microsoft mailto Protocol and RFC2368:The mailto URL scheme
Micosoft SharePoint, Adobe LiveCycle, and other middleware are able to process the emailed forms on the back end. Or one could roll their own using Java, C#, PHP, etc. Yet, that wasn't part of the class assignment ... er ... I mean question.
<html>
<body>
<form action="mailto:user#example.com" method="get">
<input name="subject" type="hidden" value="Message Title">
Feedback:<br/>
<textarea name=body cols="40">
Please share your thoughts here
and then choose Send Feedback.
</textarea>
<input type="submit" value="Send Feedback">
</form>
</body>
</html>
Hello and thank you for viewing my question. I am a complete beginner and am looking for simple ways to do the following...
What I have in seperate linked documents:
HTML, CSS, Javascript, PHP
What I am having trouble with:
I need to use something like JSON (although I would also accept XML requests or Ajax at this point if they work) to transfer variables from Javascript to PHP. I need the variables to search in a database, so they need to be literally available within PHP (not only seen on a pop-up message or something).
I have seen a LOT of different ways to do this, I have even watched tutorials on YouTube, but nothing has worked for me yet. The things I am having the biggest problem with is that when I add a submit button to my form it doesn't submit my form and I don't know why.
Form code snippet:
<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>
The second to last line there doesn't work. Do I need javascript to submit the form? Because I really thought that in this case it was part of the functionality of the form just like method="post"...
The other thing is that for JSON, I have no idea what to do because my variables are determined by user input. Therefore, I cannot define them myself. They are only defined by document.getElement... and that doesn't fit the syntax of JSON.
Those are really my main problems at the moment. So if anyone could show me a simple way to get this variable transfer done, that would be amazing.
After this I will need to search/compare in my database with some php/sql (it's already connecting fine), and I need to be able to return information back to a in HTML based on what I find to be true. I saw one example, but I am not sure that was very applicable to what I am doing, so if you are able to explain how to do that, that would be great also.
Thank you very, very much.
April
You don't need ajax to submit this form. You don't even need javscript. Just do this:
<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>
This will send the form data to mytarget.php (can be changed of course)
See that i have added the name attribute to your text-field in the form and i changed the type of the button to submit.
Now you can work the Data in mytarget.php like this:
<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>
You wanted to have a check for length in the submit. There are two ways to this:
Before the input is send (the server is not bothered)
Let the server Check the input
for 1 you will have to append a event listener, like this:
var form = document.getElementById("form");
form.addEventListener("submit", function(event){
console.log("test");
var name = form.elements['userinput'].value;
if(name.length < 3){
alert("boy your name is short!");
event.preventDefault();
}
});
Enter a name with less then 3 characters and the form will not be submitted. test here: http://jsfiddle.net/NicoO/c47cr/
Test it Serverside
In your mytarget.php:
<?
$username = $_POST['userinput'];
if(strlen($username) > 3)
echo "Your name is: ".$username;
else
echo "your name was too short!";
?>
You may also do all this with ajax. You will find a lot of good content here. But I'd recommend a framework like jQuery to do so.
The problem is in this line
<form id="form" name="input" method="post" action="javascript:proofLength();">
The action should be a PHP page (or any other type of server script) that will process the form.
Or the proofLength function must call submit() on the form
In the php page you can obtain variable values using $_GET["name"] or $_POST["name"]
To summarize; your code should look like this
<form id="form" name="input" method="post" action="yourpage.php">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit">
</form>
and for your php page:
<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>
If you want to do something in your javascript before submitting the form, refer to this answer
My situation is this: I was able to write text from a form in a different html page. But what I wanted to do is create a link using only the text in that form.
Originally I used javascript, especially widget.preferences (a sort of method to save the changes made in the form) and the "var" tag:
<script>
addEventListener
(
'DOMContentLoaded',
function()
{
// get the var elements with an id and set their textContent to the corresponding widget.preferences
var vars = document.querySelectorAll( 'var[id]' );
for( var i=0,element=null; element=vars[i++]; )
{
element.textContent = widget.preferences[ element.id ];
}
},
false
);
</script>
</head>
<body>
<h1>Popup window</h1>
<p>Here is a list of preferences and their associated value:</p>
<ul>
<li><var id="foo"></var>
<li><var id="bar"></var>
<li><var id="baz"></var>
<li><var id="check"></var>
<li><var id="group1"></var>
<li><var id="myMultipleSelect"></var>
</ul>
</body>
But, as I said at the beginning, my goal is to make links using the text from the form on the other page. The form is as follows:
<fieldset>
<p>
<input id="text1" name="foo" type="text"></input>
<label for="text1">foo</label>
</p>
<p>
<input id="text2" name="bar" type="text"></input>
<label for="text2">bar</label>
</p>
<p>
<input id="text3" name="baz" type="text"></input>
<label for="text3">baz</label>
</p>
</fieldset>
I was not sure exactly what your question is, but for retrieving info from other pages with javascript, the answer is ajax.
There is an important caveat to this answer: To do this, your page and the page of the form you are trying to get data from need to be on the same domain. Modern browsers have security measures in place against XSS (cross site scripting), so you will not be able to get that information otherwise.
To get the contents of the form, make an ajax request for the page with that form on it, and then parse it's html content as XML. You can then navigate through its DOM or use a framework like jQuery to extract the info you need for your links.
If you are new to ajax, try the w3c schools tutorial at http://www.w3schools.com/ajax/default.asp
If the webpage you are trying to access is on another domain, you may be out of luck. There are several proposed solutions for making friendly cross-site requests, such as microsofts XDR object, but there is no standard, so it will be quite a bit of work (if it is possible at all) to get that to work across the board.
Additionally, the restrictions against XSS are made in the browser where the js is currently running, so if you have access to a server-side language you can "shuttle" requests from a handler of some kind into your page.
Im a begginer in Android programming and google has redirected me countless times to this useful website. Here is my problem :
Using java.io I managed to mimic a HTTP POST request as such :
From Source Code :
<div id="box1"><form method="post" action="/index2.php" name="form" id="form" class="form" onsubmit="return quickly();">
<div id="textbox"><textarea rows="30" cols="50" name="BOX1" class="textbox"></textarea></div>
<div id="textbox2"><input onfocus="this.value=''" type="text" name="BOX2" class="mobilia" value=""/></div>
My Java Code :
String data = URLEncoder.encode("BOX1", "UTF-8") + "=" + URLEncoder.encode(string1, "UTF-8");
data += "&" + URLEncoder.encode("BOX2", "UTF-8") + "=" + URLEncoder.encode(string2, "UTF-8");
URL url = new URL("http://www.slidesms.com/sendsms2.php");
URLConnection conn = url.openConnection();
conn.setDoOutput(true);
OutputStreamWriter wr = new OutputStreamWriter(conn.getOutputStream());
wr.write(data); ...
And this used to work like magic! Except that the website got updated and now the same position of the source code as before became as such :
div id="textbox"><Script Language='Javascript'>
<!--
document.write(unescape('%3C%69%6E%70%75%74%20%6F%6E%66%6F%63%75%73%3D%22%74%68%69%73%2E%76%61%6C%75%65%3D%27%27%22%20%74%79%70%65%3D%22%74%65%78%74%22%20%6E%61%6D%65%3D%22%69%65%6E%6F%22%20%63%6C%61%73%73%3D%22%6D%6F%62%69%6C%65%32%22%20%76%61%6C%75%65%3D%22%43%6E%74%72%79%20%43%6F%64%65%20%26%20%4D%6F%62%69%6C%65%20%4E%6F%2E%22%20%2F%3E'));
//-->
</Script></div>
I have no experience whatsoever with Javascript, could someone even put me back on the right track ? I dont even know where to start looking, I used to mimic the POST method, now I cant understand the source code anymore. Any help would be extremely appreciated :)
That javascript writes the <input> element out to the page, in place of the script tag.
See http://jsfiddle.net/4Vj9B/
But why it does this, I honestly have no idea. It seems whatever code you have that is generating those form elements wants to generate it via obfuscated javascript. Likely due to a very strange setting/preference/configuration somewhere.
The reason this is usually done is to obfuscate email addresses in mailto links to make it harder for spiders to harvest emails. But in this case, using javascript to insert a form elements makes very little sense, and what ever chunk is "helping" you by doing needs a swift kick in the nuts.
System.out.println(URLDecoder.decode("%3C%69%6E%70%75%74%20%6F%6E%66%6F%63%75%73%3D%22%74%68%69%73%2E%76%61%6C%75%65%3D%27%27%22%20%74%79%70%65%3D%22%74%65%78%74%22%20%6E%61%6D%65%3D%22%69%65%6E%6F%22%20%63%6C%61%73%73%3D%22%6D%6F%62%69%6C%65%32%22%20%76%61%6C%75%65%3D%22%43%6E%74%72%79%20%43%6F%64%65%20%26%20%4D%6F%62%69%6C%65%20%4E%6F%2E%22%20%2F%3E", "UTF-8"));
gives you
<input onfocus="this.value=''" type="text" name="ieno" class="mobile2" value="Cntry Code & Mobile No." />
I have a javascript form where I am using innerHTML to set some text.
When the form submits that information is lost.Is there anyway I can make it "sticky".I was thinking a cookie but that's about all I know.
Thanks
<form "action="" name="myform">
<input type="text" name='name">
<div id="theName"></div>
</form>
Quick example I am capturing the name and need the div to show the name after the form submits.
You will need to persist the data somehow. There are several options:
Store it on the server. When the form is submitted, your server-side script will receive the data; it can persist it in a database, session variable, or some other form of storage that's appropriate for your application. Whenever the client re-visits the page with the form, have the server generate the form's HTML with the persisted data.
Use HTML5's local storage. While not supported in legacy browsers, all modern ones provide the local storage API. When the user submits the form (attach an event listener to the form's "submit" event), you can store the form data by making calls to localStorage[key] = value and retrieving it with localStorage[key].
Store it in a cookie. Although I don't recommend this approach, you can create a cookie with the form data. The only restriction is that the data needs to be represented as a string, but I recommend JSON. However, you probably should not use this approach since cookies are sent to the server for each request; if the form fields contain a lot of data, then you're also unnecessarily sending a lot of data to the server.
Using HTML5's local storage gives you a self-encapsulated approach that requires no server-side configuration:
<form action="" name="myform">
<input type="text" name="name">
<div id="theName"></div>
</form>
<script type="text/javascript">
(function() {
var form = document.getElementsByName('myform')[0];
if (localStorage['name'] !== undefined) {
var displayArea = document.getElementById('theName');
displayArea.textContent = localStorage['name'];
}
form.addEventListener('submit', function() {
var nameField = document.getElementsByName('name')[0];
localStorage['name'] = nameField.value;
}, false);
})();
</script>
Are you setting the "value" attribute of the input tags to something or blank? you can just remove (remove the attribute itself) that so that the last value set will be used (true only for non-password type inputs. also, haven't tried it in all browsers.).
Or better yet, you can use serverside script like (PHP, ASP, RUBY, etc) to set the attribute value to the previously submitted.
<form method="post">
<input type="text" name="txtinput" id="txtinput" value="<?php echo $_POST['txtinput']?>"/>
<input type="submit" value="submit">
</form>
doing it in js only is much more complicated and unreliable since your going to use cookies.
PS: I'm assuming your not using XHR(AJAX) to submit your forms since XHR's don't refresh pages or re-initializes inputs unless you told them to.
This should be happening server-side. Javascript is for enhancing a page, it's not to be depended on for data manipulation.
Your script, converted to PHP, would look like
<form action="" method="post" name="myform">
<input type="text" name='name">
<div id="theName"><?php
if(isset($_POST['name'])) { echo $_POST['name']; }
?></div>
</form>
...and it would work every time, without having to call any JS.
You'll have to handle the form data somehow anyway - how were you intending to retrieve the data without a server-side script?