Question

这是我的代码：

<form method="GET">
    <input type="text" class="form" name="name" placeholder="Your name here!" id="name">
    <input type="submit" onclick="return clicked();" value="I'm ready!">
</form>
<br>
<script>
function clicked() {
    var name = document.getElementById('name').value;
    return confirm('Hello ' + name + ', great to see you!');
}
</script>

当用户在警报上单击“确定”时，是否可以显示文本（不在警告框上）。此外，当文本出现时，是否可以使表单淡出？

感谢。

Answer 1

<script>
    function clicked() {
    var name = document.getElementById('name').value;
    var r = confirm('Hello ' + name + ', great to see you!');
    if (r==true)
      { 
      // Code to fadeOut form comes here: 
      // jquery:
      // $("form").fadeOut();
      // Pure JS: ( hides the form with ID "myform" )
      // document.getElementById("myform").style.display="none";
      // document.getElementById("id of thanks message").style.display="inline";
      }
    return r; // If you want to stay in this page just return false not r
}
</script>

此外，我建议将功能附加到表单提交，而不是按钮单击。因为用户可以按Enter键提交表单。

Answer 2

在表单中添加一个id作为JQuery的处理程序。然后添加一个占位符元素（在本例中为＃reply-user）将消息（问候语）输出给用户。占位符是一种可以绕过警报弹出窗口的方式。

<form id="your-form" method="GET">
<input type="text" class="form" name="name" placeholder="Your name here!" id="name">
<input type="submit" onclick="return clicked();" value="I'm ready!">
</form>
<h3 id="reply-user"></h3>
<br>

<script>
function clicked() {
var name = document.getElementById('name').value;
$('#your-form').fadeOut();
$('#reply-user').append('Hello ' + name + ', great to see you!');
}
</script>

Answer 3

非常简单，确认返回 true 或 false ，具体取决于您是点击“是”还是“否“下，因此，当您成功时，请将表单显示无并将文本放入容器中

Js代码：

function clicked() {
var name = document.getElementById('name').value;
if(confirm('Hello ' + name + ', great to see you!'))
{
    document.getElementById('nameDiv').innerHTML = 'Hello ' + name + ', great to see you!';
    document.getElementById('mainDiv').style.display = "none";
}

}

Js Fiddle：here

单击确定确认对话框时显示Div

3 个答案: