Generated button fires form submit

Question

I have a javascript/jquery function that generates table rows within a table within a form. Contained in the table are two buttons. Both buttons should trigger javascript functions (one updates a database and changes the button to text, and the other should update the database and the form) but not submit the form. Instead, it fires the form submit even though I have "return false;" in the onclick event.

Copying the generated html and running it produce the expected results; ie, the function is ran and the form is not submitted.

How do I get the generate buttons to fire the javascript function without submitting the form?

The HTML involved:

    <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

add this attribute to your buttons:

<button type="button">

else it is automatically a button that submits forms