Response title
This is preview!
Move this topic
Does submitting forms have to be so dificult? Need help.
in Using jQuery
•
10 years ago
Hi all,
I have been using Prototype.js for a while now with my backend on my website. I can very simply submit forms and do Ajax calls etc. Now, since I am adding image upload and crop functionality, I wanted to switch over to jQuery as it has nice plugins for such stuff. I am discovering though that the ajax implementation in jQuery is so much more complex to use, especially when dealing with forms. What required one line in the <form> attribute in prototype requires an entire 20 lines inserted into a <script> tag with jQuery, or a form processing plugin etc.
Is there no equivalent of the prototype version (below)?
new Ajax.Updater('windowSpace', 'sample.php?action=sample', {asynchronous:true, parameters:Form.serialize(this)});
See how simple that was?
Please help! Or please show me a complete image upload and crop solution that will work with Prototype.
I hope the most popular javascript framework out there doesn't have the lamest form submission solution.
I have been using Prototype.js for a while now with my backend on my website. I can very simply submit forms and do Ajax calls etc. Now, since I am adding image upload and crop functionality, I wanted to switch over to jQuery as it has nice plugins for such stuff. I am discovering though that the ajax implementation in jQuery is so much more complex to use, especially when dealing with forms. What required one line in the <form> attribute in prototype requires an entire 20 lines inserted into a <script> tag with jQuery, or a form processing plugin etc.
Is there no equivalent of the prototype version (below)?
new Ajax.Updater('windowSpace', 'sample.php?action=sample', {asynchronous:true, parameters:Form.serialize(this)});
See how simple that was?
Please help! Or please show me a complete image upload and crop solution that will work with Prototype.
I hope the most popular javascript framework out there doesn't have the lamest form submission solution.
1
Replies(11)
$.ajax(url, data, function(){
// this is a callback to use when the submission is complete
});
Pretty easy, no?
This article illustrates a complete file upload with jQuery - http://www.peachpit.com/articles/article.aspx?p=1766159
Please excuse the code color - the publisher did that.
Leave a comment on jay.blanchard's reply
Thanks for the reply. Can you explain to me how to capture the form data to send in the .ajax function? Every jQuery solution for forms ve seen so far was like this:
http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/
(having to manually capture each field, or using a series of functions to do so)
http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/
(having to manually capture each field, or using a series of functions to do so)
Leave a comment on havanagilaboy's reply
i agree with jay.blanchard,
as for your data build you can use the zerialize function
so it will be something like that
Leave a comment on jDev's reply
So, here's what I tried. Doesn't work so far. Any obvious things I'm missing? I'm pretty inexperienced with javascript, having worked mostly with php, so working with the html elements like jQuery does is still a bit strange to me.
<form id="insertArticle" onsubmit="$.ajax('articles.php?action=insert', $(this).serialize(), function(data) { $('#windowSpace').html(data);});">
<form id="insertArticle" onsubmit="$.ajax('articles.php?action=insert', $(this).serialize(), function(data) { $('#windowSpace').html(data);});">
Leave a comment on havanagilaboy's reply
First, did you include the jQuery core library?
Second, instead of doing it inline like above do this -
<form id="insertArticle" action="articles.php" method="post">
<input type="hidden" name="action" value="insert" />
//rest of form
In the head of your page put this -
<script type="text/javascript">
$(document).ready(function() {
$('#insertArticle').submit(function(e) {
e.preventDefault(); // page will not refresh on submit
var thisData = $(this).serialize(); // creates a query string passed to $_POST on PHP side
var thisURL = $(this).attr('action');
$.ajax(thisURL, thisData, function(result) {
/* does the submit return anything from the PHP?
* if so, handle here
*/
alert(result);
});
});
});
</script>
Leave a comment on jay.blanchard's reply
I have just gotten around to trying this and have little success. The form just redirects to the action url. The form itself is loaded with jQuery - would that make a difference?
Leave a comment on havanagilaboy's reply
if you want to disable the form redirection you should just add at the end of you r submit function a
- return false;
make sense?
Leave a comment on jDev's reply
Well, according to jay.blanchard, e.preventDefault(); was supposed to do that. I am confused though as to where to insert return false; it I am to use it. Pardon my ignorance of javascript - it is something I use only every once in a while, so I am still not very familiar with it.
Leave a comment on havanagilaboy's reply
i'll reuse
jay.blanc.. code to show you where to insert it
http://learn-jquery.net
- <script type="text/javascript">
- $(document).ready(function() {
- $('#insertArticle').submit(function(e) {
- e.preventDefault(); // page will not refresh on submit
- var thisData = $(this).serialize(); // creates a query string passed to $_POST on PHP side
- var thisURL = $(this).attr('action');
- $.ajax(thisURL, thisData, function(result) {
- /* does the submit return anything from the PHP?
- * if so, handle here
- */
- alert(result);
- });
- return false;
- });
- });
- </script>
http://learn-jquery.net
Leave a comment on jDev's reply
So, here is a detailed breakdown to see if anyone can help:
In my index page head I have the following:
In my index page head I have the following:
- $(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
var thisData = $(this).serialize();
var thisURL = $(this).attr('action');
$.ajax(thisURL, thisData, function(result) {
alert(result);
});
return false;
});
});
I substituted the Id of the form for the general "form" tag selector because I have several forms I will be dealing with in the same way. I am loading these forms into the application with the following function (also in the header):
- function loadPage(div, page) {
$.get(page, function(data) {
$('#'+div).html(data);
});
}
This inserts the form into a "window" div that is hidden and gets displayed with jQuery. Initially I had missed jay's advice to put the action in a hidden insert rather than in the url, but I have corrected that and the form is still performing the usual redirect to the action page istead of doing it through jQuery. Here is the form code:
<form id="insertArticle" method="post" action="articles.php" > <input type="hidden" name="action" value="insert" /> <input name="article_id" type="hidden" value="" /> <table cellpadding="2" cellspacing="0" class="lalign"> <tr valign="top"> <td> <span>Categoria:</span> </td> <td> <select name="article_cat">
<option value="1">options here</option> </select> </td> </tr> <tr> <td> <span>Título:</span> </td> <td> <input type="text" size="75" name="article_title" value="" /> </td> </tr> <tr> <td valign="top"> <span>Posição:</span> </td> <td> <input type="text" name="article_list_order" size="5" value="" /> </td> </tr> <tr> <td> <span>Descrição:</span>
</td> <td> <textarea name="article_description" cols="75" rows="2"></textarea> </td> </tr> <tr> <td valign="top"> <span>Texto:</span>
</td> <td> <textarea name="article_text" cols="75" rows="30"></textarea> </td> </tr> </table> <input type="submit" value="Ok"/> <a class="button" onclick="$('#overlay').toggle(); loadPage('windowSpace', 'blank.php');">Cancelar</a> </form>
Leave a comment on havanagilaboy's reply
since you form is dynamically added to the dom you should use live or on (if you are using a new version of jquery)
so with live you can use the following
$(document).ready(function() {$('form').live('submit',function(e) {
e.preventDefault();
var thisData = $(this).serialize();
var thisURL = $(this).attr('action');
$.ajax(thisURL, thisData, function(result) {
alert(result);
});
return false;
});
});
http://learn-jquery.net
Leave a comment on jDev's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to havanagilaboy's question