如何在提交表单时获取特定按钮ID？

Question

<form action="" method="post" id="all-student-reservations-form" class="form-block">
    <label style="display: inline-block; vertical-align: bottom;">Type<br>
                <select name="drlist-type" id="drlist-type" class="input-large">
                    <?php foreach (array('All', 'Midterm', 'Final') as $examType) { ?>
                        <option <?php if ($type == $examType) echo 'selected' ?>><?php echo $examType ?></option>
                    <?php } ?>
                </select>
            </label>
            <label style="display: inline-block; vertical-align: bottom;">Campus<br>
                <?php echo campus_selector('drlist-campus', $campuses, $selectedCampus); ?>
            </label>
            <button type="submit" class="btn-large" id="report" name="report">View All Students Reservations</button>
            <button type="submit" class="btn-large" id="download" name="report">Download Report</button>
            <input type="hidden" name="postId" value="" />
</form>

$("#all-student-reservations-form").on("submit", function (e) {
            e.preventDefault();

            $('.btn-large').click(function()) {
                var postId = $('#postId').val($(this).attr('id'));
            });

            alert(postId);
            var type = $("#drlist-type").val(),
                campus = $("#drlist-campus select").val();
            window.location = site_url("reservations/studentsbyCurrentTerm/"+campus+'/'+type);
        });

Didn't get PostId value when clicking on View/Download.

Answer 1

First you need to change the button type to button and trigger a function which set the postId then just submit your form.

<form action="" method="post" id="all-student-reservations-form" class="form-block">
<label style="display: inline-block; vertical-align: bottom;">Type<br>
            <select name="drlist-type" id="drlist-type" class="input-large">
                <?php foreach (array('All', 'Midterm', 'Final') as $examType) { ?>
                    <option <?php if ($type == $examType) echo 'selected' ?>><?php echo $examType ?></option>
                <?php } ?>
            </select>
        </label>
        <label style="display: inline-block; vertical-align: bottom;">Campus<br>
            <?php echo campus_selector('drlist-campus', $campuses, $selectedCampus); ?>
        </label>
        <button type="button" class="btn-large" onclick="submitForm('report')" name="report">View All Students Reservations</button>
        <button type="button" class="btn-large" onclick="submitForm('download')" name="report">Download Report</button>
        <input type="hidden" name="postId" value="" />

function submitForm(id){
    $("#postId").val(id);
    $("form").submit();
}
$("#all-student-reservations-form").on("submit", function (e) {
        e.preventDefault();

        var postId = $('#postId').val();
        alert(postId);
        var type = $("#drlist-type").val(),
            campus = $("#drlist-campus select").val();
        window.location = site_url("reservations/studentsbyCurrentTerm/"+campus+'/'+type);
    });