Displaying results on separate page - javascript

I have a beginner question. What is the easiest way to take data from a form on one html page and display it on another when the user clicks submit? I have two functions, a Submit() that calls the display() function (the display function displays the data on the page). I first displayed the result on the index.html page but realized it was too cluttered so I opted to print the results to a separate html page. However, I cannot recall the proper way of doing this. I tried putting location.href='results.html' inside my display() function by it didn't work.

You can use just HTML + Javascript to achieve this.
Just create a form with method="get". So the values will be passed by querystring to the another page.
Example:
index.html
<html>
<form method="get" action="results.html">
<input type="text" name="age" />
<input type="submit" value="Send" />
</form>
</html>
results.html
<html>
<h1></h1>
<script>
document.querySelector("h1").innerHTML = window.location.search.substring(1);
</script>
</html>

Whilst technically this is possible using HTML5 local storage, the best solution to your question is to use a server side language such as PHP, which you can read up on here as a beginners tutorial, or in more detail on the PHP Manual
Hope this helps

Here is an example. Write your html page (e.g. "index.html") like
<html>
<head>
<title>form with output</title>
</head>
<body>
<form target="out" action="tst.php">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" name="sub" value="OK">
</form>
</body>
</html>
and, assuming you have PHP available on your webserver you can write a second (php) script (filename: "tst.php") like this
<?php
echo json_encode($_REQUEST);
?>
(The php script simply outputs all passed variables as a JSON string). The important thing that will redirect your form's output into a separate window is the target="out" part in the <form> tag.

Related

How do I refer to a specific HTML <form> or web page from within a .js file?

I have a .js file with setCookie() and getCookie() functions which are working fine. I'm running into a problem when trying to use this same .js file with 2 different web pages. For example, one page's cookie sets name, room number, and beverage selection, while the other page's cookie sets name, address line 1, address line 2, etc...
Thus, I will need to account for differences in the 2 page's forms in the .js file. I thought that I could reference the particular form I'm addressing by its form name (they have different form names) but that isn't working:
if (document.getElementsByTagName("form") == document.getElementsByName("form1"))
{
document.cookie = 'Name = ' + userName; 'expires = ' + userExpires;
document.cookie = 'Room = ' + userPrt1; 'expires = ' + userExpires;
document.cookie = 'Drink = ' + userPrt2; 'expires = ' + userExpires;
}
Thus, my question is, when I have to add an if statement to handle code specific to one particular form (or one particular web page), how do I do this?
Thank you
EDIT: I'm not really sure this will be helpful, but since it was requested, here is the HTML:
<!doctype html>
<html lang="en">
<head>
<title>Javascript</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="mycss.css"/>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body onLoad="javascript:getCookie();">
<header>
<img src="js.png" width="800" height="135"/>
</header>
<main>
<h2>JavaScript Cookie Test</h2>
<br><br>
<form name="form1" id="form1id" action="javascript:setCookie();">
Name: <input type="text" name="customer" id="customer" required /><br><br>
Room: <input type="text" name="roomNumber" id="roomNumber" required /><br><br><br>
What type of coffee would you like to order?<br><br> <!-- It seems radio input would be better here -->
<input type="checkbox" name="cbox" value="regular" />Regular<br>
<input type="checkbox" name="cbox" value="espresso" />Espresso<br>
<input type="checkbox" name="cbox" value="cappuccino" />Cappuccino<br>
<input type="checkbox" name="cbox" value="mocha" />Mocha<br>
<input type="checkbox" name="cbox" value="raspberry" />Raspberry<br><br>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</main>
As I mentioned, everything works fine in terms of setting and getting the cookie, whether my JavaScript is in the HTML file or in a separate .js file. It's only when I try to add code in the .js file that references a specific form (or web page) that I do not succeed.
Should I be referencing the web page instead of the form? If so, how would I do this in an if statement? Thank you!
EDIT: I want to add a brief clarification in case it will be helpful. What I want to know is how to reference the form or web page calling a function in the .js file. If form1 or index1.html called the setCookie() function, I want to add an if code block. If form2 or index2.html called the setCookie() function, I want to add a different if code block. Thank you.
Have you tried giving each form an id and using getElementById() instead ? I think your error is coming from the fact that getElementsByTagName returns an array so you're trying to compare an array of elements to a single element
I'm not sure to understand your question, but in case I have you could just check if the form exists, by its id.
if (document.getElementById('form1') !== null)
{
// there is a form1
}
else if (document.getElementById('form2') !== null)
{
// there is a form2
}
for the first, getElementsByName() doesn't return single node, but a node collection, so if you want to access the first matching node, you have to use
document.getElementsByName("form1")[0]
For the second, you can simply use document.forms property where you have access to all forms on your page.
EDIT:
In document.forms you can access to form by index of its occurrence (document.forms[1] returns the second form on page) or you can use name attribute value (document.forms["form1"] returns form with name "form1").
Okay, I finally figured out an answer to this.
HTML:
<script type="text/javascript">var formName = "form1"</script>
<form name="form1" action="javascript:setCookie(formName);">
insert form code...
</form>
Then, in the .js file:
function setCookie(formName)
{
insert cookie code...
}
And the form name is passed to the JavaScript page, so I can use it to add cookie code that is specific to form1.
I was hoping to find a way to know which form called the JavaScript page, but I'm starting to think that's not possible, since the question has been posted for 5 days without a resolution. Fortunately, this resolves the issue just as easily as knowing which form called the JavaScript page.
I appreciate everyone's input.

HTML injection: cannot insert javascript into textarea

I'm testing a page I made in PHP for HTML injections, but it's not working the way I expected.
I'm trying to insert
<div onmouseover="alert(1)" style="position:fixed;left:0;top:0;width:9999px;height:9999px;">
</div>
inside a textarea. Server-side, I just want to display $_GET with a var_dump for now but it doesn't even get to that: when I click the button it just brings me back to the homepage and #3377832596384266514 is added to the URL. I don't get any error in PHP so maybe it's a server issue (Apache 2.4).
I'm guessing some part of the stack is being defensive, like when you add javascript: to a URL and the browser gets rid of it, but I don't know where to look. I've also tried
<script>alert(foo);</script>
and other variations but then the < and some other characters are stripped.
test.php
<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<form method="get" action="select.php">
<p>
<label for="select">Words
<textarea id="select"
name="select"
cols="50"
rows="1"
maxlength="100"
required
autofocus></textarea>
</label>
</p>
<p>
<button>Send</button>
</p>
</form>
</body>
</html>
select.php
<?php
var_dump($_GET);
Edit: textarea instead of input.
Edit: added all the code.
Change the form method from GET to POST.
GET is possibly causing an issue with how the server handles certain markup in the URL.
OP verified this resolved the issue.
Input tags can't have any content, that's why you can set it as an self-closing element <input />
maybe you need another approach

Echoing data from an iframe to the parent page

I have a hidden iframe where the submission of a form is handled. It goes like this:
<iframe name="foo" style="display:none;"></iframe>
So, I was wondering, if it is possible that after the stuff has happened that needs to be within the iframe, I can use javascript or something to print out data on the parent page? Thanks
EDIT: here is my form code.
<form id="bar" name="bar" method="post" target="foo" action="include/database.php">
<input type="text" name="betamount">
<input type='text' name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<input type="submit" name="submit" value="Bet">
</form>
<iframe name="foo" style="display:none;"></iframe>
Database.php handles these POST requests inside the iframe. Now, there is this one thing inside database.php which goes like this
$betamount = $_POST['betamount'];
$multiplier = $_POST['multiplier'];
$payout = (int)$betamount*(int)$multiplier;
What I want to do is, I want to use AJAX or something to echo out the 'payout' variables inside a div present on index.php
For the purposes of my answer, I'm assuming that the actions you are doing in server side cannot be replaced by a simple client-side one (using javascript).
If you are expecting a return, why don't you use AJAX directly, without iframes? Simply post the data to your php page, and return it asynchronously.
JsFiddle: http://jsfiddle.net/ericwu91/28U8n/
HTML Code:
<input type="text" id="amount" name="betamount">
<input type='text' id="multiplier" name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<button onclick="submit();return false;">Submit</button>
JS Code:
var yourData = {multiplier:$("#multiplier").val(),betamount:$("#amount").val()};
$.post("yourUrl.php",yourData,function(result){
//Success: Use the "result" parameter to retrieve the data returned from server
alert(result);
});
I'm using jQuery's ajax post method. Documentation here: http://api.jquery.com/jquery.post/
The perks of doing it this way is that it does exactly what you wanted to, but simplifies it by using an almost-native javascript property (asynchronous responses).
EDIT: I forgot to put the real jsfiddle link... And after I pasted all the HTML and JS code, I realized how useless the fiddle is, as it won't return any respose at all... xD

Loading External JavaScript file after view page is loaded in AngularJs

<div ng-app>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here" id="inputtext">
<input class="btn-primary" type="submit" value="add">
</form>
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
I want to load specified js file after html load since id of input textbox is used in js .
i have seen different thread and done many experiments for this like
$scope.$on('$viewContentLoaded', function(){
})
but issue not resolved
This is a hack, and not likely the proper way to do things, but try using ng-if to dynamically populate the items on the page:
//HTML
<script ng-init='myVariable = true' ng-if='myVariable' type="text/javascript" src="myJsToLoad.js"></script>
again, this is not the proper way to do things in angular, but it should work
As per my suggestion,
put the entire js code in a function, like below:
function loadmyjs(){
// put your entire related js code here...
}
And inside the current controller, call that js method like, When your id is created....
loadmyjs();

Html form button functionality to single button

I got a script on a website that reads html from a text file each time I press a button. The text file is chosen depending on what name of the page is given. It works fine and dandy with a tag and working as a button inside of it.
The problem I have is that I do not want the and tags at all if I want only one button, I have tried to call the script with jQuery and ajax in various ways without any luck.
Heres the website(its real basic for testing purposes):
<html>
<head>
<title>PHP Flat File Test</title>
</head>
<body>
<?php include("savedinfo.php"); ?>
// This is how it works, its fine for multiple buttons in a row
<form method="get">
<button type="submit" name="page" value="index" action="savedinfo.php">Index</button>
<button type="submit" name="page" value="page1" action="savedinfo.php">Page1</button>
<button type="submit" name="page" value="page2" action="savedinfo.php">Page2</button>
</form>
//But this is the way I'd like to create a button(not exact properties but in one line)
<input id="pageBtn" type="button" page="page1" value="page1" />
</body>
What it does is simply update an region of the website with html from different text files without reloading the page.
The script that loads the html:
<?php
//the script gets a name for a file(page) to load
$page = $_GET["page"];
//if it got no parameters(i.e. first load of the page, goto index)
if($page == null){
$page = "index";
}
//check if the file/page exists, othervise display error page
if(file_exists($page.".txt"))
$filename = $page.".txt";
else
$filename = "404.txt";
$f = fopen($filename,"rt");
$content = fread($f, filesize($filename));
// send back the read html
echo $content;
#fclose($f);
?>
The text file page is just a plain tag and some text that differs from page to page.
Now is it even possible to use a script or something to get rid of the tags if you want to create a button that sends the name data to the script and updating the current page with the new info?
Attribute action belongs to element form
<form action="savedinfo.php">
Form element input has to be inside of form
<form method="get">
<button type="submit" name="page" value="index" action="savedinfo.php">Index</button>
<button type="submit" name="page" value="page1" action="savedinfo.php">Page1</button>
<button type="submit" name="page" value="page2" action="savedinfo.php">Page2</button>
<input id="pageBtn" type="button" page="page1" value="page1" />
Instead of opening, reading and closing of file you may use file_get_contents. It will give you content of chosen file too.
If you need only change and then export content of chosen file somewhere to screen, use
description of page
and then you need to make process of manipulation with chosen file safe. But it is something you should do by yourself.
But really, nobody cannot make anything instead you. We (at least me) may help with great many things, but ... this is all I can help with.
BTW: It is better to have content of pages in any DB, than in files - if it is not really needed to have it in file.
Best regards.

Categories

Resources