6

フォームの送信後にモーダルを開いたままにしておくための比較的簡単な方法（私はJQueryにあまり熟練していません）があるかどうかを理解しようとしています。（フォームはモーダルに含まれています）。

フォームが成功した場合、またはエラーが発生した場合、PHPはそれらを表示しますが、送信ボタンが押されるとすぐにモーダルが閉じます。

フォームをリロードすると、適切な成功またはエラーメッセージが表示されるので、すべて正常に機能していますが、エンドユーザーにメッセージを表示してから、クリックしてモーダルを閉じてください。

それが役に立ったら、コードを投稿できます。

ありがとうございました。

<?php 
$success_message = "<h3 class='success'>Thank you, your message has been sent.</h3>"; 
$success = false; // we assume it and set to true if mail sent
$error = false;

// set and sanitize our form field values

$form = array(
  'Name' => $sanitizer->text($input->post->name),
  'Email' => $sanitizer->email($input->post->email),
  'Phone number' => $sanitizer->text($input->post->phone),
  'Type of client' => $sanitizer->text($input->post->client_type),
  'Service client is after' => $sanitizer->text($input->post->service),
  'Further information' => $sanitizer->textarea($input->post->information)
);

$required_fields = array(
  'name' => $input->post->name,
  'email' => $input->post->email
);


// check if the form was submitted
if($input->post->submit) {

  // determine if any fields were ommitted or didn't validate
  foreach($required_fields as $key => $value) {
    if( trim($value) == '' ) {
      $error_message = "<h3 class='error'>Please check that you have completed all the required fields.</h3>";
      $error = true;
    }
  }
  // if no errors, email the form results
  if(!$error) {
    $message = "";
    $to_name = "My name";
    $to = "me@me.com";
    $subject = "Contact Form request";
    $from_name = "My Website";
    $from = "do-not-reply@my-site.com";
    $headers = "From: $from_name <$from>";
    foreach($form as $key => $value) $message .= "$key: $value\n";

    require_once("./scripts/PHPMailer/class.phpmailer.php");

    $mail = new PHPMailer();
    $mail->CharSet = "UTF8";

    $mail->FromName = $from_name;
    $mail->From = $from;
    $mail->AddAddress($to, $to_name);
    $mail->Subject = $subject;
    $mail->Body = $message;

    if ($mail->Send()) {
      $success = true;
    }
}
}
?>



<!-- Contact form made available from every page -->

    <div class="modal hide fade" id="form">


        <div class="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
           <h3>Get in touch</h3>
         </div>

        <div class="modal-body">

        <?php if(!$success) { 
            if($error) {
            echo $error_message; // or pull from a PW field
            } 
        ?>

        <form action="./" method="post" class="modal-form">

            <div class="row-fluid">
                <fieldset class="span6">

                    <label for="name">Name:</label>
                    <input type="text" name="name" required>

                    <label for="email">Email:</label>
                    <input type="email" name="email" required>

                    <label for="phone">Phone:</label>
                    <input type="tel" name="phone">

                </fieldset> 

                <fieldset class="span6">

                    <label for="client_type">I am a...</label>
                    <select name="client_type">
                        <option>Private student</option>
                        <option>Business</option>
                        <option>Unsure</option>
                    </select>

                    <label for="service">I am interested in...</label>
                    <select name="service">
                        <option>Private tuition</option>
                        <option>Group tuition</option>
                        <option>Translation</option>
                        <option>Unsure</option>
                    </select>

                </fieldset>
            </div> <!-- /.row-fluid -->


            <div class="row-fluid">
                <fieldset>
                    <label for="information">Further information:</label>
                    <textarea name="information" name="information" id="information" class="span12"></textarea>
                </fieldset>

            <button type="submit" name="submit" value="Submit" class="btn">Submit</button>

            </div> <!-- /.row-fluid -->

            </form>

            <?php }  else {

            echo $success_message;
            } ?>

        </div> <!-- /.modal-body -->


        <div class="modal-footer">

        </div> <!-- /.modal-footer -->


    </div> <!-- /#contact_form.modal hide fade -->
4

3 に答える 3

9

モーダルウィンドウを閉じないように、つまりページ全体を更新しないようにするには、ajax呼び出しを介してフォーム値をphpスクリプトに送信する必要があります。

簡単にするために、ここではjQueryを使用します

$(function() {

    $('#your_form_id').on('submit', function(event) {

        event.preventDefault();

        $.ajax({
            url: "your_php_script.php",
            type: "POST",
            data: {"formFieldName" : formFieldValue}, // here build JSON object with your form data
            dataType: "json",
            contentType: "application/json"
        }).done(function(msg) {
            // this is returned value from your PHP script
            //your PHP script needs to send back JSON headers + JSON object, not new HTML document!
            // update your "message" element in the modal
            $("#message_element_id").text(msg);
        });
    });
};
于 2012-08-08T16:46:12.700 に答える
7

フォームが送信されるactionと、フォームのが同じページであっても、ページが再読み込みされます（空のアクションは同じページも意味します）。

ページが再度読み込まれたら、モーダルを再度開きたいと思います。フォームを使用していると仮定するとmethod="post"、コードは次のようになります。

<html>
    <head>
      <!-- stuff -->
        <script type="text/javascript">

<?php if(isset($_POST['submit_button'])) { ?> /* Your (php) way of checking that the form has been submitted */

            $(function() {                       // On DOM ready
                $('#myModal').modal('show');     // Show the modal
            });

<?php } ?>                                    /* /form has been submitted */

        </script>
    </head>
    <body>
      <!-- etc -->
    </body>
 </html>
于 2012-08-08T16:45:28.170 に答える
0

また、 window.stop（）を使用して、モデルが閉じて全体が更新されないようにすることもできます。これは、ブラウザーの停止ボタンをクリックするようなものです。

于 2016-07-23T12:36:29.053 に答える