User data only appears for a second in the data table when I hit submit button, which is enabled by-CodePudding

I've recently added the disabling/enabling submit button function. However, I encounter a new problem. the user data disappears super quickly after i hit the submit button. I want it to be stored in the table data. I would really appreciate any guidance on this!

Here's my HTML code for the user data:

<div id="data">
    <form id="breakies">
    <p> Breakfast Options</p>
        <div>
        <input type="checkbox" id="protein-oatmeal" name= "breakies" value="Protein Oatmeal"> 
        <label for="protein-oatmeal">Protein Oatmeal</label>
        </div>
        <div>
            <input type="checkbox" id="toast-and-eggs" name= "breakies" value="Toast and Eggs"> 
            <label for="toast-and-eggs">Toast and Eggs</label>
        </div>
        <div>
            <input type="checkbox" id="gyp" name= "breakies" value="Greek Yogurt Parfait"> 
            <label for="gyp">Greek Yogurt Parfait</label>
        </div> 
        <div>
            <input type="checkbox" id="pw" name= "breakies" value="Protein Waffles"> 
            <label for="pw">Protein Waffles</label>
        </div>
        <br><input type="checkbox" name="checkme" id="checkBox">
        <label for="checkBox"> I have selected at least 4 options for each meal</label>
        <br><input type="submit" id="submitButton" name="submit" onclick= "addData()">
    </form>

Here's my HTML code for the table data:

<div id="tab">
    <table id="list" cellspacing="0px" cellpadding="20px" text-align="center">
    
        <thead>
            <tr>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wednesday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
                <td>Sunday</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

This is the JavaScript/JQuery part:

script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
    

    $('#submitButton').attr('disabled', 'disabled');


    $('#checkBox').click(function() {
        if ($(this).is(':checked')) {
            $('#submitButton').removeAttr('disabled');
        } else {
            $('#submitButton').attr('disabled', 'disabled');
        }
    });
});
</script>
<script>

function addData() { 
    var rows = "";
    var a = document.getElementById("protein-oatmeal").value;
    var b = document.getElementById("toast-and-eggs").value;
    var c = document.getElementById("gyp").value;
    var d = document.getElementById("pw").value;

    rows  = "<td>"   a   "</td><td>"   b   "</td><td>"   c   "</td><td>"   d   "</td><td>"  b   "</td><td>"  c  "</td><td>"  a   "</td>";
        var tbody = document.querySelector("#list tbody");
        var tr = document.createElement("tr");

        tr.innerHTML = rows;
        tbody.appendChild(tr)

}

</script>

CodePudding user response：

You need to get event when form submit and then use preventDefault()

$(function() {
    $('#breakies').submit(function(event) {
      event.preventDefault();
      // do something
    });


    $('#submitButton').attr('disabled', 'disabled');


    $('#checkBox').click(function() {
      
        if ($(this).is(':checked')) {
            $('#submitButton').removeAttr('disabled');
        } else {
            $('#submitButton').attr('disabled', 'disabled');
        }
    });
});

function addData() { 
    var rows = "";
    var a = document.getElementById("protein-oatmeal").value;
    var b = document.getElementById("toast-and-eggs").value;
    var c = document.getElementById("gyp").value;
    var d = document.getElementById("pw").value;

    rows  = "<td>"   a   "</td><td>"   b   "</td><td>"   c   "</td><td>"   d   "</td><td>"  b   "</td><td>"  c  "</td><td>"  a   "</td>";
        var tbody = document.querySelector("#list tbody");
        var tr = document.createElement("tr");

        tr.innerHTML = rows;
        tbody.appendChild(tr)

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="data">
    <form id="breakies">
    <p> Breakfast Options</p>
        <div>
        <input type="checkbox" id="protein-oatmeal" name= "breakies" value="Protein Oatmeal"> 
        <label for="protein-oatmeal">Protein Oatmeal</label>
        </div>
        <div>
            <input type="checkbox" id="toast-and-eggs" name= "breakies" value="Toast and Eggs"> 
            <label for="toast-and-eggs">Toast and Eggs</label>
        </div>
        <div>
            <input type="checkbox" id="gyp" name= "breakies" value="Greek Yogurt Parfait"> 
            <label for="gyp">Greek Yogurt Parfait</label>
        </div> 
        <div>
            <input type="checkbox" id="pw" name= "breakies" value="Protein Waffles"> 
            <label for="pw">Protein Waffles</label>
        </div>
        <br><input type="checkbox" name="checkme" id="checkBox">
        <label for="checkBox"> I have selected at least 4 options for each meal</label>
        <br><input type="submit" id="submitButton" name="submit" onclick= "addData()">
    </form>

<div id="tab">
    <table id="list" cellspacing="0px" cellpadding="20px" text-align="center">
    
        <thead>
            <tr>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wednesday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
                <td>Sunday</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>