Ajax Form Submit Fails

Question

I'm struggling with a submit form via ajax.

This is the code, but I've been looking for about 3 hours and cannot work out why it doesnt submit the form...

Any ideas?

<script type="application/javascript">
function addForm() {
    $.ajax({type:'POST', url: 'cart.php?ajax=1&a=add&domain=register', data:$('#add-form').serialize(), success: function(response) {
        $('#add-form').find('.form_result').html(response);
    }});

    return false;
}
function transferForm() {
    $.ajax({type:'POST', url: 'cart.php?ajax=1&a=add&domain=transfer', data:$('#transfer-form').serialize(), success: function(response) {
        $('#transfer-form').find('.form_result').html(response);
    }});

    return false;
}
</script>

My code is mixed with smarty but the call is just a standard call :)

{foreach from=$availabilityresults key=num item=result}
    {if $result.status eq "available"}
    <form method="post" id="add-form"  onsubmit="return addForm();">
    {else}
    <form method="post" id="transfer-form"  onsubmit="return transferForm();">
    {/if}
    <table width="700" border="0" cellspacing="5" cellpadding="0">
        <input type="hidden" name="domain" value="{$result.domain}" />
        <tr style="border-bottom: #333 1px solid;">
        <td rowspan="2">
            {if $result.status eq "available"}
            <img src="templates/dj/yes.jpg" />
            {else}
            <img src="templates/dj/no.jpg" />
            {/if}
        </td>
            {if $result.status eq "available"}
            <td style="color:#339933;" />
            {$result.domain|replace:$domain:''}
            </td>
            {else}
            <td style="color:#cc0000;" />
            {$result.domain|replace:$domain:''}
            </td>
            {/if}
        <td rowspan="2">{$result.domain}</td>
        <td rowspan="2">
            {if $result.status eq "unavailable"}
            {else}
            <select name="domainsregperiod[{$result.domain}]">
                {foreach key=period item=regoption from=$result.regoptions}
                    <option value="{$period}">
                    {$period} {$LANG.orderyears} @ {$regoption.register}
                    </option>
                {/foreach}
            </select>
            {/if}
        </td>
        <td rowspan="2">
            {if $result.status eq "available"}
            <input type="image" src="templates/dj/add-basket.jpg" border="0" alt="Add to Basket" />
            <div class="form_result"> Added to Basket </div>
            {else}
            <input type="image" src="templates/dj/transfer.jpg" border="0" alt="Transfer to Us" />
            {/if}
        </td>
      </tr>
      <tr>
        <td>
            {if $result.status eq "available"}
            Available
            {else}
            Taken
            {/if}
        </td>
      </tr>
      <tr><td colspan="8" style="height:1px; background-color:#999;"></td></tr>

    </table>
    </form>
{/foreach}

You can view http://goo.gl/XdD9w6 to see my page in action, and the shopping cart is: http://goo.gl/I1zsNx

Answer 1

Try this:

function addForm() {
$.ajax({type:'POST', url: 'cart.php?ajax=1&a=add&domain=register', 
       data:{"myForm": $('#add-form').serialize()}, 
       success: function(response) {
       $('#add-form').find('.form_result').html(response);
       }
});

return false;
}

Answer 2

You are building all of your <form> elements inside a foreach loop, and you're assigning all of them the same element id. That's why I asked how you knew your form was being submitted. Are you sure it's the form in which you entered data? Are you sure it's not another form with the same id? How do you know? What if your jQuery selector selected something different from what you're expecting?

Answer 3

I was able to select items from your site and add them to the cart. Monitored in Firebug. It did take a very long time to get the 'ok 200' response back from the ajax request (cart.php). Please let me know if you have any additional information.