[jQuery] Re: Updating input values before the submit.

[Jake McGraw]

The problem is that the form is actually submitting before you can get a
response, this is the nature of an asynchronous request (the first A in
AJAX). Perhaps you could bind the the submit to one of the callbacks:

jQuery("#googleCheckout").submit(function() {
    var $form = jQuery(this);
    if (!$form.is(".okgo")) {
        jQuery.ajax({
            type: "POST",
            dataType: "json",
            url: "/json-checkout",
            error: function(){
                // Do nothing, "okgo" not added
            },
            success: function(json){
                jQuery("input:first").val(json.gec);
                jQuery("input:eq(1)").val(json.ges);
                // This will prevent the AJAX message from being sent again
                $form.addClass("okgo");
                // Successful AJAX message, re-submit, this time for real
                $form.submit();
            }
        });
        return false;
    }
});

On Dec 18, 2007 11:27 AM, Jesse R. <[EMAIL PROTECTED]> wrote:

>
> I have the following html code:
>
> <form id="googleCheckout" action="https://sandbox.google.com/checkout/
> cws/v2/Merchant/747474/checkout" method="post">
> <input type="hidden" name="cart" value="somevalue" />
> <input type="hidden" name="signature" value="anothervalue" />
> <input type="image" name="Google Checkout" alt="Fast checkout through
> Google"
> src="https://sandbox.google.com/checkout/buttons/checkout.gif?
>
> merchant_id=747474&amp;w=160&amp;h=43&amp;style=WHITE&amp;variant=TEXT&amp;loc=en_US
> "
> height="43" width="160" />
> </form>
>
> I want to dynamically load those values with a json request
> immediately before the submit, but not any sooner.  I tried doing the
> following code:
>
>
> jQuery("#googleCheckout").submit(function() {
>                         jQuery.ajax({
>                           type: "POST",
>                           dataType: "json",
>                           url: "/json-checkout",
>                           error: function(){return false;},
>                           success: function(json){
>                            jQuery("input:first").attr({
>                                        value: json.gec
>                                        });
>                                jQuery("input:eq(1)").attr({
>                                        value: json.ges
>                                        });
>                                return true;
>                        }
>                           });
>                         });
>
> However, the ajax request fails according to Firebug and the submit
> contains the old data.  The requested URL is
> http://www.blueskyvineyard.com/json-checkout.
> Any suggestions would be greatly appreciated!
>