防止提交表单上的页面重定向... php

Question

这里我使用的是联系表。当我点击提交按钮而不是在同一页面上显示“消息发送成功”时，它会重定向到空白页面。

html

<div class="form">
<div style = "font-size:11px; color:#cc0000; margin-top:10px"></div>
<div id="sendmessage" style="display:none">Your message has been sent successfully.</div>
<div id="errormessage"></div>
<form action="contact.php" method="post" role="form" id="myForm"  class="contactForm">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control input-text" id="clientname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control input-text" name="email" required="required" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="tel" class="form-control input-text" min="0" maxlength="10" required="required" name="phone" id="subject" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control input-text text-area" name="msg" rows="5" required="required" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>

<div class="text-center"><button type="submit" class="input-btn" onclick="sendMsg(2000)">Send Message</button></div>
</form>
</div>

contact.php

<?php
        include("config.php");
        if(!$db)
            echo mysql_error($db);

        $name = mysqli_real_escape_string($db, $_POST['name']);
        $email = mysqli_real_escape_string($db, $_POST['email']);
        $phone = mysqli_real_escape_string($db, $_POST['phone']);
        $message = mysqli_real_escape_string($db, $_POST['msg']);
        $id = uniqid() . sha1($name);

        $sql="INSERT INTO contact (id, Name, Email, Phone, Message) VALUES ('$id', '$name', '$email','$phone','$message');";

        if (!mysqli_query($db,$sql)) 
        {
            die('Error: ' . mysqli_error($db));
        }
?>

contact.js

function sendMsg(duration)
{
   var usr = document.getElementById().value;
   var email = document.getElementById().value;
   var phone = document.getElementById().value;
   var msg = document.getElementById().value;
   if(usr.length < 1 && email.length < 1 && phone.length < 1 && msg.length < 1)
   {
      document.getElementById('sendmessage').style.display = "block";
      setTimeout(function() {
      $('#sendmessage').fadeOut('fast');
      }, 5000);
      var form = document.getElementById("myForm");
      form.reset();
   }     

}

我现在已经添加了js代码。

Answer 1

这可以通过定位 iframe 并隐藏它来实现。 像这样的

<iframe name="myframe" id="frame1" src="thankyou.php" style="display:none"></iframe>
<form action="../thankyou.php" method="post" target="myframe">
<input type="submit" name="DoIt" value="DoIt">
</form>    

Answer 2

如果你不希望表单重定向到另一个页面，你有两种方法，1.使用php_self作为表单动作或使用AJAX（页面甚至不会刷新这个），也使用准备好的语句来防止sql按照 Jay 上面的建议进行注射。

选项 1：PHP_SELF

<?php
include("config.php");

$successMessage = "";

if (isset($_POST['submit'])) {


    //validated your inputs fields
    $name    = $_POST['name'];
    $email   = $_POST['email'];
    $phone   = $_POST['phone'];
    $message = $_POST['msg'];
    $id      = uniqid() . sha1($name);

    $sql = "INSERT INTO contact (id, Name, Email, Phone, Message) VALUES ('$id', '$name', '$email','$phone','$message');";

    //prepare and bind 
    $sql = $db->prepare("INSERT INTO contact (id, Name, Email, Phone, Message) VALUES(?,?,?,?,?)");
    $sql->bind_param("sssss", $id, $name, $email, $phone, $message);

    if ($sql->execute()) {

        $message = "Your message has been sent successfully.";

    }

    $sql->close();
    $db->close();


}

?>
<div class="form">
    <div style = "font-size:11px; color:#cc0000; margin-top:10px"></div>
    <div id="sendmessage"><?php echo $message;?></div>
    <div id="errormessage"></div>
    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" role="form" id="myForm"  class="contactForm">
        <div class="form-group">
            <input type="text" name="name" required="required" class="form-control input-text" id="clientname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <input type="email" class="form-control input-text" name="email" required="required" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <input type="tel" class="form-control input-text" min="0" maxlength="10" required="required" name="phone" id="subject" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <textarea class="form-control input-text text-area" name="msg" rows="5" required="required" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
            <div class="validation"></div>
        </div>
        <div class="text-center"><button type="submit" name="submit" class="input-btn" onclick="sendMsg(2000)">Send Message</button></div>
    </form>
</div>

选项 2：AJax

 <div class="form">
    <div style = "font-size:11px; color:#cc0000; margin-top:10px"></div>
    <div id="sendmessage"></div>
    <div id="errormessage"></div>
    <form action="contact" method="post" role="form" id="myForm"  class="contactForm">
        <div class="form-group">
            <input type="text" name="name" required="required" class="form-control input-text" id="clientname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <input type="email" class="form-control input-text" name="email" required="required" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <input type="tel" class="form-control input-text" min="0" maxlength="10" required="required" name="phone" id="subject" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <textarea class="form-control input-text text-area" name="msg" rows="5" required="required" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
            <div class="validation"></div>
        </div>
        <div class="text-center"><button type="submit" name="submit" class="input-btn" id="mybtn">Send Message</button></div>
    </form>
</div>

<script type="text/javascript">

    $('document').ready(function(){
        $('#myForm').on('submit',function(e){
            e.preventDefault(); //prevent default form submition
            var FormData = $('#myForm').serialize();

        $.ajax({

            type : 'post',
            url : 'contact.php';
            data : FormData,
            dataTYpe : 'json',
            encode : true,
            beforeSend : function(){

                $('$mybtn').html('<span class="glyphicon glyphicon-repeat fast-right-spinner"></span> Sending');
            },
            success : function(response){

                response = JSON.parse(response);

                if(response== "ok"){

                    $('sendmessage').html('Your message has been sent successfully.');
                }else{

                    $('errormessage').html(response);
                }

            }

        });

        });


    });


</script>

contact.php

<?php
include("config.php");

$message = "";

if (isset($_POST['submit'])) {

    //validated your inputs fields
    $name    = $_POST['name'];
    $email   = $_POST['email'];
    $phone   = $_POST['phone'];
    $message = $_POST['msg'];
    $id      = uniqid() . sha1($name);

    $sql = "INSERT INTO contact (id, Name, Email, Phone, Message) VALUES ('$id', '$name', '$email','$phone','$message');";

    //prepare and bind 
    $sql = $db->prepare("INSERT INTO contact (id, Name, Email, Phone, Message) VALUES(?,?,?,?,?)");
    $sql->bind_param("sssss", $id, $name, $email, $phone, $message);

    if ($sql->execute()) {

        $message = "ok";

    }else{

        $message = "could not send/ insert";
    }

   echo json_encode($message);


}

?>