javascript - 如何添加带有正确和不正确警报的 HTML 提交测验

Question

我创建了一个迷你网站，自学 JavaScript 和 PHP，其想法是当你点击“播放”时，你可以通过点击瓷砖来猜测城市，从而在背景中发现城市。我有这个页面在这里工作：http: //hoverpixel.netii.net/play.html

但是，我正在努力将 PHP/JS 添加到文本输入表单中。

本质上，我需要使用提交表单来表示：

当进入纽约时 - 正确做得好！（作为文本或警报）
或者当提交任何其他内容时 - 错误重试！

我到处搜索包含此功能但没有任何运气的 HTML 提交表单：/

请有人指出我正确的方向，或发送指向具有此功能的示例代码的链接，我可以编辑吗？

非常感谢，非常感谢任何帮助！

score 0 · Accepted Answer

您需要的是actionhtml 表单的属性：http ://reference.sitepoint.com/html/form/action

这允许您将输入的数据发送到您的服务器。然后，您可以使用例如 php 访问它：http $_POST: //php.net/manual/en/reserved.variables.post.php （假设您也使用表单的操作方法“post”。）

然后，您可以轻松检查您的 php 代码中是否输入了正确的字符串，然后输出正确的 html，让用户知道他们输入的字符串是否正确。

希望这可以帮助！随时要求进一步澄清。

score 0 · Accepted Answer

尝试使用 jQuery：

在 test.php 中

...
$data['status'] = 1; // Status of the operation (1: Ok, 0: Error)
$data['msg'] = $msg; // Error message or success
header('Content-Type: application/json');
echo json_encode($data);

在 test.js 中：

$("#send").click(function () {
    $.post('test.php', $('#yourForm').serialize(), function(data){
        if(data.status == 1){
            $('#result').show().addClass('success').html(data.msg);
        }
        else{
            $('#result').show().addClass('error').html(data.msg);
        }
    }, "json");
    return false;
});

在 test.html 中：

<form method="post" id="yourForm">
...
<input id="send" type="button"/>
<span id="result"></span>
</form>

在 test.css 中：

.success{
    color: blue;
}
.error{
    color: red;
}

审查：

希望能有所帮助。

问候。

javascript - 如何添加带有正确和不正确警报的 HTML 提交测验

2 回答 2

Related

Reference