부트 스트랩 모달이 PHP 송신 스크립트 후 같은 페이지에서 열림

문의 양식에 대한 또 다른 질문입니다. PHP 스크립트를 통해 보내진 후 동일한 페이지에서 부트 스트랩 모달을 얻으려고했습니다. 슬프게도 나는 매번 실패했고, 지금 나는 조금 붙어있다.부트 스트랩 모달이 PHP 송신 스크립트 후 같은 페이지에서 열림

내가 원하는 것 ... 제출 버튼을 클릭 한 후, 연락처 양식은 PHP 스크립트에 의해 보내 져야하며, 그 후 "ThankyouModal"이 연락처 양식이있는 페이지에 팝업되어야합니다 입니다. 이 모든 필드가 네덜란드 언어에있는,하지만 코드가 보편적이어야한다는

<html> 
    <head> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 

     <!-- Main CSS --> 
     <link rel="stylesheet" href="css/style.css"> 

     <!-- Js --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<?php 

if(isset($_POST['submit'])) {  
    // EDIT THE 2 LINES BELOW AS REQUIRED 

    $email_to = "[email protected]"; 

    // EDIT THE 2 LINES BELOW AS REQUIRED 
    $sender = $_POST['email']; 

    $name = $_POST['name']; // required 
    $email = $_POST['email']; // required 
    $message = $_POST['message']; //required 


    $email_message = "Hieronder staan alle gegevens.\n\n"; 

    $email_subject = "Contact details - $name"; 

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

    $email_message .= "Naam: ".clean_string($name)."\n"; 
    $email_message .= "E-mailadres: ".clean_string($email)."\n"; 
    $email_message .= "Bericht: ".clean_string($message)."\n"; 


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

    if($sent){ 
     echo "<script> 
      $(document).ready(function(){ 
      $('#thankyouModal').modal('show'); 
      }); 
      </script>"; 
    } 
    else { 
     echo "<script> 
      alert('Sorry! Er is iets mis gegaan, probeer het opnieuw.') 
      location.replace('contact.html') 
      </script>"; 
    } 
} 
?> 

    </head> 
    <body> 
     <div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header text-center"> 
        <h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2> 
        </div> 
        <div class="modal-body text-center" style="background-color: #fff;"> 
        <p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p> 
        </div> 
        <div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;"> 
        <button type="button" class="btn btn-box" aria-label="Close"><a href="contact.html" style="color:fff;" data-dismiss="modal" onclick="javascript:window.location='contact.html'">Sluiten</a></button> 
        </div> 
       </div><!-- /.modal-content --> 
      </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 
    </body> 
</html>

내가 실현 :

<div class="container main-container"> 
    <div class="col-md-6"> 
     <form action="contact-page.php" method="post"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="input-contact"> 
         <input type="text" name="name"> 
         <span>Naam</span> 
        </div> 
       </div> 
       <div class="col-md-12"> 
        <div class="input-contact"> 
         <input type="text" name="email"> 
         <span>E-mailadres</span> 
        </div> 
       </div> 
       <div class="col-md-12"> 
        <div class="textarea-contact"> 
         <textarea name="message"></textarea> 
         <span>Bericht</span> 
        </div> 
       </div> 
       <div class="col-md-12"> 
        <!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> --> 
        <button type="submit" name="submit" class="btn btn-box">Verzenden</button> 
       </div> 
      </div> 
     </form> 
    </div>

이 여기에 PHP 스크립트입니다 :

다음은 HTML입니다. 아마도 팝업에 대한 해결책이있는 경우 "실패한"메시지에 대해 동일한 팝업을 구현하는 방법을 알고 싶습니다.

미리 감사드립니다. 케빈

출처

2017-11-26 ZnortDesigns

더 좋은 방법은 아약스를 사용하여 양식을 게시하는 것입니다. 성공은 .modal-content의 dom 컨텐츠를 고맙게 생각하도록 변경합니다. –

아약스로 해보는 게 어때? 필요한 기능에 데이터를 게시하고 사용자 정보 저장시 성공한 응답을 보냅니다. 수신 된 데이터가 성공하면 모달을 표시합니다. – Prabhu

나는 주석을 고맙게 생각하지만 AJAX 나 PHP로는 전혀 해본 적이 없다. 나는 더 많은 것을 알고있다. ($ mod ("# modal-id) .modal(); 프론트 엔드 녀석 (공식적으로 그래픽 디자이너) 이니 좀 더 설명하면 멋질 것 같습니다 :) @LawrenceCherone – ZnortDesigns

이 트릭을 수행해야합니다

form.html : -

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf8"> 
    <title>Contact Form</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 
</head> 
<body> 
    <div class="container main-container"> 
    <div class="col-md-6"> 
     <form id="contact-form"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="input-contact"> 
       <input type="text" name="name"> 
       <span>Naam</span> 
      </div> 
      </div> 
      <div class="col-md-12"> 
      <div class="input-contact"> 
       <input type="text" name="email"> 
       <span>E-mailadres</span> 
      </div> 
      </div> 
      <div class="col-md-12"> 
      <div class="textarea-contact"> 
       <textarea name="message"></textarea> 
       <span>Bericht</span> 
      </div> 
      </div> 
      <div class="col-md-12"> 
      <!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> --> 
      <button type="submit" name="submit" class="btn btn-box">Verzenden</button> 
      </div> 
     </div> 
     </form> 
    </div> 
    </div> 

    <div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header text-center"> 
      <h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2> 
     </div> 
     <div class="modal-body text-center" style="background-color: #fff;"> 
      <p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p> 
     </div> 
     <div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button> 
     </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

    <div id="fail-modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Fail Modal</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Something went wrong in the php script</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button> 
     </div> 
     </div> 
    </div> 
    </div> 

    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#contact-form").on("submit", function(event) { 
     event.preventDefault(); 

     request = $.ajax({ 
      url: "process.php", 
      type: "post", 
      data: $(this).serialize(), 
      dataType:"json" 
     }); 

     // Callback handler that will be called on success 
     request.done(function (response, textStatus){ 
      if (response == true) { 
      console.log('true'); 
      $('#thankyouModal').modal('show'); 
      } else { 
      console.log('false'); 
      $('#fail-modal').modal('show'); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (textStatus, errorThrown){ 
      // Log the error to the console 
      console.error(
      "The following error occurred: "+ textStatus, errorThrown 
     ); 
     }); 
     }); 
    }); 
    </script> 
</body> 
</html>

process.php : - $해야 전송 나타날 성공 모달를 들어

<?php 
header('Content-Type: application/json'); 

$sent = false; 
if(isset($_POST['submit'])) {  
    // EDIT THE 2 LINES BELOW AS REQUIRED 
    $email_to = "[email protected]"; 

    // EDIT THE 2 LINES BELOW AS REQUIRED 
    $sender = $_POST['email']; 

    $name = $_POST['name']; // required 
    $email = $_POST['email']; // required 
    $message = $_POST['message']; //required 

    $email_message = "Hieronder staan alle gegevens.\n\n"; 

    $email_subject = "Contact details - $name"; 

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

    $email_message .= "Naam: ".clean_string($name)."\n"; 
    $email_message .= "E-mailadres: ".clean_string($email)."\n"; 
    $email_message .= "Bericht: ".clean_string($message)."\n"; 

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

die(json_encode($sent)); 

?>

을 process.php 끝 부분에서 사실

PHP 스크립트를 테스트하지 않았습니다. 개까지. 아마 내가 한 방법보다 응답을 확인하는 더 좋은 방법이 있습니다. 그러나 이것은 처음에는 아약스를 사용한 이후 좋고 단순해야합니다.

출처

2017-11-26 18:19:20 Chris

안녕하세요 @ 크리스 슬프게도 충분히 정보를 보내지 만. PHP는 작동합니다. 당신은 여기에서 그것을 테스트 할 수 있습니다 : test.znortdesigns.com – ZnortDesigns

나는 지금 집에 없으므로 아무것도 테스트 할 수 없습니다. 내가 게시 한 스크립트가 작동해야합니다. jQuery와 부트 스트랩을 포함하고 있습니까? 콘솔에 오류가 있습니까? 오늘 밤에 집에 돌아가 다른 모습을 보겠습니다. – Chris

바닥 글에 jQuery를로드 중입니다. 아마도 문제 일 것입니다. 확인하겠습니다. :) – ZnortDesigns

부트 스트랩 모달이 PHP 송신 스크립트 후 같은 페이지에서 열림

답변

관련 문제