如何添加带有正确和错误警报的 HTML 提交测验答案

【问题标题】：How to add a HTML submit quiz with correct and incorrect alert如何添加带有正确和错误警报的 HTML 提交测验
【发布时间】：2012-12-09 00:03:01
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： javascript html forms text

【解决方案1】：

你需要一个属性 action 用于 html 表单：http://reference.sitepoint.com/html/form/action

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

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

希望这会有所帮助！随时要求进一步澄清。

【讨论】：

【解决方案2】：

用 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;
}

评论：

希望能有所帮助。

问候。

【讨论】：