I'm working on a site where I'm using Contour to store form data. But validation and storing the data isn't the only thing that needs to happen when the user presses the submit button. Also, I don't want the page to reload on submit.
Here's an overview of the things I want to do on submit and the order in which I want them to happen:
1) Validate the form. If the form is not valid, don't go on - just show the standard error messages (I have them all set up in Contour,
2) If the form validates, I need to call some jQuery functions of my own that do things.
3) If my jQuery functions terminate OK, I can call a callback. In this callback I want to submit the form to Umbraco Contour and have the data stored.
4) No postback/page reload! I want to handle the "thank you"-stuff on my own in jQuery.
I'm not sure how to achieve this. I'm thinking that perhaps I need to add the various form fields myself and do all the validation myself. That way I get control over the submit button. But when it comes to the actual form submission, I'm not sure where to submit it to?
Any pointers regarding this is greatly appreciated!
I second this request for more information, specifically #4. Single page form response is something I've been struggling with for a while with Umbraco, using Contour and other form sending methods.
Would it be possible to create a separate page that contains only the Contour form and then build a custom form with custom validation (jQuery). Then I use AJAX to post the form to the separate page with the Contour form?
I think the answer to my question above is NO - that doesn't work.
This is really bad news for me since I'm building a campaign web site where I was planning on using Contour as a nice way to store campaign data. Campaign sites need to be slick and therefore I use a lot of jQuery, overlays opening pages in iFrames, Facebook Connect etc. Posting stuff using regular postbacks just doesn't cut it in an environment like this and even if it did I need to do a lot of other things with the form data using jQuery before submitting it to Contour.
I guess I'll have to rethink the whole setup - probably scrap Contour entirely - and write my own usercontrol to handle data posted from the form.
I added the jQuery Form Plugin to the mix and asked it to handle the submission of my Contour form and IT DID! The page does not reload and I can add my own handlers to the submission process using the options that the jQuery Form Plugin provides. Here's my bare bones test code (which lives inside the jQuery document ready context):
Now I will have to go on and see if this can be combined with Contour validation. If not, it's not a problem since I can add my own validation using jQuery.
What a nice way to end a long and tedious work week!
I found the Cultiv rest package, installed it and it works perfect. When I used the jQuery Form Plugin I had some problems with the success callback function.Thanks for the tip!
Submitting the Contour form using AJAX?
Hi!
I'm working on a site where I'm using Contour to store form data. But validation and storing the data isn't the only thing that needs to happen when the user presses the submit button. Also, I don't want the page to reload on submit.
Here's an overview of the things I want to do on submit and the order in which I want them to happen:
1) Validate the form. If the form is not valid, don't go on - just show the standard error messages (I have them all set up in Contour,
2) If the form validates, I need to call some jQuery functions of my own that do things.
3) If my jQuery functions terminate OK, I can call a callback. In this callback I want to submit the form to Umbraco Contour and have the data stored.
4) No postback/page reload! I want to handle the "thank you"-stuff on my own in jQuery.
I'm not sure how to achieve this. I'm thinking that perhaps I need to add the various form fields myself and do all the validation myself. That way I get control over the submit button. But when it comes to the actual form submission, I'm not sure where to submit it to?
Any pointers regarding this is greatly appreciated!
/Thomas Kahn
I second this request for more information, specifically #4. Single page form response is something I've been struggling with for a while with Umbraco, using Contour and other form sending methods.
Would it be possible to create a separate page that contains only the Contour form and then build a custom form with custom validation (jQuery). Then I use AJAX to post the form to the separate page with the Contour form?
/Thomas
I think the answer to my question above is NO - that doesn't work.
This is really bad news for me since I'm building a campaign web site where I was planning on using Contour as a nice way to store campaign data. Campaign sites need to be slick and therefore I use a lot of jQuery, overlays opening pages in iFrames, Facebook Connect etc. Posting stuff using regular postbacks just doesn't cut it in an environment like this and even if it did I need to do a lot of other things with the form data using jQuery before submitting it to Contour.
I guess I'll have to rethink the whole setup - probably scrap Contour entirely - and write my own usercontrol to handle data posted from the form.
/Thomas
Yessss! Sweet victory!
I added the jQuery Form Plugin to the mix and asked it to handle the submission of my Contour form and IT DID! The page does not reload and I can add my own handlers to the submission process using the options that the jQuery Form Plugin provides. Here's my bare bones test code (which lives inside the jQuery document ready context):
var options = {
beforeSubmit: function() {
alert("About to submit");
}, // pre-submit callback
success: function() {
alert("Have submitted");
} // post-submit callback
};
$("#competitionForm").ajaxForm(options);
Now I will have to go on and see if this can be combined with Contour validation. If not, it's not a problem since I can add my own validation using jQuery.
What a nice way to end a long and tedious work week!
/Thomas Kahn
Solid! I can't wait to try this, thank you Thomas.
-Amir
Comment author was deleted
Hi Thomas,
You should get in touch with http://twitter.com/cultiv he created the RestContour package http://our.umbraco.org/projects/website-utilities/cultiv-restcontour (demo here http://www.cultiv.nl/blog/2010/11/18/making-contour-even-sexier )
Hi Tim!
I found the Cultiv rest package, installed it and it works perfect. When I used the jQuery Form Plugin I had some problems with the success callback function.Thanks for the tip!
/Thomas
Comment author was deleted
No problem, glad I could help
is working on a reply...