I want to show a acknowledgement (more precisely a popup) when form is successfully submitted.Previously I was using Ajax to validate form and display pop up but now I want to achieve same without Ajax.
Is there any event in javascript/Jquery which is invoked after successful form submission? or Is there any other alternative available?
Thanks!
EDIT 1 :
I am using Spring 3.0.
Here is the detailed scenario
1. User fill the form and click on submit
2. Request will be sent to controller (Server side)
3. Validation will be done at server side
4. If errors are present I am using Spring validation to show it and goto Step 1
5. else successfully submit the form and show a popup.
6. After user clicks on popup redirect to other page.
EDIT 2:
I am completely agree with the opinion that Ajax is the right/best way to do it and I already implemented it using Ajax. But client want to use non-ajax approach and I cannot go beyond his words.
This question piqued my curiosity, as I was trying to do something similar using the iframe solution suggested by Leon. Eventually I succeeded, however, I would like to suggest that rather than using a direct onload property, you make use of the jQuery .load() event on the iframe.
Edit: So here's how I set up the form (using HTML5, so quotes aren't necessary):
<div id=message></div> /* Example-specific, see below */
<form method=post action=backend.php target=iframe>
// Form data here
</form>
<iframe name=iframe></iframe>
I added the following CSS code to hide the iframe:
iframe {
border:0px;
height:0px;
visibility:hidden;
width:0px;
}
Don't use display:none, as some browsers will refuse to submit to an element that's not displayed.
Then in my $(document).ready() JavaScript...
$('iframe').load(function(){
// Your load event here.
});
You could also change that about, so that it specifically only triggers after a specific event (if you're using dynamic forms, for example). In such a case, you may want to use .unbind('load') before .load() to prevent previously-added .load() functions from calling.
Now when the form is submitted, it loads into the hidden iframe. When the iframe loads the page (backend.php, in my example), it triggers the .load() function. In my specific case, I set up a <div id=message> to display a message:
$('iframe').load(function(){
$('#message').html('The form successfully submitted.');
});
Without Ajax? No Problem - let's go back to how the Web really used to work in the past ;-)
Since I am getting you don't want to refresh the current page, how about this approach:
have a hidden iframe on the same page, with a name & id
point the target property of your form to the name given in the previous step
submitting the form will now be "hidden"
you can have an onload property on the iframe set to a javascript method of your liking to get called once the form finished submitting
that javascript code could also retrieve the contents of the iframe and check for your server-side response (maybe even including an error msg)
notify the user about the result
This is all fairly easy to setup, let us know how it works for ya..
I am not sure which language you are coding in.
One option - use javascript.
On the submit button onclick event (client side event), perform the page validation and display alert pop up, if the page is valid.
<script type="text/javascript">
function OnSubmitClientClick() {
Page_ClientValidate();
if (Page_IsValid) {
alert('Form has been successfully submitted.');
return true;
}
}
</script>
Why do you want to drop AJAX approach? Without AJAX, server side validation implies page reload. On page reload you would lose client side (JS) state.
One alternative is to use hidden frame/iframe/a new window to perform server side validation on form submit(possibly use the pop up you are referring to in your question). Which in my opinion is not the right approach(A BIG NO). You may rather stick to AJAX or go with non AJAX way of form submit.
Related
The problem is quite simple to understand but quite hard to execute. I am currently facing some clients that turn off their browser Javascript by default and this screw up my website a bit. Since my website send ajax requests on form submit, stop the form submit using Javascript, turning JS off means the form will be sent through and that's unexpectedly.
What I am trying to ask and achieve is whether it is possible to just using html purely to stop a form from submitting?
I think the best answer is; to have the original form action point to an error page, asking the user to turn on javascript.
Then let your javascript code fill in the form action parameter, once the ajax state is complete.
Alternatively or additionally, you could use a <noscript> tag as suggested in the comments, to generate a message on the original page.
I think you can simply change your submit button tag to an input and style it to look like a button and remove the type="submit" that's all. with out ajax it will not respond.
How can I force any change to a checkbox (inside a form) or to a drop-down menu selection to cause a HTTP POST to be issued by the browser?
Bandwidth is not an issue, page reloading is not an issue and I don't want to go the full AJAX route.
What I really want is an HTTP POST to be done when the user clicks on a checkbox (or selects something from a drop-down menu), etc. without the user having to click 'Submit' after its change.
Maybe it should be done with some JavaScript on the client-side? (I couldn't succesfully Google anything)
Use Javascript. Add onchange="document.getElementById('myFormId').submit()" to the elements, or do this programatically. myFormId must be replaced by the HTML id of the form element.
You could use the JavaScript onchange event to then call the submit() function on the form.
if you have a form already set up just put a class to the element you want to use as trigger and then
for select
$(".classname").change(function(){
$("#formid").submit();
});
for checkbox/radio
$(".classname").click(function(){
$("#formid").submit();
});
AFIK it can't be done without client-side scripting. The easiest way would be to trigger the submit event for every form change. With jQuery it's done with the following code:
<script type="text/javascript">
$(function() {
$("input[type=checkbox],input[type=radio],select").change(
function(evt)){evt.target.form.submit();}
);
});
</script>
If you don't use jQuery, you'll have to write some boilerplate event handling code. See this introduction for more info on JavaScript event handling.
I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!
If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.
If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function
This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.
I have a web application written in pure JavaScript (no pre-generated HTML except for the document which loads all the JS files).
This app contains a login form which is created dynamically when the document.ready event event is triggered. I trick the browser into displaying the "Remember password?" dialog by posting the login form into a hidden iframe before logging in using ajax (in Firefox the password appears on the saved password list, so this part obviously works) but saved passwords never get filled in after the login screen is loaded again at a later time. The same thing happens in Firefox and Safari.
Is there something I can do or some function I can call to trigger autofill?
UPDATE: autofill works in Safari on initial page load, but not when user logs out and the login form is recreated without a page reload. In Firefox it never works.
In addition to wrap the form elements in a form element, make sure all the input (and maybe even the form) has unique name and id attributes that doesn't change. The name should probably be something descriptive like password for the password etc., not really sure to which degree browsers use this info, but "autosuggest"/"magic wand" features may work better if you use a standard name.
And of course you should make sure you're not setting any autosuggest/autofill attributes to false (the js framework might do so for some reason, if you're using any).
A third possibility is that some browsers maybe does autofill before your script loads and writes the form to the page, try making a static html version of the form and see if that works.
The easiest solution (if static forms work) is to force a page reload on logout (you probably do want to discard the "state" of the running javascript after log-out anyway, so refreshing is really a Good Thing)
Some browsers require "form" tag to enable local username & password storage. Had the same problem in AJAX application, and in my case I just added
<form>...</form>
tags.
Can't you use a similar trick - use an iframe to load the form and then when the login form is submitted you, in reality, submit the iframe form , which will contain the saved password.
To get the 'password' to appear in the visible form I think you could measure the length of the password in the iframe form and then fill the visible form's password field with the same number of *.
I've been researching this on and off for a number of months now, but I am incapable of finding clear direction.
My goal is to have a page which has a form on it and a graph on it. The form can be filled out and then sent to the CGI Python script (yeah, I'll move to WSGI or fast_cgi later, I'm starting simple!) I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that. I have a form and a graph now, but they're on separate pages and work as a conventional script.
I'd like to avoid ALL frameworks except JQuery (as I love it, don't like dealing with the quirks of different browsers, etc).
A nudge in the right direction(s) is all I'm asking for here, or be as specific as you care to.
(I've found similar guides to doing this in PHP, I believe, but for some reason, they didn't serve my purpose.)
EDIT: The graph is generated using Flot (a JQuery plugin) using points generated from the form input and processed in the Python script. The Python script prints the Javascript which produces the graph in the end. It could all be done in Javascript, but I want the heavier stuff to be handled server-side, hence the Python.
Thanks!
I'm assuming that you have two pages at the moment - a page which shows the form, and a page which receives the POST request and displays the graph.
Will a little jQuery you can do exactly what you want.
First add to your form page an empty div with id="results". Next in your graph plotting page put the output you want to show to the user in a div with the same id.
Now attach an onclick handler to the submit button (or to the individual parts of the form if you want it to be more dynamic). This should serialize the form, submit it to the plotting page snatch the contents of the id="results" div and stuff them into the id="results" div on the the form page.
This will appear to the user as the graph appearing on the page whenever they click submit.
Here is a sketch of the jQuery code you will need
$(function(){
// Submit form
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
$.ajax({
type: "POST",
data: $("form").serialize(),
success: function(data, textStatus) {
$("#results").replaceWith($("#results", $(data)));
}
});
};
$("form input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form").submit(function () { return false; });
});
Edit
Just to clarify on the above, if you want the form to redraw the graph whenever the user clicks any of the controls not just when the user clicks submit, add a few more things like this
$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)
If you'll be loading HTML and Javascript that needs to be executed, and your only reason for not wanting to load a new page is to preserve the surrounding elements, you could probably just stick the form in an IFRAME. When the form is POSTed, only the contents of the IFRAME are replaced with the new contents. No AJAX required either. You might find that the answers here give you sufficient direction, or Google for things like "form post to iframe".
I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that.
The general pattern goes like that:
Generate an XMLHttpRequest (in form's onsubmit or it's 'submit' button onclick handler) that goes to your Python script. Optionally disable the submit button.
Server side - generate the graph (assuming raw HTML+JS, as hinted by your comment to another answer)
Client side, XmlHttp response handler. Replace the necessary part of your page with the HTML obtained via the response. Get responseText from the request (it contains whatever your Python script produced) and set innerHtml of a control that displays your graph.
The key points are:
using XMLHttpRequest (so that the browser doesn't automatically replace your page with the response).
manipulating the page yourself in the response handler. innerHtml is just one of the options here.
Edit: Here is a simple example of creating and using an XMLHttpRequest. JQuery makes it much simpler, the value of this example is getting to know how it works 'under the hood'.
Update img.src attribute in onsubmit() handler.
img.src url points to your Python script that should generate an image in response.
onsubmit() for your form could be registered and written using JQuery.