具有不同ID的多个动态表单的AJAX查询

时间：2013-04-04 23:29:56

标签： php javascript jquery html ajax

这是在我的标题中，jquery.min.js已经包含在内：

<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>

这是动态生成的示例表单：

<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>

目前，当我点击按钮购买票证时，什么也没发生。我试图这样做，当按下按钮时，它将运行代码。我仍在尝试制定有关如何检索成功或失败的响应方法。任何帮助表示赞赏。

更新：如果没有Ajax，代码将根据需要运行。我相信问题，正如凯文所指出的那样，按钮值没有被提交，这就是为什么看起来什么都没有发生，因为按钮值是必需的。希望了解如何包含按钮值。

更新2：这是最终的代码，对我来说也有成功/失败的消息。

<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>

1 个答案:

答案 0 :(得分：0)

看起来您的表单正在发布“action = ajax_purchase_ticket＆amp; lottery_id = 73”

您确定服务器端脚本只使用了大量数据吗？可能期待其中一个按钮值吗？

从序列化文档（http://api.jquery.com/serialize/）：

  

由于未提交表单，因此未序列化提交按钮值   使用按钮。

这是一个解决方案，您可以尝试包含单击的按钮值： jQuery serializeArray doesn't include the submit button that was clicked

<强>更新

看看这是否符合您的要求：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
    */
});
相关问题
最新问题