I'd like a button on page1.html. This button will pass data to page2.html which has a form on it, load that data into the form, and submit the form on page2.html. Is this possible? How would it be done? I can't seem to find any examples of this.
Thanks!
Of course the best thing to do is to use a backend... but I guess you wouldnt be asking if you had that option.
one thing you can do is use the anchor in the URI, like: /page2#?field=value&fld=val
Then on page load, check for an anchor tag and process it:
$(function(){
let hash = window.location.hash.substr(1);
})
Here's a plunkr to get you off the ground: https://plnkr.co/edit/u9fPGFZedXGmKbbdXVvy?p=preview
So once you have the hash you would parse it to JSON and configure your form with it.
It isn't obvious that it works because of how these fiddle-like sites operate. But it does work! To check it out, open the preview in separate window mode, and copy the url, open that url in a new tab, and add a sample hash on it, and press enter so it takes. then reload the page.
I ended up using PHP's Post method:
From originating page1.php page:
<form action="page2.php" method="post">
<input type="hidden" name="MyName" id="MyId" value="MyVal">
<input type="submit" value="Post to page2">
</form>
In receiving page2.php page:
<?php if (!empty($_POST)) : ?> // Check for Post data
<script>
document.getElementById("MyId").value = '<?php echo $_POST["MyName"]; ?>'; //update form on page2.php by field ID
document.getElementById('FormToSubmit').click();
</script>
<?php endif;?>
Works perfectly
You can simply add (target="_blank") to form tag and you can get data in specific action page
<form action="test.php" method="post" target="_blank">
<input type="text" name="test" />
<button type="submit" name="submit">Submit</button>
</form>
Related
I have the page VIEW-SALE.PHP
on this page I have a submit button form to view the invoice in print format, there is the code:
<span style='display:inline-block'>
<form name='print' id='print' action='print-invoice.php'
target='_blank' method='post'>
<input type='hidden' name='invoice' value='$invoice'>
<input class='submit-all' type='submit'
value='Print the invoice'
onClick='window.print();return false'></form></span>
The code must just open the page PRINT-INVOICE.PHP and print it but when I click it it show the print dialog but of the current page I am VIEW-SALE.PHP so it does not show the PRINT-INVOICE.PHP
How does it can be done?
doesn't post just post data you may need a header redirect the redirect being php code
header("Location: blabla")
I found this you may find it of help
redirect after submit
the problem is the onClick='window.print();return false'. The window object is the current window containing the form. You should include an javascript event handler in your PRINT-INVOICE.PHP:
... <body onload="window.print()"> ...
I have two forms. I want to submit both forms with 1 button. Is there any method that can help me do it?
Example:
<form method="post" action="">
<input type="text" name="something">
</form>
<form method="post" action="">
<input type="text" name="something">
<input type="submit" value="submit" name="submit">
</form>
I want both forms to be submitted with 1 submit button. Any help would be appreciated.
The problem here is that when you submit a form, the current page is stopped. Any activity on the page is stopped. So, as soon as you click "submit" for a form or use JavaScript to submit the form, the page is history. You cannot continue to submit another page.
A simplistic solution is to keep the current page active by having the form's submission load in a new window or tab. When that happens, the current page remains active. So, you can easily have two forms, each opening in a window. This is done with the target attribute. Use something unique for each one:
<form action='' method='post' target='_blank1'>
The target is the window or tab to use. There shouldn't be one named "_blank1", so it will open in a new window. Now, you can use JavaScript to submit both forms. To do so, you need to give each a unique ID:
<form id='myform1' action='' method='post' target='_blank1'>
That is one form. The other needs another ID. You can make a submit button of type button (not submit) that fires off JavaScript on click:
<submit type='button' onclick="document.getElementById('myform1').submit();document.getElementById('myform2').submit();" value='Click to Submit Both Forms'>
When you click the button, JavaScript submits both forms. The results open in new windows. A bit annoying, but it does what you specifically asked for. I wouldn't do that at all. There are two better solutions.
The easiest is to make one form, not two:
<form action='' method='post'>
<input type='text' name='text1'>
<input type='text' name='text2'>
<input type='submit' value='Submit'>
</form>
You can place a lot of HTML between the form tags, so the input boxes don't need to be close together on the page.
The second, harder, solution is to use Ajax. The example is certainly more complicated than you are prepared to handle. So, I suggest simply using one form instead of two.
Note: After I submitted this, Nicholas D submitted an Ajax solution. If you simply cannot use one form, use his Ajax solution.
You have to do something like that :
button :
<div id="button1">
<button>My click text</button>
</div>
js
<script>
$('#button1').click(function(){
form1 = $('#idIFirstForm');
form2 = $('#idISecondForm');
$.ajax({
type: "POST",
url: form1.attr('action'),
data: form1.serialize(),
success: function( response ) {
console.log( response );
}
});
$.ajax({
type: "POST",
url: form2.attr('action'),
data: form2.serialize(),
success: function( response2 ) {
console.log( response2 );
}
});
});
</script>
You could create a pseudo form in the background. No time to write the code, jsut the theory. After clicking submit just stop propagation of all other events and gather all the informations you need into one other form you append to document (newly created via jquery) then you can submit the third form where all the necesary infos are.
Without getting into why you want to use only 1 button for 2 forms being submitted at the same time, these tools that will get the input data available for use elsewhere:
Option 1...
Instead of using <form> - collect the data with the usual Input syntax.
ex: <input type="text" name="dcity" placeholder="City" />
Instead of using the form as in this example:
<form class="contact" method="post" action="cheque.php" name="pp" id="pp">
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button class="button" type="submit" id="submit">Do It Now</button>
</form>
use:
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button type="button" onclick="CmpProc();" style="border:none;"><img src="yourimage.png"/> Do It Now</button>
Then code the function CmpProc() to handle the processing/submittion.
Inside that function use the Javascript form object with the submit() method as in...
<script type="text/javascript">
function submitform() {
document.xxxyourformname.submit();
}
</script>
Somehow I suspect making the two forms into one for the POST / GET is worth reconsidering.
Option 2...
Instead of POST to use the data to the next page consider using PHP's $_SESSION to store each of your entries for use across your multiple pages. (Remember to use the session_start(); at the start of each page you are storing or retrieving the variables from so the Global aspect is available on the page) Also less work.
Look man. This is not possible with only HTML. weither you gether the inputs in one form or else you use jquery to handle this for you.
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.
I need to redirect one page to another page using the form value.
I have this code, which i think is fine for first page and what should i put in the other page where i want to show the data ??
<meta http-equiv='refresh' content='0;url=http://site.com/page.php'>
<form action="http://site.com/page.php" method="post" name="myform">
<input type="hidden" name="url" value="<?php echo $url; ?>">
<script language="JavaScript">document.myform.submit();</script>
</form>
Regards
You can't mix a meta-refresh redirect with a form submission per se.
Also, meta-refreshes are terrible anyway. Since you are already in control of the receiving page, and it's using PHP, use that to accomplish the redirect. Try this:
<form action="http://site.com/page.php" method="post" name="myform">
<input type="submit" value="Go!" />
</form>
Then, in page.php:
<?php
// Act on the input, store it in the database or whatever. Then do the redirect using an HTTP 302.
header('Location: http://example.com');
?>
If you need the form to pass the destination along to page.php, you'll want to sanitize it to prevent a LOT of security problems. Here's a rough outline.
<form action="http://site.com/page.php" method="post" name="myform">
<input type="hidden" name="destination" value="http://example.com" />
<input type="submit" value="Go!" />
</form>
Then, in page.php (copied re-encoding from answer https://stackoverflow.com/a/5085981/198299):
<?php
$destination = $_POST['destination'];
$url_parsed = parse_url($destination);
$qry_parsed = array();
parse_str($url_parsed['query'], $qry_parsed);
// Check that $destination isn't completely open - read https://www.owasp.org/index.php/Open_redirect
$query = parse_url($destination);
$destination = "{$url_parsed['scheme']}{$url_parsed['host']}{$url_parsed['path']}?" . http_build_query($query);
header('Location: ' . $destination);
?>
I haven't double-checked that code (just wrote it here in the browser), but it should suffice as a rough sketch.
in site.com/page.php
<script>window.location.href = 'newPage.php';</script>
You will have to write this outside the php tags though.
To redirect a page in PHP, use:
<?php
header('Location: url/file.php');
?>
To refresh to a different page in HTML, use:
<meta http-equiv='refresh' content='0;url=http://url/file.php'>
In the content attribute, 0 is the amount of seconds to wait.
To refresh to a different page in JavaScript, use:
window.location.href = 'url/file.php';
When none of these work, follow an anchor link, using HTML:
Click here to go now!
To answer your question, it can be done several ways:
1) Very bad, requires two files, super redundant
HTML file:
<form action="http://site.com/page.php" method="post" name="myform">
<input type="hidden" name="url" value="<?php=$url?>">
</form>
<script type="text/javascript">
// Submit the form
document.forms['myform'].submit();
</script>
Page.php:
<?php
// Catch url's value, and send a header to redirect
header('Location: '.$_POST['url']);
?>
2) Slightly better, still not recommended
<form action="http://site.com/page.php" method="post" name="myform">
<input type="hidden" name="url" value="<?php=$url?>">
</form>
<script type="text/javascript">
// Set form's action to that of the input's value
document.forms['myform'].action = document.forms['myform'].elements['url'].value;
// Submit the form
document.forms['myform'].submit();
</script>
3) Still very redundant, but we're getting better
<form action="http://site.com/page.php" method="post" name="myform">
<input type="hidden" name="url" value="<?php=$url?>">
</form>
<script type="text/javascript">
// Simply refresh the page to that of input's value using JS
window.location.href = document.forms['myform'].elements['url'].value;
</script>
4) Much better, save yourself a lot of trouble and just use JS in the first place
<?php
// Start with a PHP refresh
$url = 'url/file.php'; // Variable for our URL
header('Location: '.$url); // Must be done before ANY echo or content output
?>
<!-- fallback to JS refresh -->
<script type="text/javascript">
// Directly tell JS what url to refresh to, instead of going through the trouble to get it from an input
window.location.href = "<?php=$url?>";
</script>
<!-- meta refresh fallback, incase of no JS -->
<meta http-equiv="refresh" content="0;url=<?php=$url?>">
<!-- fallback if both fail (very rare), just have the user click an anchor link -->
<div>You will be redirected in a moment, or you may redirect right away.</div>
Save that with a .php extension, and you should be good to go.
I have an ajax based login form for my site and have noticed that browsers are not recognising it as a login form and are not remembering passwords for it to ease the user's login.
When the submit button is pressed the values and sent to serverside to check and a response is sent back. If the check passes the the session is set and the page performs a javascript redirect into the members area. The html is very simple and could be the cause of the problem.
HTML:
<input type='text' class='email'>
<input type='password' class='password'>
<a class='submitBtn'>SUBMIT</a>
Thanks guys!
I think I'll do it in another way.
Using a form to submit to a hidden iframe , so the window will act like ajax post(do not refresh the window) and the password remember feature will works
like
<form method="post" id="" action="checkDetail.php" target="myIframe">
<input type='text' class='email'>
<input type='password' class='password'>
<input type="submit" name="" value="" id="Submit"/>
</form>
<iframe name="myIframe" id="myIframe"></iframe>
in this way you have to change a little bit of your response code to notice iframe parent the submit result.
update
it will done automatically by browser. If a form specify 'target' attribute , and there is a iframe has a name attribute that exactly the same as the target attribute of the form, the form action will submit to the iframe.
so when your request is success , your response will appear in the iframe content. Try code like this in the response.
<?php
//php checks database here
?>
<script>
parent.formSuccess({
//your response infomation
});
</script>
and define a formSuccess method in the outer page to handle the submit callback
Found answer on stack : How can I get browser to prompt to save password?
My Version:
<form id='loginForm' target="passwordIframe" method='POST' action="blank.php">
<input name='email' type='text' st='Email'>
<input name='pass' type='password' st='Password'>
<button type='submit'>LOGIN</button>
</form>
<iframe id="passwordIframe" name="passwordIframe" style='display:none'></iframe>
I can confirm that this triggers the password remember features for Chrome (other browsers not yet tested). It is important that the action attribute points to a blank.php. I chose a blank php page and echoed out the $_POST array just to make sure that the values were being submitted via the form.
I will now implement this with my old code that simply uses javascript to pull the values out of the field and checks them via an ajax call. I wonder if I can do away with the submit button all together and just use javascript to submit the form?