I am not a big web programmer, and have a friend who wants me to help him with something.
He wants to be able to have a form that once it is submitted changes to say something like "Thanks for submitting" and have the form info disappear. He wants it to be easy for anyone to use, so he can give it to various people to use on their sites.
I was thinking I could use javascript to do it, but not really 100% sure. I want to avoid anything that isn't HTML as much as possible so that it will be usable by as many people as possible.
Thanks.
What is supposed to happen to the information in the form? Doesn't matter?
If you want it to be pure HTML there's only one good solution: Write one HTML page with the form, and another almost identical one with the success message in place and the form data hidden. Simple.
On the submitting side:
<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>
On the receiving side (successForm.html)
<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>
However, if you need something to change on the very same page, you're going to have to use something non-HTML. HTML just won't make any decisions about what to display. It is dumb... it just displays.
It's very easy to use JavaScript to detect when the form was submitted, and then hide the elements you need to hide, and show the success message:
<!-- Goes in the <head> or in a seperate script -->
<script type="text/javascript">
var theSubmitButton = document.getElementById('formSubmit');
theSubmitButton.onclick = function() {
var theFormItself =
document.getElementById('theForm');
theFormItself.style.display = 'none';
var theSuccessMessage =
document.getElementById('successMessage');
theSuccessMessage.style.display = 'block';
}
</script>
<!-- Goes in the body -->
<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
<input type="text" name="emailAddress" />
<button id="formSubmit" type="submit">Send Info</button>
</form>
Of course, this example is oversimplified. It doesn't do anything with the data, and it doesn't follow best practices, or check that the data is valid in any way. I'm just trying to give a basic idea of how to use JavaScript for this purpose. If you're not a programmer, then coming up with a small, distributable piece of software might be a good job for someone else.
However, you still need some mechanism to store, email or otherwise DO something with the form. Add an edit to your question and I'll be happy to clarify my answer with a specific example.
(Another note, I didn't try to run that Javascript, so if you see an error, please just note and I'll fix it)
Try the jquery form plugin. This will achieve what you're after in an elegant way with minimal coding. In addition to this you'll need to download jquery.
This is a javascript solution, however it's safe to assume that everyone is using a javascript capable browser.
The standard way to do this is to submit the form to a different page (submit.php, for example), which provides a new page with the thankyou message. No javascript, no DHTML.
You could use javascript to replace the innerHTML of a huge div containing everything, or remove all the elements, but I'd advise against it.
There's 2 options:
Old school forms:
Person clicks submit and form data gets sent server side via GET or POST,
the page loads again and displays "Thanks for submitting"
New school javascript AJAX
Person clicks submit and javascript submits form data to server side via AJAX and removes the form elements to then add "Thanks for submitting"
Anything else is some hybrid of both these techniques.
I know you want to avoid anything other than html but this simple php code may help. You could use php within the page
fill out form and press submit to send data to form handler
In form handler, have data processed and then redirect back to the form page with a header('Location: yourwebaddresshere?form=submited');
Then in the original form page, add a php IF statement above the form code:
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}
Related
I want to send an email which has a submit button, on click of which, a post request would be triggered.
How can I create such an email?
What kind of code would be required?
The code I have written:
<h1>Show a push button:</h1>
<p>The button below activates a JavaScript when it is clicked.</p>
<br/>
<input type="button" value="Click me" onclick="msg()">
That approach you appear to be trying to take is to use JavaScript. This absolutely will not work. Email clients do not allow JavaScript to execute in HTML formatted email.
You could place a regular form inside the email:
<form action="http://example.com" method="POST">
<button>Submit</button>
</form>
… however, form support in email clients is not perfect.
The safe approach is to ask the user to do a two-step process: use a regular link to a webpage containing the form which the user can load in their web browser and then click the submit button for.
If you don't care about the usual protections, then you could have JavaScript submit the form on that page automatically, or change the endpoint that expects a POST request to expect a GET request and use a regular link in the original email.
I am currently trying to submit form data to a third party site from our own wordpress based website.
I need it to open in a new blank window or tab. I am able to do this so far using a target="_blank" on the form itself.
The tricky part is I also want the data to save on my own site.
The only way I know how to do this double action is to hook in after the post is saved on my site but this means the form is submitted to my own site and then I use javascript or something to redirect to the third party site but this creates pop up warnings which I can't have in this case...
Does anybody have any ideas around this and if I have not been detailed enough please don't hesitate to ask me more info.
Thanks
Perhaps submit by AJAX first to the local site, then -- on success -- submit the form & navigate them whole page to the other domain?
With jQuery:
<form id='form' method='post' action='http://remote.website.com/send-data-here'>
<input ...>
<input ...>
...
<button type='button' onclick='doubleSubmit();'>Submit</button>
</form>
<script type='text/javascript'>
var LOCAL_URL = "/myForm-receiver.php";
function doubleSubmit() {
var data = $('#form').serialize();
$.post( LOCAL_URL, data, new function(response){
// Successfully posted by AJAX to Local Website;
// -- now POST the form to the destination site,
// -- & navigate to that result page.
$('#form).submit();
});
}
</script>
I'm assuming you want to receive a copy of the data locally, but the user will navigate to the destination domain for the "result page".
Need to submit the data through ajax and saved the data in your data base then redirect to third party url or submit to there use like jQuery(selector).ajax(dataString:--);
may this help you thanks!
I am sending a form post to a third party and it is returning a page with Success if the action is done. Once I get the success page, I need to redirect user to a Thank You page. Can somebody tell me how the see if the success page is returned and redirect to another page?
<form name="abc" method="POST" action="third party url" >
<input />
<input />
</form>
... how about submitting the form and receiving response in an iframe? If you can use an iframe you'll be able to detect the change then.
the code goes like this:
<form name="abc" method="POST" action="third party url" >
<input/>
<input/>
</form>
but i am not sure how to capture the response
You won't be able to do this easily with plain javascript. When you post a form, the form inputs are sent to the server and your page is refreshed - the data is handled on the server side. That is, the submit() function doesn't actually return anything, it just sends the form data to the server.
If you really wanted to get the response in Javascript (without the page refreshing), then you'll need to use AJAX, and when you start talking about using AJAX, you'll need to use a library. jQuery is by far the most popular, and my personal favourite. There's a great plugin for jQuery called Form which will do exactly what it sounds like you want.
This question is so basic that I'm almost embarrassed to ask it, but it's got me stumped. I've written a short code snippet to explain it:
<form id="MyForm" method="post" enctype="multipart/form-data" >
<input type="file" id="get_file" name="get_file" >
<input type="submit" name="submitForm" value="Submit" >
</form>
<?php
if (isset($_POST['submitForm'])) {
echo "<script type='text/javascript'>alert('Selected')</script>";
} else {
echo "<script type='text/javascript'>alert('Not selected')</script>";
}
?>
When I load this page the first time, the alert says "Not selected". Good. I submit the form and the alert says "Selected". Also good. But when I refresh the page, it's still "Selected". I don't understand why the "IF" statement allows this to happen. I want my form to submit data once and not do it again until my user does it, not every time the page refreshes.
This seems like the kind of question that noobs ask when they're too lazy to use Google, but I've looked (there are even some threads on this site that sort of address this issue, but nobody has presented a solution). I've read up on HTML forms, but I still don't get it.
Is this something everyone knows but me? Can somebody clue me in? Thanks.
EDIT: If anybody ever stumbles over this thread and needs a quick-and-dirty fix, here's one I just stumbled on. Just press the select key again, easily done using jQuery. The form is resubmitted, but the form variables are all cleared. Not elegant, maybe, but it works perfectly.
When you reload the page, it is resubmitting the POST request, which means the submitForm=Submit is part of the request body.
You should use the Post/Redirect/Get pattern to avoid this.
I have a situation where I have a A.jsp, which has an <iframe> with source B.jsp.
There is a form in A.jsp, which when submitted should ideally reload only the <iframe>.
If I do a response.sendRedirect("B.jsp"), obviously the entire A.jsp page is redirected to B.jsp. I don't want to reload A.jsp.
How can this be done?
Set the form submit target to the iframe's ID.
<form ... target="results">
...
</form>
<iframe id="results" ...></iframe>
This way the response of the form submit request will end up in that iframe.
Needless to say that this is a poor practice whenever both content originate from the same domain. Consider server-side includes like <jsp:include>. That's way much better for user experience and SEO. If necessary you can always bring in some jQuery to do the asynchronous magic.