Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> jQuery - Form submission

This is a discussion on jQuery - Form submission, within the Javascript section. This forum and the thread "jQuery - Form submission" are both part of the Frameworks category.

 
 Reply to this topicStart new topic
> jQuery - Form submission
cosmicbdog
post Jul 3 2008, 12:28 AM
Post #1


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Totally off topic, but related to jQuery...

I'm attempting to get my head around jQuery.ajax stuff. Namely, the submission of a form. I grabbed myself a copy of the jquery.form.js but found that really didn't do anything. So I decided to see if I could make my own form submission using the default code from jquery.

Surely there is a better way then what I am trying to do here...

CODE
<script type="text/javascript">

function locationSubmit() {

    $j("#loading").fadeIn("slow");

    $j.ajax({
       type: "POST",
       url: "dbprocess.php",
       data: "action="+document.jForm.action.value+"",
       success: function(msg){
            $j("#formWrapper").hide("slow");
         alert("Location has been saved (not really though)");
       }
     });

}
</script>

<form id="jForm">
        <input type="hidden" name="action" value="addloc" />
        <input type="locID" value="23423" />
        <input type="text" name="location" value="blah blah blah" />
        <input type="button" value="Save" onClick="locationSubmit();">
</form>



Basically, how can I go about getting ALL the inputs from my form into this function so that it submits to dbprocess.php? Is there a much better way of doing this? My logic tells me to put every variable in a long string in the data: place there but that seems longwinded to me.

Any ideas master rakuli? smile.gif
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 3 2008, 02:04 AM
Post #2


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Here is my submit function (which does work...)
CODE
<script type="text/javascript">

function locationSubmit() {

    $j("#loading").fadeIn("slow");

    $j.ajax({
       type: "POST",
       url: "dbprocess.php",
       data: "action=" + document.jForm.action.value + "&locID=<? echo $_GET['locID']; ?>&region_id=" + document.jForm.region_id.value + "&location=" + document.jForm.location.value + "&address=" + document.jForm.address.value + "&googleMap=" + document.jForm.googleMap.value + "&maxBooking=" +document.jForm.maxBooking.value,
       success: function(html){
            $j("#formWrapper").hide("slow");
            $j("#loading").fadeOut("slow");
            $j("#confirmation").append(html);
            $j("#confirmation").fadeIn("slow");
       }
     });
    
    
    

}
</script>


Check out the long data string??? Help me master. I need to be submitting forms 10x this size and can't imagine the everest of code to do that with this way of doing it.
Go to the top of the page
 
+Quote Post
Rakuli
post Jul 3 2008, 07:48 AM
Post #3


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
QUOTE
I'm attempting to get my head around jQuery.ajax stuff. Namely, the submission of a form. I grabbed myself a copy of the jquery.form.js but found that really didn't do anything. So I decided to see if I could make my own form submission using the default code from jquery.


You pobably could have stopped at the jquery.form.js as this does everything you need.

You are doing more work than necessary in your second post.

When you say that jquery forms isn't working, what exactly do you mean?

CODE
$('#formID').ajaxForm({ beforeSubmit : function () { /* need to do something before submitting? */ },
                                     success : function () { /* Something on success? */},
                                     failure : function () { /* Oh! bad. Oh well, do something on failure as well */ }
                                   });


Nothing more than that is needed with jquery.form.js. The method and action are all taken from the form element itself. Be sure to include the from.jq *after* the jquery library itself. If it's something else, like an error, post the error here... ( I may also split these threads to a new topic too biggrin.gif )


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 3 2008, 10:37 AM
Post #4


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
QUOTE (Rakuli @ Jul 3 2008, 10:48 PM) *
When you say that jquery forms isn't working, what exactly do you mean?


Hmm, well basically, it seemed that even though I was registering the form to the jquery.form.js it still just submitted as if it was a normal html form.

I'm going to try again. Your example of it seems so easy. When i looked at the examples it looked so easy and with most of the jquery stuff its worked so easily.

Thanks rakuli...


encore.. encore.
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 3 2008, 11:10 AM
Post #5


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
why does your example work and theirs doesn't? seriously... you have the midas touch sir
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 10 2008, 03:06 AM
Post #6


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
i am wondering how I would go about having 2 submit with this jquery form method.

Currently if I have 2 buttons, 1 which default submits, the other which adds an additional variable I would do something like so:
CODE
<input type="submit" value="Save Changes" />&nbsp;                    
<input type="submit" value="Save Changes AND re-Send Booking Emails" onclick="this.form.action=this.form.action+ \'&eTicketSend=1\'" />


However it seems that jquery.forms.js overlooks that onclick and just submits the form.

Thinking out loud I'm wondering if I might be better off doing something at the start in my <script></script> tags something like
CODE
<script>
$j("#idForSecondSubmit").click(function() {

     $j('<input type="hidden" name="eTicketSend" value="1">').appendTo('#myFormId');

});
</script>


Is there a better way to do this?


On top of this, because I'm submitting to another php file there are various responses that can come back which I've pre-programmed into that file. Ideally, I'd like to echo out from that file and have whatever is printed to screen appear in a div on the current page. Using jquery.form.js how is that done? like how its done using the standard jquery ajax methods?

This post has been edited by cosmicbdog: Jul 10 2008, 03:10 AM
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 10 2008, 03:31 AM
Post #7


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
I tried the following:
CODE
<script type="text/javascript">
  
   $j(document).ready(function() {
  
       $j("#myAlternativeButtonId").click(function() {
      
           $j('<input type="hidden" name="eTicketSend" value="1">').appendTo('#myFormId');
      
       });
  
       $j('#myFormId').ajaxForm({
      
  
           success : function () {
          
      
               $j('<h3>Booking Saved</h3>').appendTo('#confirmationInner'); // how can this be the php output of the file I just submitted to?
  
          
           }
  
       });
      
   });
  
   </script>


It appears to ignore that insertion of the eTicketSend hidden input appending and goes straight for the kill with the form submission. Is this terrible logic of mine to think this would work? Or is it just dodgy code?

This post has been edited by cosmicbdog: Jul 10 2008, 03:36 AM
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts 12 xkatx21x 728 28th February 2008 - 11:41 PM
Last post by: Rakuli
No New Posts   4 thesealportalteam 784 20th February 2008 - 09:00 AM
Last post by: thesealportalteam
No new   14 902 724 22nd February 2008 - 02:45 AM
Last post by: c010depunkk
No New Posts   5 thesealportalteam 422 22nd February 2008 - 11:48 PM
Last post by: Monie
No New Posts   3 c010depunkk 452 21st February 2008 - 09:41 AM
Last post by: c010depunkk