使用表单数据更新网页

Question

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

我已经创建了一个网络版本的骰子游戏称为猪使用HTML & JavaScript。用户可以通过点击主页上的“设置”按钮来改变游戏的一些设置。这个按钮打开一个包含HTML表单()的模态窗口。我想使用用户在此表单中输入和提交的数据来更新游戏主页上的各种设置。

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

因此，我的方法是使用javascript在提交时从表单中获取数据。我尝试了两种不同的方法来实现这个目标：

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

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

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

我感到困惑的是，为什么在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函数(注意:这个function...they中没有局部变量定义为全局值( 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

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

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

1)在调用"getSettings()“函数时，向"onsubmit”属性添加返回语句；

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

2)在gettSettings()末尾返回false；

return false;

注意:我以前尝试过返回true，但不返回false。我错误地认为，从getSettings()函数返回false值将禁用HTML5“本机”验证，并迫使我实现所有错误检查myself...which不是我想要的。现在我的理解是返回false只会阻止表单成为submitted..but，而不会禁用HTML5本机验证。

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

尽管如此，我仍然不完全确定为什么不提供return语句，或者何时返回true，为什么所有的更改都恢复到原来的值。如果有人能解释一下为什么我会感激的话。

干杯

Answer 2

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

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

为了举例说明我前面所解释的：

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中有关范围的内容。(这只是一个有根据的猜测)。

希望你发现这个有用，祝你好运！