Question

这是一个非常基本的一个我有一个HTML格式的表格我想要以下功能 1. 当用户点击提交按钮然后邮件进入并且感谢信息出现在同一个地方而不刷新页面

这是我的HTML 其中有两个div显示文本并获取正文加载我正在显示获取文本div和提交我必须显示下一个div但这没有发生我不知道我做错了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE></STYLE>
<script src="jquery.js"></script>
<TITLE></TITLE>
<META content="text/html; charset=UTF-8" http-equiv=content-type>
</head>
<body style="margin:0; padding:0;">

<div style=" width:311px; height:576px; background:url(img/bg.png) no-repeat; position:relative; ">
<div class="getText">
  <form action="" method="POST">
    <input type="text" name="name" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:235px; left:47px;   "/>
    <input type="text" name="email" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:286px; left:47px;  "/>
    <input type="text" name="" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:337px; left:47px;   "/>
    <textarea cols="23" rows="4" style="border:1px solid black; position:absolute; top:387px; left:47px;"></textarea>
    <input type="submit" name="submit" value="Submit" style="width:76px; height:27px; border:0; outline:none; color:#ffffff; background-color:#ff0000; font-weight:bold; cursor:pointer; font-size:14px; font-family:verdana; position:absolute; top:470px; left:49px;" id="sub">
  </form>
</div>
<div class="showText" style="width:247px; height:282px; background-color:#ffac00; color;#292a2a; text-align:center; font-weight:bold; font-size:14px; font-family:verdana; position:absolute; top:216px; left:28px;"><br><br><br>   
    Thank You !<br>
    You shall hear from us soon !!

</div>
</div>

<script> 
$(document).ready(function(){
    $(".showText").hide();
      ("#sub").on("click",function( ) {
      $(".showText").show();
     $(".getText").hide();

    });
});
</script>
</body>
</html>

点击提交页面的

正在刷新并且没有显示谢谢div我不想刷新页面

Answer 1

这可以帮助您开始使用AJAX：http://jsfiddle.net/j8rnW/

$(document).ready(function () {
    $(".showText").hide();
    $("#sub").on("click", function (e) {
        e.preventDefault();
        $.ajax({
            url: '',
            method: 'post',
            data : {}, //pass your form elements as key-value pairs
            success: function (response) {
                $(".showText").show();
                $(".getText").hide();
            }
        });
    });
});

Answer 2

使用ajax会有所帮助。或者您可以将输入类型更改为＆＃39;按钮＆＃39;而不是提交。因为提交始终发布表单值并刷新页面

如何在没有刷新页面的情况下在表单上显示另一个div

2 个答案: