I have two web pages: index.php and handler.php
index.php has a form, that submits to handler.php like this:
handler.php?input=some+data
My goal is to do something so that browser's back button takes me to index.php?input=some+data instead of simply index.php. How can I do that? Ideally, I'd prefer to do as much as possible using php instead of js
Solution:
I added submit handler that does this:
function onFormUpdate()
{
window.history.replaceState({} , '', 'index.php?' + document.forms[0].serialize());
}
this way, form will be submitted not from index.php, but from index.php?input=some+data. That is, back button will bring me back to index.php?input=some+data.
You can do this by: (JS)
history.replaceState({}, '', 'index.php?input=some+data');
Before submitting.
But I don't think you need to do this, my browser (firefox, though I think chrome would do the same) saves form data before submitting, so when I go back from the handler, the form still have the input.
Related
I have a php form that works perfectly. However, when the form submits, I want to display a modal and take the user back to the homepage. I have looked this past two hours online but have found no conclusive evidence. My current code is;
if($sentMail) //output success or failure messages
{
?><script>
$(function() {
$("#thankyouModal").modal();
});
</script>
<?php
}else{
die('Could not send mail!');
}
The form collects data then sends all data as an email. I have tried using only php, jquery, amongst everything else. I simply want a modal that says a brief thank you, your form has submitted whilst re-directing the user to the index.html page. Does anyone have any ideas?
Regards,
Michael
If you want to show the message while the form is posting (whether or not it will succeed), use jquery to swallow the onSubmit() event.
$('form').on('submit', function(e){
e.preventDefault();
$("#thankyouModal").modal();
$('form').submit();
});
If you care about if the email is successful, pass a variable back to the view and conditionally show the modal, but this will be serverside validation (will only know after form submission and re-rendering of the view). Otherwise look into doing an asynchronous post with $.ajax
I have this script performed on submit:
function analyze() {
var answer = document.forms["questions"]["answer1"].value;
var item = document.getElementById("content");
item.innerHTML=answer;
}
Script is performed, but div doesn't keep the value, it changes back.
When you do a submit, your page is going to re-render, causing all of your elements to get back to their initial state. So changing the your div or whatever you have in the HTML with class content is going to reset to being back to being blank.
You probably want to save the answer in Browsers LocalStorage or some sort of data structure and then request it out of there.
Save your answer value to localStorage or sessionstorage and then show the same value in your div. If you are submitting form then it will re-load the page and clear the innerHTML of div.
A submit button causes the page to rerender. You have a number of options to prevent that:
Don't use a submit button, use a normal button that happens to SAY submit. You would then run the function "onClick" for the button, not "onSubmit" for the form. (this is what I recommend)
Return false from that function and/or call PreventDefault.
Actually submit it to the server and have the server do the work and return the page (probably not a good choice for performance reasons).
EDIT: you could do something with local or session storage, but that seem a bit rube-goldburg for the problem you have.
I am using below code in .js file using asp.net from page1.aspx page
Form1.action = "testpage.aspx";
Form1.submit();
When the form is submitted the IsPostBack is always True when it's redirected to "textpage.aspx"
Is there any things which i am missing here?
You are submitting a form. That's what postback exactly is.
Redirect would be e.g.:
window.location.href = 'testpage.aspx';
EDIT:
It's not clear from your post whether the testpage.aspx is the same page as the one containing the submitted form. If you want to avoid postback then you'll have to build a querystring, attach it to the URL and perform a redirect. Then you can access the parameters using Request.Params.
I'm new to web design, and I have a question about cache.
I have a page called buy-form.php that gets form data from form.php. I want it to have the cache error that makes Google Chrome read "Confirm Form Submission" when the is page accessed manually.
For example, I only want the page to be accessible when form data is submitted. If someone were to type in the page on the address bar, it should have an error.
A javascript alert("Confirm Form Submission"); can handle your request, and be effective across browsers. Call a function for the event <input [other attributes here] onclick=myFunction()> that has the alert you want. The alert will stop execution of the page until it is confirmed (selected). Attach a security code to your form submission and PHP can check for it and die; if it is not valid.
Add this statement to your buy-form.php:
if(empty($_POST))
{
echo "<script type='text/javascript'>alert('Error!');</script>";
}
You can replace 'Error!' to whatever you prefer
We have a booking form that POSTs to the parent company website. Because this is a different domain we need to implement the GA _linkByPost to pass the GA tracking cookie info across domains.
As the booking form is in a .NET user control it does a postback. On postback we validate, wrap up the booking info, and write a form back to the client with hidden elements required by the target booking engine and add line of javascript to submit the form.
Below is the javascript function I'm using to submit the form:
function postBookingForm() {
var thisForm = document.getElementById('PostForm');
_gaq.push(['_linkByPost', thisForm]);
thisForm.submit();
}
And the relevant form info:
<form id="PostForm" name="PostForm" action="ClientBookingEngineUrl" method="post" >
booking form info in here
</form>
The result is that we fill in the form, hit submit which does a round trip to the server generates a new form and POSTs the info. This all works fine apart from the URL loses the GA cookie info from the query string. If I comment out the form submit line and look at source code I can see the GA cookie info on the querystring - but when posting, I do not see the querystring (using Fiddler).
To clarify:
The above technique works and does what we want with regards to POSTing form data to the booking engine and taking the user there.
If the submit line is commented out you can see the form with the modified action that has the GA stuff appended (using Firebug).
If the form is submitted with the submit line, the querystring info is removed (confirmed by Fiddler).
Am I missing something obvious? Are there some gotchas regarding JS submit, form POSTs and querystrings? Or is there a simple trick I'm missing?
Cheers
EDIT 1
An oddity has occured.
If I alert the form action before and after the _gaqPush then we can see the URL in its before and after state and it's as expected.
alert('1 form action = ' + thisForm.action);
_gaq.push(['_linkByPost', thisForm]);
alert('2 form action = ' + thisForm.action);
Alert 1 shows the pre-modified action and alert 2 shows the action with the GA info.
With the alerts in place it submits WITH the GA info in the query string.
If I comment out the alerts the GA info is NOT in the query string...
I'm starting to think the form or something is not ready so I'm trying it with JQuery's document ready.
EDIT 2
Wrapping the method call in document ready doesn't help. I'm confused as to why action URL is correct AFTER displaying it in an alert but incorrect if I don't alert it.
Answering this for posterity.
The problem is the _qaq (Google Analytics Queue) hasn't had time to modify the form before the call to submit() the form.
The solution is to push a function onto the _gaq object that submits the form so it will happen directly after the form modification is done.
function postBookingForm() {
var thisForm = document.getElementById('PostForm');
_gaq.push(['_linkByPost', thisForm]);
_gaq.push(function() { thisForm.submit(); });
}
I tried a simple HTML page that calls _gaqPush and submits immediately. This also fails.
Adding a 1000ms delay works (for the most part) so I suspect the alerts just gave the GA script time to modify the form.
I'm closing/accepting this as it seems down to submitting the form too quickly after the GA call.