javascript - 生成的按钮触发表单提交

Question

我有一个 javascript/jquery 函数，可以在表单内的表中生成表行。表中包含两个按钮。两个按钮都应触发 javascript 函数(一个更新数据库并将按钮更改为文本，另一个应更新数据库和表单)但不提交表单。相反，它会触发表单提交，即使我有“return false”；在 onclick 事件中。

复制生成的 html 并运行它会产生预期的结果；即，函数已运行但未提交表单。

如何在不提交表单的情况下获取生成按钮来触发 javascript 函数？

涉及的 HTML:

    <div id="tabs-4" style="width: 97%;height: 600px;text-align: center;">
                <select id="selRosterList" name="selRosterList" onchange="updateRosterView()">
                    <option value="none">Select a class</option>
                    <option value="1">1st Class Roster</option>
                </select>
                <div id="divShowRoster" name="divShowRoster" style="width: 100%; text-align: center; display: none;">
                    <div style="overflow: auto; height: 300px;margin-top: 20px;">
                    <table id="tblRoster" name="tblRoster" style="border: thin black solid;background-color: aliceblue;">
                        <thead>
                        <th style="width: 15%;font-size: small;">Name</th>
                        <th style="width: 15%;font-size: small;">Email</th>
                        <th style="width: 10%;font-size: small;">Phone</th>
                        <th style="width: 8%;font-size: small;">PID/<br>SSN</th>
                        <th style="width: 14%;font-size: small;">Department</th>
                        <th style="width: 14%;font-size: small;">Organization</th>
                        <th style="width: 14%;font-size: small;">Supervisor Approval</th>
                        <th style="width: 8%;font-size: small;">&nbsp;</th>
                        </thead>
                        <tbody id="tbodyRoster" name="tbodyRoster">
                        </tbody>
                    </table>
                    </div>
                    <div id="divRosterButtons" name="divRosterButtons" style="width: 100%; overflow: hidden;margin-top: 25px;">
                        <div style="float: left; width: 50%;text-align: center;">
                            <button class="optionbutton" style="width: 275px;">Download as Excel File</button>
                        </div>
                        <div style="float: right; width: 49%;text-align: center;">
                            <button class="optionbutton" style="width: 275px;">Print</button>
                        </div>
                        <div style="width: 100%;text-align: center;"><button class="optionbutton" style="width: 275px;">Add Trainee</button></div>
                    </div>
                </div>
            </div>

Javascript/jquery:

function updateRosterView() {
    if ($("#selRosterList").prop('selectedIndex') > 0) {
        document.getElementById("divShowRoster").style.display = "block";
        var classId = $('#selRosterList').prop('value');

        $.ajax({
            url: 'TrainingRegistrationAjaxServlet',
            type: 'GET',
            data: {formType: 'getClassRoster',
                classId: classId
            },
            dataType: 'html',
            success: function (responseText) {
                var trHTML;
                $.each(JSON.parse(responseText), function (key, value) {
                    var val = JSON.parse(value);
                    var supvrOk;
                    if(val.hasSupervisorOK==true){
                        supvrOk = "Approved";
                    }else{
                        supvrOk = getOkButton(val.studentEmail, val.classId);
                    }
                    trHTML = '<tr>'
                        + '<td style="font-size: small;text-align: left;">'
                        + val.lastName + ", " + val.firstName
                        + '</td>'
                        + '<td style="font-size: small;text-align: left;">'
                        + val.studentEmail
                        + '</td>'
                        + '<td style="font-size: small;">'
                        + val.contactNumber
                        + '</td>'
                        + '<td style="font-size: small;">'
                        + val.tcolePID
                        + '</td>'
                        + '<td style="font-size: small;">'
                        + val.position
                        + '</td>'
                        + '<td style="font-size: small;">'
                        + val.organization
                        + '</td>'
                        + '<td style="font-size: small;">'
                        + supvrOk
                        + '</td>'
                        + '<td style="font-size: small;">'
                        + "<button id='btn" + val.studentEmail + " onclick='dropRegistrant(\"" + val.classId + "\", \"" + val.studentEmail + "\");return false;'>Drop</button>"
                        + '</td>'
                        + '</tr>';
                    $(trHTML).appendTo($('#tbodyRoster'));
                })
            },
            error: function (request, status, error) {
                alert("An error occurred.  Error:  " + status + ", " + error);
            }
        });

    } else {
        alert("Please select a valid class roster.");
    }
}

function getOkButton(email, classId){
    return "<button onclick='setSupervisorOk(\"" + email + "\", \"" + classId + "\");return false;'>Set Approved</button>"; 
}

function setSupervisorOk(email, classId){
    $('#btn' + email).replaceWith("<p>Approved<p>");
}

Answer 1

将此属性添加到您的按钮:

<button type="button">

否则它会自动成为一个提交表单的按钮