AJAX Query for Multiple Dynamic Forms with varying ID's

Question

This is in my header, jquery.min.js is already included:

<script type="text/javascript">
//<![CDATA[
$(function() {
    $("form.ajax").submit(function(e) {
        var $this = $(this);
        e.preventDefault();

        $.ajax({
            url: 'index.php',
            type: 'post',
            data: $this.serialize(),
            success: function() {
                //alert(response);
            }
        })

        return false;
    });
});
//]]>
</script>

This is an example form that is dynamically generated:

<form id="dash_73" method="post" class="ajax"> 
<fieldset> 
<input type="hidden" name="action" value="ajax_purchase_ticket" /> 
<input type="hidden" name="lottery_id" value="73" /> 
<div class="left1"> 
<button type="submit" name="dash" form="dash_73" id="button_73-1" value="1" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-2" value="2" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-3" value="3" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-4" value="4" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-5" value="5" class="ticket free">5 Dash</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-6" value="6" class="ticket taken" disabled="disabled">User 2</button> 
<br /> 
</div> 
<div class="left2"> 
<button type="submit" name="dash" form="dash_73" id="button_73-7" value="7" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-8" value="8" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-9" value="9" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-10" value="10" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-11" value="11" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-12" value="12" class="ticket taken" disabled="disabled">User 2</button> 
<br /> 
</div> 
<div class="left3"> 
<button type="submit" name="dash" form="dash_73" id="button_73-13" value="13" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-14" value="14" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-15" value="15" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-16" value="16" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-17" value="17" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-18" value="18" class="ticket taken" disabled="disabled">User 2</button> 
<br /> 
</div> 
<div class="left4"> 
<button type="submit" name="dash" form="dash_73" id="button_73-19" value="19" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-20" value="20" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-21" value="21" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-22" value="22" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-23" value="23" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-24" value="24" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
</div> 
<div class="left5"> 
<button type="submit" name="dash" form="dash_73" id="button_73-25" value="25" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-26" value="26" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-27" value="27" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-28" value="28" class="ticket yours" disabled="disabled">User 3</button> 
<br />
</div>
</fieldset>
</form>

Currently when I click on a button to purchase a ticket, nothing occurs. I am trying to have it so when a button is pushed, it will run the code. I am still trying to work out the response method on how to retrieve a success or failure. Any help is appreciated.

UPDATE: Without Ajax, code functions as required. I believe the problem, as pointed out by Kevin, is that the button value is not being submitted and that is why it appears that nothing occurs, as the button value is required. Looking to find out how to include the button value.

UPDATE 2: Here is the final code that worked for me with the success/failure messages as well.

<script type="text/javascript">
//<![CDATA[
$(function() {
    $('button[name="dash"]').click(function (e) {
        e.preventDefault();
        var id = this.id;
        var $formElem = $(this).closest('form');
        var formData = $formElem.serializeArray();
        formData.push({
            name: this.name,
            value: this.value
        });
        // if you want to submit the 'form' attribute of the button as well ...
        formData.push({
            name: 'form',
            value: $(this).attr('form')
        });
        $.ajax({
            url: 'index.php',
            type: 'post',
            data: formData, 
            success: function (data) {
                if ( data.completed == 1 )
                {
                    data.message = data.message + '<br />' + data.completed_message;
                }

                $("#centerpoint").hide();
                $("#centerpoint").show();

                if ( data.result == 1 )
                {
                    $('#' + id).attr("disabled", "disabled");
                    $('#' + id).removeClass("free").addClass("yours");
                    $('#' + id).text(data.buyer);
                    $('#ajax_message').replaceWith('<div class="form_message success" id="ajax_message">' + data.message + '</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
                else if ( data.result == 2 )
                {
                    $('#' + id).attr("disabled", "disabled");
                    $('#' + id).removeClass("free").addClass("taken");
                    $('#' + id).text(data.buyer);
                    $('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">' + data.message + '</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
                else if ( data.result == 3 )
                {
                    $('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">' + data.message + '</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
                else
                {
                    $('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">Unknown Error!</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
            }
        })
        /* should pass this form data: 
           action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73
        */
        return false;
    });
});
//]]>
</script>

`$(this).serialize()`? for success or failure `success: function() {}` and `error: function() {}`. — mkjasinski, Apr 04 '13 at 23:32
Are you sure nothing is happening? Put `alert("submitting");` in the handler. — Barmar, Apr 04 '13 at 23:36
@mkjasinski There is just before : `var $this = $(this);` please read the code — MatRt, Apr 04 '13 at 23:37
I have no issues with the multiple submit buttons without AJAX, I believe the issue is that the value from the submit button is not being sent as Kevin Collins figured out. So I need to find a way to include the button value when being submitted. — 0mni, Apr 05 '13 at 00:49

score 0 · Accepted Answer · edited May 23 '17 at 10:32

Looks like your form is posting"action=ajax_purchase_ticket&lottery_id=73"

Are you sure the server side script is fully functional with just that amount of data? Could it be expecting one of the button values?

From the serialize docs (http://api.jquery.com/serialize/):

No submit button value is serialized since the form was not submitted using a button.

Here's a solution you could try to include the button value that was clicked: jQuery serializeArray doesn't include the submit button that was clicked

Update

See if this does what you want: http://jsfiddle.net/kevincollins/VLHCe/

$('button[name="dash"]').click(function (e) {
    e.preventDefault();
    var $formElem = $(this).closest('form');
    var formData = $formElem.serializeArray();
    formData.push({
        name: this.name,
        value: this.value
    });
    // if you want to submit the 'form' attribute of the button as well ...
    formData.push({
        name: 'form',
        value: $(this).attr('form')
    });
    $.ajax({
        url: 'index.php',
        type: 'post',
        data: formData, 
        success: function () {
            //alert(response);
        }
    })
    /* should pass this form data: 
       action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73
    */
});

You are correct, it does require the button values to be included. I am trying to see how to use serializeArray but no success so far. — 0mni, Apr 05 '13 at 00:19

AJAX Query for Multiple Dynamic Forms with varying ID's

1 Answers1