當我點擊提交按鈕時，用戶資料僅在資料表中顯示一秒鐘，通過選中復選框啟用該按鈕

我最近添加了禁用/啟用提交按鈕功能。但是，我遇到了一個新問題。在我點擊提交按鈕后，用戶資料會很快消失。我希望它存盤在表資料中。我真的很感激這方面的任何指導！

這是我的用戶資料 HTML 代碼：

<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>

這是我的表格資料的 HTML 代碼：

<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>

這是 JavaScript/JQuery 部分：

<

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>

uj5u.com熱心網友回復：

您需要在提交表單時獲取事件，然后使用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>

標籤：javascript html jQuery 用户输入 网站项目

上一篇：每當添加另一個時，FlexDiv的大小都會出錯

下一篇：JavaScript：僅從下拉框中選擇的第一個物件記錄到控制臺