提交表单后显示弹出窗口

时间:2018-05-14 12:11:38

标签: javascript php html ajax

任何人都可以帮助我,我希望php的结果在同一个html页面上以弹出形式显示,怎么办?这是我的代码 谢谢大家的帮助

的index.html

        <!-- Start Contact Form -->
    <div class="triangle"></div>
    <div id="cform" class="container">
        <div class="row">
            <h3 class="my-title contact-title">Kontaktformular</h3>
            <hr>
            <div class="col-md-12">
                <form id="my-form" method="post" action="handler.php">
                    <ul class="contact-form">
                        <li>
                            <div class="col-md-6">
                                <input name="name" placeholder="Name" required="required" size="8" type="text">
                            </div>

                            <div class="col-md-6">
                                <input name="email" placeholder="E-Mail" required="required" size="8" type="email">
                            </div>
                        </li>

                        <li>
                            <div class="col-md-6">
                                <input name="telefon" placeholder="Telefon" size="8" type="text">
                            </div>

                            <div class="col-md-6">
                                <input name="firma" placeholder="Firma" size="8" type="text">
                            </div>
                        </li>

                        <li>
                            <div class="col-md-6">
                                <label>Ihr Budget</label>
                                <div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                                    <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 1%;">
                                        </div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 8%;"></span></div>
                            </div>
                            <div class="col-md-6">
                                <input name="amount" id="amount" readonly>
                            </div>
                        </li>

                        <li>

                            <div class="col-md-12">
                                <textarea class="span12" name="details" placeholder="Ihre Projektbeschreibung" required="required"></textarea>
                            </div>
                        </li>

                        <li>
                            <div class="col-md-12">
                                <button id="my-btn" type="submit">Senden <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
                                <span id="status"></span>
                            </div>
                        </li>


                    </ul>
                </form>
            </div>

        </div>
    </div>
    <!-- End Contact Form -->

handler.php

<?php
if(isset($_POST['email'])) {

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "info@test.com";
    $email_subject = "Your email subject line";

    function died($error) {
        // your error code can go here
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br /><br />";
        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }


    // validation expected data exists
    if(!isset($_POST['name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telefon']) ||
        !isset($_POST['firma']) ||
        !isset($_POST['amount']) ||
        !isset($_POST['details'])) {
        died('We are sorry, but there appears to be a problem with the form you submitted.');       
    }



    $first_name = $_POST['name']; // required
    $email_from = $_POST['email']; // required
    $firma = $_POST['firma']; // required
    $telephone = $_POST['telefon']; // not required
    $amount = $_POST['amount'];
    $comments = $_POST['details']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }

    $string_exp = "/^[A-Za-z .'-]+$/";

  if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }

  if(!preg_match($string_exp,$firma)) {
    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }

  if(strlen($comments) < 2) {
    $error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }

  if(strlen($error_message) > 0) {
    died($error_message);
  }

    $email_message = "Form details below.\n\n";


    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }



    $email_message .= "First Name: ".clean_string($first_name)."\n";

    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Firma: ".clean_string($firma)."\n";
    $email_message .= "Amount: ".clean_string($amount)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";

// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  


?>

<!-- include your own success html here -->


Thank you for contacting us. We will be in touch with you very soon.


<?php

}
?>

我为我将PHP代码放在代码段中这一事实表示道歉,我不可能以不同的方式表达它,但我认为它就是那么清楚。

在我发送表格的那一刻,我进入第二页,即handler.php回答表格已发送(&#34;感谢您与我们联系。我们会尽快与您联系。&# 34)

4 个答案:

答案 0 :(得分:0)

您必须将target属性添加到form HTML标记。在那里,您可以指定弹出窗口中的iframe ID。

<form target="my-iframe"></form>

<div class="popup">
<iframe id="my-iframe"/>
</div>

你根本不必使用JS :)除非我弄错了...... 请参阅参考:https://www.w3schools.com/tags/att_form_target.asp

答案 1 :(得分:0)

试试这个:

用这样的标签封闭你的回声。

echo '<script>alert("Page submited");<script>';

答案 2 :(得分:0)

要使用ajax,请在HTML代码中下载并链接jQuery并访问以下函数:

的jQuery

$('#my-form').on('submit', function(e)
{
    e.preventDefault(); //this stops the form submit + refresh 

        $.ajax({ 
            data:    {data_field: 'value'},
            type:    'post',
            url:     '/path/to/script.php',
            success: function(r) {$('#my-popup').removeClass('hidden')},
            error:   function(r) {alert('error'); console.log(r)}
        });
});

HTML

<div class="hidden" id="my-popup">
    <p>some msg</p>
</div>

CSS

.hidden {display: none}

注意:以上内容不能通过复制和粘贴工作,更改ajax函数数据字段,以便它响应您的脚本

参考:https://api.jquery.com/jQuery.ajax/

答案 3 :(得分:0)

你也可以这样使用

if($insert_id=='success'){//change success based on the returned value of the model
    echo "<script>
        alert('Success');
        window.location.href='".base_url('/path/to/script.php')."';
        </script>";
}