jQuery - 检索提交表单的所有输入值答案

【问题标题】：jQuery - Retreving submited form all inputs valuesjQuery - 检索提交表单的所有输入值
【发布时间】：2015-05-05 09:42:16
【问题描述】：

我的问题很简单：如何使用 jQuery 检索特定表单的输入值！？

<?php
$i = 0;
foreach($members as $member){
?>
<form class="form-final-record" role="form" >    

    <input type="hidden" value="<?php echo $member->nid ?>" name="student_nid" class="from-nid">

    <tr>
        <td><?php echo ++$i ?></td>
        <td><?php echo $member->nid ?></td>
        <td><?php echo $member->name." ".$member->surename ?></td>
        <td><input type="text" name="points" class="form-control" class="form-points" /></td>
        <td><select name="pass" class="form-control"><option value="1">Pass</option><option value="0">Failed</option></select></td>
        <td>
            <select name="absence" class="form-control">
                <option value="0" selected>No</option>
                <option value="1">Yes</option>
            </select>
        </td>
        <td><button type="submit" class="btn btn-success">Submit</button>
    </tr>
</form>
<?php
}
?>

正如您在上面的代码块中看到的，我的表格的每一行都是一个表格，其中包含每个人的一些数据。我想使用 jQuery AJAX 函数在不更改页面的情况下提交他们的数据。

我怎样才能达到每个表单的所有输入值？！

在我使用的 jQuery 代码中：

<script>
    $(document).ready(function(e) {

        $('.form-final-record').on('submit', this, function(e) {
            e.preventDefault();

            nid = $(this).next('input[name=student_nid]').val();
            points = $(this).find($('input[name=points]').val());
            pass = $(this).find($('input[name=pass]').val());
            absence = $(this).find($('input[name=absence]').val());

            $.ajax({
                url: '../ctrl_amouzesh/students_final_record_action',
                type: 'POST',
                data: {nid: nid, points: points, pass: pass, absence: absence},
                success: function(data) {
                    alert(data);
                }
            });
        });
    });
</script>

谢谢你的帮助:)

【问题讨论】：

完成 ajax 后，您的输入中将包含您的值！

标签： jquery ajax forms codeigniter dom

【解决方案1】：

为表单添加 id 属性

<form class="form-final-record" role="form" id='myForm' >

然后使用 jQuery serialize

data = $('#myForm').serialize()

【讨论】：

或 serializeArray() 如果您希望它为 JSON。
其实在这种情况下，表单是不能有 ID 的，因为不可能为每个表单创建一个 ID，而表单是由 PHP foreach 循环创建的！

【解决方案2】：

试试这个。
serialize 不会提交您的文件输入。
即使有文件输入，这也会汇总您的表单。

$(document).on("submit", "form", function(event)
{
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),//set form action url at your form
        type: $(this).attr("method"),//set form method at your form          
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });
});

【讨论】：

【解决方案3】：

试试这个serialize()serializeArray()

 $.ajax(
            {
            url: '../ctrl_amouzesh/students_final_record_action',
            type: 'POST',
            data: $('.form-final-record').serialize(),
            success: function(data) { alert(data); }
            }
        )
    });

【讨论】：