Question

我有一个表格和一个模态。但是，我希望将模态中的信息发送到服务器。我在事务的SEND按钮上写了一个ajax调用。但是，主要表单已提交。

这是我的代码 -

$(document).ready(function(){

            $("input#submit_trans").click(function(e){

                e.preventDefault();

                alert("Submit trans clicked"+""+$('form.transaction').serialize());

                $.ajax({
                    type: "POST",
                    url: "dotransaction.php",
                    data: $('form.transaction').serialize(),
                    success: function(msg){
                        $("#thanks").html(msg);
                        $("#form-content").modal('hide');   
                    },
                    error: function(){
                        alert("Failed to process transaction");
                    }
                });
            });
        });

这是我的模态：

<div class="container">

        <form name = "profileForm" id="profile-form" enctype="multipart/form-data" action="update-profile.php" method="post">


        <div class = "row text-center">
            <input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">

            <input class="btn btn-danger" id="reset-button" type="reset" value="Reset">


            <div id="addTransaction" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">×</a>
                            <h3>Add transaction</h3>
                        </div>

                        <div class="modal-body">
                            <form class="transaction" name="transaction">
                                <input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>

                                <label>Payment mode</label>&nbsp;
                                <select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
                                    <option value="">Select</option>
                                    <option value="cash">Cash</option>
                                </select><br>

                                <label>Transaction amount</label>&nbsp;
                                <div id = "div_trans_amt">
                                    <label id="rs">Rs.</label>
                                    <input id = "trans_amt" type="text" name="trans_amt" class="input-xlarge"><br>
                                </div>

                                <label>Transaction details</label><br>
                                <textarea name="trans_details" class="input-xlarge" rows="5" cols="75" style="resize:none;"></textarea>

                                <input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
                                <input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
                            </form>
                        </div>

                        <div class="modal-footer">
                            <input class="btn btn-success" type="submit" value="Send" id="submit_trans">
                            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>

            <div id="thanks"></div>

            <div class="row text-center">
                <p><a data-toggle="modal" style="margin-top: 15px;" data-target = "#addTransaction" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
            </div>  
        </div>

        </form>

我的电话是完全转到我服务器的doTransaction.php，但它没有向我显示警报中的表单数据。请帮忙

Answer 1

您正在使用Nested Forms，因此您可以使用以下内容获取serialize值：

$('#profile-form, .transaction form').serialize();

但您必须在跨浏览器上测试它。它会在FireFox和Chrome上正常工作，不了解IE。

有关详细说明，请参阅我的测试代码：

<form id="test">
    <input type="hidden" name="one" value="1">

    <form class="test2">
        <input type="hidden" name="one2" value="1">      
    </form>

</form>

<script type="text/javascript">
    console.log($('#test, .test2 form').serialize());
</script>

控制台中的结果：

one=1&one2=1

Answer 2

表格不得嵌套。按照w3标准

<body>

以下是链接Form

Answer 3

Is it valid to have a html form inside another html form?

嵌套表单元素是导致问题的原因。我把我的模态放在文档中的任何地方。容器div的底部就可以了。

为什么我的模态数据无法从表单中获取数据？

3 个答案: