JQuery无法发布动态添加的表单元素

时间:2015-08-19 20:34:18

标签: javascript php jquery forms

我已阅读过此前的帖子,但我似乎无法解决我的问题。我有一个具有静态和动态创建输入字段的表单。静态字段正在发布而没有问题。但是,在post请求中没有任何动态创建的:输入。

表格:

<div id="userModal" class="modal fade" style="display:none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-primary" style="float:right;margin-bottom:4px;">Delete User
                </button>
                <h4 class="modal-title">Edit User : <span id="user_webUserProfilePrimaryName"></span></h4>
            </div>
            <div class="modal-body">
                <span id="user_maintain_messages" name="user_maintain_messages"></span>

                <form id="editUserForm" name="editUserForm">
                    <input type="hidden" name="user_maintain_action" id="user_maintain_action" value="update">
                    <input type="hidden" name="action" id="action" value="sc_admin_updateCustomerFundInfo">
                    <input type="hidden" name="version" id="version" value="1.1" ;

                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-4">
                                <label for="user_webUserLevel">User Level</label>
                            </div>
                            <div class="col-md-6">
                                <select class="form-control" id="user_webUserLevel" name="user_webUserLevel">
                                    <option value="anonymous">Pending</option>
                                    <option value="customer">Customer</option>
                                    <option value="administrator">Admin</option>
                                    <option value="superuser">Super</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-4">
                                <label for="user_webUserProfileStatus">User Status</label>
                            </div>
                            <div class="col-md-6">
                                <select class="form-control" name="user_webUserProfileStatus"
                                        name="user_webUserProfileStatus">
                                    <option value="InReview">In Review</option>
                                    <option value="Approved">Approved</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-4">
                                <label for="user_verified">User Verified</label>
                            </div>
                            <div class="col-md-6">
                                <select class="form-control" id="user_verified" name="user_verified">
                                    <option value="N">Not Verified</option>
                                    <option value="Y">Verified</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-4">
                                <label for="webUserName">Send Login Confirmation</label>
                            </div>
                            <div class="col-md-6">
                                <span id="user_sendConfirmButton"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <table class="table" id="user_fundTable">
                            <thead>
                            <tr>
                                <th>Fund(s)</th>
                                <th>Account #</th>
                                <th>Administrator</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tfoot>

                            </tfoot>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" style="background:grey;float:left" data-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-primary" onclick="saveUserMaintain()">Update (confirm changes)
                </button>
            </div>
        </div>
    </div>
</div>

填充以下数据:

{"Result":"OK","Records":[{"webUserProfilePrimaryName":"Johnny Appleseed","verified":"N","webUserProfileId":"24","webUserLevel":"anonymous","webUserProfileStatus":"InReview","webUserProfileReferenceAccount":"19, 30, 3126, 0090","fund":[{"fundName":"PCF","fundFullName":"Private Capital Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"},{"fundName":"CCIF","fundFullName":"Coast Capital Income Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"},{"fundName":"SIF2","fundFullName":"Secured Income Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"}],"sendConfirm":"<button class='btn btn-primary' onclick='sendConfirmEmail(\"24\")'>Email Now<\/button>"}]}

我使用此函数填充表单:

function showUserMaintain(webUserProfileId) {
    jQuery.post(stonecrestajax.ajaxurl, {
        action: "sc_admin_getCustomerFundInfo",
        webUserProfileId: webUserProfileId,
        version: "1.1"
    }, function (data) {
        console.log(data['Records'][0]['webUserProfilePrimaryName']);
        jQuery("#user_webUserProfilePrimaryName").html(data['Records'][0]['webUserProfilePrimaryName']);
        jQuery("#user_webUserLevel").val(data['Records'][0]['webUserLevel']);
        jQuery("#user_webUserProfileStatus").val(data['Records'][0]['webUserProfileStatus']);
        jQuery("#user_verified").val(data['Records'][0]['verified']);
        jQuery("#user_sendConfirmButton").html(data['Records'][0]['sendConfirm']);
        jQuery('#user_fundTable tbody').empty();

        jQuery.each(data['Records'][0]['fund'], function (fundIdx, fundValues) {

            var fundStatusOptions = ["In Review", "New", "Approved"];
            var combo = generateDropDownList(fundIdx, fundIdx, fundStatusOptions);
            var row = '<tr><td>' + fundValues.fundName + '</td>';
            row += '<td><input type="text" name="user_fundAccountNumber[]" id="user_fundAccountNumber_' + fundIdx + '" value="' + fundValues.fundAccNo + '"></td>';
            row += '<td><input type="text" name="user_fundManagerName[]" id="user_fundManagerName_' + fundIdx + '" value="' + fundValues.fundManager + '"></td>';
            row += '<td id="user_fundStatus_' + fundIdx + '" name="user_fundStatus_' + fundIdx + '"></td></tr>';
            jQuery('#user_fundTable').append(row);
            //jQuery("#user_fundStatus_" + fundIdx).append(combo);
            //console.log(fundValues);
        });
        jQuery("#userModal").modal('show');
    }, "json");
}

从函数中我可以看到,我正在动态地将值添加到现有输入字段,并在表单内的表中动态创建一些输入字段。

但是,当我尝试使用此代码将表单序列化(发布)回服务器时 功能:

function saveUserMaintain() {    

    jQuery.ajax({
        type: "POST",
        url: url,
        data: jQuery("#editUserForm").serialize(), 
        success: function (data) {
            alert(data); 
        }
    });

    return false;

}

我看到的唯一数据是我静态定义的字段(输入),后期请求中没有“user_fundXXXXXX”字段。

我确定我只是站在盒子里太远而且看不到明显的,有人能帮我一把吗?

0 个答案:

没有答案