jQuery - 检索提交的所有输入值

时间:2015-03-04 11:54:58

标签: jquery ajax forms codeigniter dom

我的问题只是: 如何使用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>

谢谢你的帮助:)

3 个答案:

答案 0 :(得分:1)

为表单添加id属性

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

然后使用jQuery serialize

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

答案 1 :(得分:1)

试试这个serialize() serializeArray()

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

答案 2 :(得分:1)

试试这个。
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)
        {


        }
    });
});