2016-11-30 1 views
0

부트 스트랩 모달 내에서 연락 양식을 만들려고했습니다. 모달로 양식을 제출 한 직후 경고가 나타나야합니다. 테스트를 위해 사용하는 사이트에서 잘 작동합니다. 그러나 주 사이트에 코드를 통합하면 경고가 새 창에 텍스트로 표시됩니다. 같은 코드. 다른 응답. 무엇이이 문제를 일으킬 수 있습니까?AJAX POST가 새창 대신 같은 창에서 열림

HTML :

<div class="container"> 

    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div id="myModal" 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">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
        <form id="contact-form" method="post" action="contact.php" role="form"> 

         <div class="messages"></div> 

         <div class="controls"> 

          <div class="row"> 
           <div class="col-md-12"> 
            <div class="form-group"> 
             <label for="form_name">Name</label> 
             <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" data-error="Firstname is required."> 
             <div class="help-block with-errors"></div> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-12"> 
            <div class="form-group"> 
             <label for="form_email">Email</label> 
             <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" data-error="Valid email is required."> 
             <div class="help-block with-errors"></div> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-12"> 
            <div class="form-group"> 
             <label for="form_message">Message *</label> 
             <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea> 
             <div class="help-block with-errors"></div> 
            </div> 
           </div> 
           <div class="col-md-12"> 
            <input type="submit" class="btn btn-success btn-send" value="Send message"> 
           </div> 
          </div> 
         </div> 
        </form> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 

</div> 
<!-- /.container--> 

PHP :

<?php 

// configure 
$from = '[email protected]'; 
$sendTo = '[email protected]'; 
$subject = 'New message from contact form'; 
$fields = array('name' => 'Name', 'email' => 'Email', 'message' => 'Message'); // array variable name => Text to appear in email 
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!'; 
$errorMessage = 'There was an error while submitting the form. Please try again later'; 

// let's do the sending 

try 
{ 
    $emailText = "You have new message from contact form\n=============================\n"; 

    foreach ($_POST as $key => $value) { 

     if (isset($fields[$key])) { 
      $emailText .= "$fields[$key]: $value\n"; 
     } 
    } 

    mail($sendTo, $subject, $emailText, "From: " . $from); 

    $responseArray = array('type' => 'success', 'message' => $okMessage); 
} 
catch (\Exception $e) 
{ 
    $responseArray = array('type' => 'danger', 'message' => $errorMessage); 
} 

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
    $encoded = json_encode($responseArray); 

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

    echo $encoded; 
} 
else { 
    echo $responseArray['message']; 
} 

JS :

$(function() { 

$('#contact-form').validator(); 

$('#contact-form').on('submit', function (e) { 
    if (!e.isDefaultPrevented()) { 
     var url = "contact.php"; 

     $.ajax({ 
      type: "POST", 
      url: url, 
      data: $(this).serialize(), 
      success: function (data) 
      { 
       var messageAlert = 'alert-' + data.type; 
       var messageText = data.message; 

       var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>'; 
       if (messageAlert && messageText) { 
        $('#contact-form').find('.messages').html(alertBox); 
        $('#contact-form')[0].reset(); 
       } 
      } 
     }); 
     return false; 
    } 
}) 

});

<form id="contact-form"> 

과로 아약스 우편 번호에 $(this).serialize()을 변경 : - - :

+1

가 있습니까 당신은 프로덕션에서 네이티브 브라우저의 경고창을 보여주고 있습니까? – vbguyny

+0

이것이 명확하지 않으면 죄송합니다. 부트 스트랩 경고 상자를 표시합니다. – AndiLeni

답변

0

양식 태그의 동작 매개 변수 action="contact.php" 양식 태그로 이것을 사용해보십시오 새로 페이지를 강요

$('#contact-form').serialize() 
+0

이것은 문제를 해결하지 못했습니다 : ( 그냥 전체 스크립트를 충돌시킵니다. 내가 변경 사항을 적용하면 정확한 메시지를받지 못합니다. contacts.php의 일부 verry 이상한 부분 – AndiLeni

+0

시도해보십시오. 변경하지 않는 두 번째 변경 $ (this) .serialize() –

+0

하지만 액션 태그와 메소드 태그 없이는 어떻게 작동할까요? 나는 그것들이 중요하다고 생각했습니다. – AndiLeni

관련 문제