如何获取提交表单的输入值

Question

I have the bellow 'html' code:

<div class="userbox" id="'.$data[0]->id.'">
    <form action="schedule.php?page=management&ajax=true" method="post">
        <input type="hidden" name="id" value="'. $data[0]->id .'" class="id">
        <input type="submit" name="remove_entry" value="x" class="ajax_btn">
    </form>
</div>

And the bellow JS code:

$(document).ready(
function () {

    $('.userbox form').on('submit',  function(ev) {

        ev.preventDefault();


        var idVal = $('.id').val();

        alert(idVal);

        $.post("schedule.php?page=management&ajax=true", { id : idVal }, function (data) {
            $("#" + idVal + ".userbox").remove();
            $("#" + idVal + ".user_data").css('background-color', '#FFFFFF');

        }
    );

    });

});

I'm trying to get the value of the id from the form (taking in consideration there are multiple forms on page) but it's grabbing the first id on page instead of the one from the submitted form. Do you guys have any suggestions ?

Answer 1

The query selector you use ($('.id')) is searching the whole document for nodes with the class "id" and is not limited to the submitted form.

Try to define your scope and search inside like this:

$('.userbox form').on('submit',  function(ev) {
    var scope = $(this);

    var idVal = scope.find('.id').val();
    // ....
}

Answer 2

您可以按名称选择输入

var idVal = $(this).find( "input[name*='id']" ).val();