单击“确定”确认对话框时，使Div出现

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 ，因此，当您获得true时，请使该表单不显示并将文本放入容器中，

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： 这里