Question

<div class="col" style="border-right:none; color: #FFFFFF;">
    <form id="form-search" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
        <span>
            <span class="style2">Enter you email here</span>:
        </span>
        <input name="email" type="email" id="email" required/>
        <input type="submit" value="subscribe" class="submit" style="height:30px;"/>
    <?php
            if($_POST['email']!="")
            {
                mysql_connect("localhost","","");
                mysql_select_db("");
                error_reporting(E_ALL && ~E_NOTICE);
                $email=$_POST['email'];
                $sql="INSERT INTO newsletter_email(email) VALUES ('$email')";
                $result=mysql_query($sql);
                if($result){
                    echo "You have been successfully subscribed.";
                }
                if(!$sql)
                    die(mysql_error());
                mysql_close();
            }
        ?>

    </form>
</div>

用户订阅后，我想替换我的订阅表单并显示echo语句。

此代码运行完全正常，也非常好;只是想要一些更多的优势.. ..

它显示为 enter image description here

但我希望像 enter image description here

一样展示它

我现在的代码

<div class="col" style="border-right:none; color: #FFFFFF;">
                    <script>
                     var form = $('#form1');
   $.ajax{
         type:form.attr('method'),
         url:form.attr('action'),
 data:$("#form1").serialize(),
  success: function(data){
    if(data=="You have been successfully subscribed."){
                     $(".col").html("<div>Welcome</div>")

    }

    }
                    </script>

<form id="form1" method="post" action="index.php">
<span><span class="style2">Enter you email here</span>:</span>
<input name="email" type="email" id="email" required/>
<input type="submit" value="subscribe" class="submit" style="height:30px;"/>
            <?php
if($_POST['email']!="")
{
mysql_connect("localhost","","");
mysql_select_db("");
error_reporting(E_ALL && ~E_NOTICE);
$email=$_POST['email'];
$sql="INSERT INTO newsletter_email(email) VALUES ('$email')";
$result=mysql_query($sql);
if($result){
    echo "You have been successfully subscribed.";
}
 if(!$sql)
die(mysql_error());
mysql_close();
}
?>

</form>
  </div>

Answer 1

ajax用作html和php之间的代理，以html格式输入的详细信息通过ajax提供给php，从php获得的结果通过ajax发回。这可以通过php本身完成，但是使用ajax创建一个非闪烁的页面，即在没有完整请求的情况下更新网页的一部分。

   var form = $('#form1');
       $.ajax{
             type:form.attr('method'),
             url:form.attr('action'),
     data:$("#form1").serialize(),
      success: function(data){
        if(data=="You have been successfully subscribed."){
                         $(".col").html("<div>Welcome</div>")

        }

        }

HTML code：

       <HTML>
       <BODY>
       <div class="col">
           <form id="form1" action="index.php" method="POST">
              <input name="email" type="email" id="email" required/>
              <input type="submit" value="subscribe" class="submit" style="height:30px;"/>
          </form>
       </div>
       </body>
        </html>

更新ajax代码

   var form = $('#form1');
       $.ajax{
             type:form.attr('method'),
             url:form.attr('action'),
     data:$("#form1").serialize(),
      success: function(data){
        if(data=="You have been successfully subscribed."){
                         $(".col").html("<div>Welcome</div>")
                     }    
       },
             error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
              }
       }

Answer 2

提交ajax后，您只需隐藏电子邮件输入和按钮

即可

$("#email").hide();

==========================================

<form id="form-search" method="post" onsubmit="return myFunction()" action="<?php echo $_SERVER['PHP_SELF'];?>">

然后在你页面的某个地方

<script>
function myFunction(){
$("#email").hide();
$(".style2").hide();
$(".submit").hide();

return true;
}
</script>

Answer 3

像这样编辑你的PHP代码;

if($result){
    <script>
      $(".class").hide(); // get input class name
    </script>
    echo "You have been successfully subscribed.";
}

用ajax / javascript中的另一个div替换div？

3 个答案: