HTML文本输入条件提交

HTML text input conditional submit

本文关键字：提交 条件 输入 文本 HTML      更新时间：2023-09-26

我有一个页面，每次刷新时加载一个随机的MP3文件。用户必须通过文本表单输入根据声音猜测一个名字。我想根据存储的字符串检查他们的输入并刷新页面，如果它是正确的。否则，我不想给他们一个错误的警告，并停留在同一页面，以便他们可以再次猜测:

<div class="ui-widget" align="center">
<form method="post" action="" class="answerswer_box" onsubmit="return submit();">
    <p>Which hero is it?  <input id="tags" name="guess"  /></p>
    <script>
        var key = <?php echo json_encode($rand_key) ?>;
        var info = document.getElementById("guess").value;
        function submit() {
            if (key==info){
                alert('Correct!');
                return true;
            }
            else {
                alert('Incorrect!');
                returnToPreviousPage();
                return false;
            }
        }
    </script>
</form>
</div>

现在，不管输入是什么，它都将信息提交到一个新的页面。javascript警报也没有显示(我怀疑它们确实显示了，但页面随后刷新，它们消失了)。key变量是PHP数组中随机取值的键，info应该是用户输入的文本。

发现问题:

  1. 你不能使用submit作为函数名这是一个HtmlForm对象
  2. document.getElementById("guess").value;正在查找ID为"guess"且不存在的元素。

我将重写你的脚本如下:

<script>
    var key = <?php echo json_encode($rand_key) ?>;
    function my_submit(curr) {
        var info = curr.guess.value;
        if (key == info) {
            alert('Correct!');
            return true;
        }
        else {
            alert('Incorrect!');
            returnToPreviousPage();
            return false;
        }
    }
</script>
<form onsubmit="return my_submit(this);">
    <p>Which hero is it? <input id="tags" name="guess"/></p>
</form>

这里有问题:

<input id="tags" name="guess" />

你的id是tags，不是guess。

你应该使用document.getElementById("tags").value

您正在尝试检索id为"guess "的元素的值。将其更改为"tags"。" 

var info = document.getElementById("tags").value;

另外，正如@CodeGodie提到的，您需要将函数名更改为submit以外的名称。

相关文章：