使用表单数据更新网页

Question

在提供一堆代码之前，我想先了解一下我正在尝试做的事情是否可行。

我使用 HTML 和 JavaScript 创建了一个名为 PIG 的基于网络的骰子游戏版本。用户可以通过点击主页上的“设置”按钮来更改一些游戏的设置。这个按钮会弹出一个包含 HTML 表单 () 的模式窗口。我想使用用户在此表单上输入和提交的数据来更新游戏主页上的各种设置。

我选择使用 HTML5 表单是因为希望使用原生 HTML5 表单验证功能，而不是尝试自己使用 JavaScript 复制验证检查逻辑。

所以我的方法是使用 javascript 在提交时从表单中获取数据。我尝试了两种不同的方法来让它工作：

1) 在标签上使用“onsubmit=function getSettings()” 2) 使用带有 onclick="getSettings()" 的表单提交按钮。

通过这两种方法，我能够成功地从提交表单中获取所有值，并使用这些值使用 gettSettings() 函数成功填充主游戏页面，但是当我退出 getSettings() 函数时，网页我更新的值不会保持不变...无论我使用这两种方法中的哪一种，它们都会恢复为原始值。

我知道值已成功更新，因为当我在 getSettings() 方法的最后一条语句上设置断点时，我可以看到主页上的所有值都已更新以反映在表单...所以我知道我已成功获取所有数据并使用这些值更新主页。

我很困惑为什么我在网页上成功更改的值只是在退出 getSettings() 函数时恢复到原来的值。

也许不可能做我想做的事？如果不是，有没有人知道为什么，因为我可以看到值在恢复到原始值之前已成功更改。我错过了什么？

我再次使用表单并在提交时收集数据，以便我可以利用“原生”HTML5 表单验证功能。

问候。

***** 编辑以添加关键代码段 *******

这里是模态表单的代码 HTML 代码：

<form name="config-settings" onsubmit="getSettings()">
    <!--                <form name="config-settings">-->
    <span class="errMsg"></span>

    <div class="row clearfix">
        <div>
            <label>Player 1:</label>
        </div>
        <div>
            <input type="text" name="input-name-0" id="input-name-0" maxlength="10" placeholder="Enter name" pattern="^\S+$">
        </div>
    </div>
    <div class="row clearfix">
        <div>
            <label>Player 2:</label>
        </div>
        <div>
            <input type="text" name="input-name-1" id="input-name-1" maxlength="6" placeholder="Enter name" pattern="^\S+$">
        </div>
    </div>
    <div class="row clearfix">
        <div>
            <label>Winning Score:</label>
        </div>
        <div>
            <input type="number" name="winning-score" id="winning-score" default="100" placeholder="Enter winning score">
        </div>
    </div>
    <div class="row clearfix">
        <div>
            <label>Number of Dice:</label>
        </div>
        <div>
            <select name="diceValues" id="dice-value">
              <option value=""> - Select - </option>
              <option value="dice-1">One Dice</option> 
              <option value="dice-2">Two Dice</option> 
            </select>
        </div>
    </div>
    <!--    Below is alt method I used to submit form..yields same results      -->
    <!--    <input type="submit" value="Submit" onclick="getSettings()">-->
    <input type="submit" value="Submit">
</form>

这里是在 getSettings() 方法中定义和使用的全局变量：

// Global variables
var scores, roundScore, activePlayer, gamePlaying, gamesWonCount, playerNames, winningScore, numOfDice, matchScore, msgs;
var player0, player1, score;
var player0Field = document.getElementById('name-0');
var player1Field = document.getElementById('name-1');
var scoreField = document.getElementById('winScore');

这里是主网页上设置按钮的监听器，它会调出包含设置表单的设置模式窗口：

//*********************************************************
// Open Settings Modal Windows 
//*********************************************************
document.querySelector('.btn-settings').addEventListener('click', function () {

    // Settings can't be changed if game is actively underway
    if (!gamePlaying || roundScore === 0) {
        document.querySelector('#modal-settings').style.display = 'block';
    } else {
        // Make error message visible
        msgs.style = 'block';
        // Create message to indicate settings successfully updated     
        msgs.textContent = "Settings can't be updated during game";
        msgs.style.backgroundColor = 'pink';
        fadeOut(msgs);
    }
});

这里是 getSettings() javaScript 函数（注意：这个函数中没有定义局部变量...它们都被定义为全局值（javaScript 应用程序的前几行）。

function getSettings() {
    // Alternative call if I want this function to be called via eventListner
    //document.querySelector('.btn-save').addEventListener('click', function () {

    console.log("getSettings method called");

    player0 = document.forms["config-settings"]["input-name-0"].value;
    player1 = document.forms["config-settings"]["input-name-1"].value;
    score = document.forms["config-settings"]["winning-score"].value;

    // Reset msgs so they will be displayed each time
    msgs.style = 'block';

    playerNames[0] = player0;
    player0Field.innerHTML = playerNames[0];

    playerNames[1] = player1;
    player1Field.textContent = playerNames[1];

    // Set Winning score on UI to value on form
    scoreField.textContent = score;

    //  numOfDice = document.getElementById('dice-value').value;

    // Create message to indicate settings successfully updated     
    msgs.textContent = "Successfully updated settings";
    msgs.style.backgroundColor = 'lightgreen';
    fadeOut(msgs);
    document.querySelector('#modal-settings').style.display = 'none';
}

Answer 1

我不知道你的这个 getSettings() 函数到底应该做什么，但我可以尝试给你一个建议：

1. 并非所有使用的浏览器都完全支持 HTML5 的某些表单验证功能（有些用户不想更新他们的浏览器）。因此，依赖 HTML5 的“本机”验证并不是最佳实践。
2. 如果您想在提交表单之前以任何方式操作表单值，我宁愿为单击事件的提交按钮添加一个监听器，阻止任何其他操作，对表单数据进行检查/操作，然后手动提交表格。无论如何，前端验证并不完全安全，所以如果你在兜售敏感数据，你必须在服务器端进行检查（如果你的应用程序使用服务器）。

举例说明我之前解释过的内容：

document.getElementById("myBtn").addEventListener("click", function(event){
    //Stops the form submitting.
    event.stopImmediatePropagation();

    //Do the checks here.

    //Sends the form.
    document.getelementById("myForm").sumbit();
);

1. 如果您在此 getSettings() 函数内更改局部变量，则变量将仅在函数范围内更改。您可能想了解 javascript 中的范围。 （这只是一个有根据的猜测）。

我希望你觉得这很有用，祝你好运！

Answer 2

好吧...我终于想通了！问题不是范围问题，而是“onSubmit”如何工作的问题。

解决方案涉及进行两项更改：

1) 在调用“getSettings()”函数时，在“onsubmit”属性中添加return语句；

<form name="config-settings" onsubmit="return getSettings()">

2) 在gettSettings()结束时返回false；

return false;

注意：我之前尝试过返回 true 但不是 false。我错误地认为从 getSettings() 函数返回 false 值会禁用 HTML5“本机”验证并迫使我自己实现所有错误检查......这不是我想要的。现在我的理解是返回 false 只会阻止表单被提交..但它不会禁用 HTML5 原生验证。

这个解决方案非常适合我，因为我的目标不是将表单提交到服务器（因为这里没有服务器组件），而只是使用“本机”HTML5 表单检查，然后更新本地网络上的值页。

虽然说了这么多，但我仍然不完全确定为什么当我没有提供 return 语句或者当我返回 true 时，为什么我的所有更改都恢复到原来的值。如果有人能解释为什么我会感激它。

干杯