使用表单数据更新网页

Question

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

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

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

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

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

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

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

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

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

我再次使用表单并在提交时收集数据，以便我可以利用 "native" 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');

这是主网页上“设置”按钮的侦听器，它会调出包含设置表单的设置模式 window：

//*********************************************************
// 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 app 的前几行).

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()函数到底是干什么的，不过我可以试着给你一个建议：

HTML5 的某些表单验证功能并未在所有使用的浏览器上得到完全支持（一些用户不想更新他们的浏览器）。因此，依靠 HTML5 的 "native" 验证并不是最佳做法。
如果您想在提交表单之前以任何方式操作表单值，我宁愿为点击事件的提交按钮添加一个侦听器，阻止任何其他操作，检查/操作表单数据，然后手动提交表单。无论如何，前端验证并不完全安全，因此如果您兜售敏感数据，则必须在服务器端进行检查（如果您的应用程序使用服务器）。

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

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

    //Do the checks here.

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

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

希望这篇文章对你有用，祝你好运！

Answer 2

好吧...我终于明白了！问题不是范围界定问题，而是 "onSubmit" 如何工作的问题。

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

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

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

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

return false;

注意：我之前曾试过 return 为真而不为假。我错误地认为 return 从 getSettings() 函数中获取错误值会禁用 HTML5 "native" 验证并迫使我自己实施所有错误检查......这不是我想要什么。现在我的理解是 returning false 只是阻止提交表单..但它不会禁用 HTML5 本机验证。

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

综上所述，我仍然不完全确定为什么当我没有提供 return 声明或当我 returned true 为什么我的所有更改都恢复到他们的本来的价值。如果有人能阐明为什么我会很感激。

干杯

使用表单数据更新网页

Use form data to update web page

html

javascript

forms

onclick

onsubmit