AJAX POST im selben Fenster statt neu

Question

Ich habe versucht, ein Kontaktformular in einem Bootstrap-Modal zu erstellen. Eine Warnung sollte direkt nach dem Senden des Formulars im Modal angezeigt werden. Es funktioniert gut auf meiner Website, die ich zum Testen verwende. Aber wenn ich den Code in meine Hauptseite integrieren, wird die Warnung als Text in einem neuen Fenster angezeigt. Gleicher Code. Andere Antwort. Was könnte dieses Verhalten verursachen?

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 = 'noreplay@xy.de'; 
$sendTo = 'webmaster@xy.de'; 
$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; 
    } 
}) 

});

Answer 1

Der Aktionsparameter in Form Tag action="contact.php" zwingen die Seite mit dieser als Formular-Tag zu aktualisieren versuchen: -

<form id="contact-form"> 

und $(this).serialize() Postleitzahl in Ihrem Ajax ändern: -

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