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.
Related
The CMIS specification says this about the HTTP response to a submitted HTML form:
In general, the response is not useful for an end-user.
Therefore, clients should redirect the response to a hidden HTML iframe.
The iframe’s onLoad event can be used as an operation status notification.
("client" above means a webpage in a browser)
I don't see how it is possible, in HTML, to "redirect the response to a hidden HTML iframe".
The form can not be inside the hidden iframe, as the form needs to be visible. And if the writers had meant to hide the iframe once the form has been submitted, the wording would have been different.
I wonder why they don't recommend ajax instead, but that is not the question. I want to follow their recommendation, or prove them that their recommendation makes no sense.
Can anyone give me an example of such a form that "redirects the response" to an iframe?
Or an example of what the specification was really trying to say?
Or is it just impossible to achieve?
Ajax only works properly if the application is hosted on the CMIS repository because of the same origin policy.
The hidden frame approach works even if the application is served from a different host.
Here is an example:
<script type="text/javascript">
function createCallback() {
...
}
</script>
<form action="..." method="POST" target="createResult">
...
</form>
<iframe name="createResult" style="display:none;" onload="createCallback()"></iframe>
Here is a complete example:
https://svn.apache.org/repos/asf/chemistry/opencmis/trunk/chemistry-opencmis-server/chemistry-opencmis-server-bindings-war/src/main/webapp/web/index.html
I have a form at the bottom of the page. It's a normal form. I've set the action to #adding-show and the form's id is "form". The result is that the form submits to the current page (the browser doesn't send #adding-show to the server).
If the submission is invalid/fails, the form is focused and visible = good.
If the submission is valid, the server redirects the browser to the same page (to get rid of the postback), without hash, but the browser 'remembers' the hash, so the browser redirects to #adding-show at the bottom of the page.
In short: keeping the hash is good when submission is invalid/fails, but the hash shouldn't be used if submission succeeded.
The question: is there a way to do that? Redirect correctly and 'forget' the hash appropriately. Some JS is okay. I can make the server do anything.
If you like code, it's on Github.
Or:
<form id="adding-show" method="post" action="#adding-show">
I've solved it with a piece of 'conditional' JS: https://github.com/rudiedirkx/series/blob/83c74f183d4c10474e2b92d819349120ad0094b6/index.php#L627 It's only printed if the page is in postback, so the form needs to be highlighted.
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.
First let me set the situation.
I am writing a simple client html page and a simple server side program.
In detail, the page has a submit button to POST some data to the server program.
The problem is that any time I test the page to push the submit button ,the browser displays the new page which displays only the return message my server program returned.
How can I modify the html or the server side program so that the browser keeps the page unchanged before after the submit button is pushed.
I know an easiest way ; letting the sever program returns the same string as the client html page.
Thank you in advance.
In a regular form submission, your page will be whatever the server sends back. The form's action might be the same page, and then your server-side code can read the value of any input fields, and set the values in the response back to what they were in the request. This should result in the page looking the same as it did before the submit button was pressed. However, the page has "changed" in the sense that it was reloaded.
Alternatively, your form can make an Ajax request, which means that you'd need to use Javascript to intercept and stop the form submission, and then use additional coding to send the Ajax request, and then receive and process the response.
What you want is probably a postback:
http://en.wikipedia.org/wiki/Postback
1.) AJAX
You could use JavaScript and AJAX to POST the data.
2.) IFrame (not recommended)
You could also create a hidden IFrame and set the target attribute of the form to it.
What you want to do doesn't seem to be very clear.
If you want to submit your POST data without loading a new web page, you can use Ajax. It may be simple to do it in jQuery, and even simpler if you serialize your form data.
$('form').submit(function() {
$.post('your-post-url',$(this).serialize(),function(data) {
alert('Data posted!');
});
return false;
});
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
}