Ajax Erfolgsfunktion funktioniert nicht richtig

Ich habe ein einfaches Ajax/PHP-Formular gemacht und meine Erfolgsfunktion funktioniert aus irgendeinem Grund nicht richtig. Ich bekomme immer noch E-Mails, also denke ich, dass die Bedingung wahr ist, aber die erscheint nicht und der Absenden-Button ist nicht blockiert. Hier ist mein Code:Ajax Erfolgsfunktion funktioniert nicht richtig

function myFunction() { 
 
      var name = document.getElementById("name").value; 
 
      var message = document.getElementById("message").value; 
 
      var company = document.getElementById("company").value; 
 
      var phone = document.getElementById("phone").value; 
 
      
 
     // Returns successful data submission message when the entered information is stored in database. 
 
     var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone; 
 
      if (name == '' || message == '' || company == '' || phone == '') { 
 
      document.getElementById("error").style="display: block; color: red;"; 
 
     } else { 
 
      
 
      
 
     // AJAX code to submit form. 
 
      $.ajax({ 
 
      type: "POST", 
 
      url: "email.php", 
 
      data: dataString, 
 
      cache: false, 
 
      success: function() { 
 
       document.getElementById("success").style="display: block; color: green;"; 
 
      } 
 
      }); 
 
     } 
 
     return false; 
 
     }

<!DOCTYPE HTML> 
 
    <html> 
 
    
 
    <head> 
 
    
 
     <meta charset="utf-8"> 
 
     
 
     <title>AJAX + PHP форма</title> 
 
     
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
     
 
     <style type="text/css"> 
 
     
 
     .input_group { 
 
      
 
      display:inline-block; 
 
      padding: 5px; 
 
      width:100%; 
 
      text-align: center; 
 
      
 
     } 
 
     
 
     form { 
 
      
 
      width: 50%; 
 
      
 
     } 
 
     
 
     #send_message { 
 
      text-align: center; 
 
     } 
 
     
 
     </style> 
 
     
 
     
 
    </head> 
 
    
 
    <body> 
 
     
 
     <form id="contact" action=""> 
 
     
 
     <fieldset> 
 
      
 
      <legend>AJAX + PHP форма</legend> 
 
      
 
      <div class = "input_group"> 
 
     
 
       <label for="name" id="name_label">Имя</label> <br/> 
 

 
       <input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/> 
 
       
 
      </div> 
 
      
 
      <br/> 
 
      
 
      <div class = "input_group"> 
 

 
       <label for="company" id="company_label">Компания</label> <br/> 
 

 
       <input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" /> 
 
       
 
      </div> 
 
       
 
      <br/> 
 
      
 
      <div class = "input_group"> 
 
       
 
       <label for="phone" id="phone_label">Телефон</label> <br/> 
 

 
       <input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" /> 
 
       
 
      </div> 
 
      
 
      <br/> 
 
       
 
      <div class = "input_group"> 
 
       
 
       <label for="msg_text" id="msg_label">Запрос</label> <br/> 
 

 
       <textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea> 
 
      
 
      </div> 
 
      
 
      <div class = "input_group"> 
 
     
 
       <input type="submit" onclick="myFunction()" id="submit" value="Отправить" /> 
 
       
 
      </div> 
 
      
 
      </fieldset> 
 
     
 
     </form> 
 
     
 
     <h2 style="display:none;" id ="error">Заполните все поля!</h2> 
 
     <h2 style="display:none;" id="success">Message sent!</h2>

Liste item

Quelle

2017-02-09 atogz

sind Sie sicher, dass der „Erfolg“ Funktion Brennen wird? Überprüfen Sie die Registerkarte Konsole und Netzwerk auf Fehler und überprüfen Sie den vom ajax-Aufruf zurückgegebenen HTTP-Statuscode. Wenn es nicht 200 ist, dann wird "Erfolg" nicht ausgeführt - stattdessen sollten Sie auch den "Fehler" -Rückruf behandeln - sehen Sie die Ajax-Dokumentation hier: http://api.jquery.com/jquery.ajax/ – ADyson

Ja, ich habe überprüfte es, ich bekomme 200. Und bekommen E-Mails Posteingang. – atogz

p.s. Sie wissen, anstatt Ihr Datastring manuell zu erstellen (was fehleranfällig sein könnte), können Sie sich die Kopfschmerzen ersparen, indem Sie einfach $ (# contact) eingeben. serialize(); ' – ADyson

Sie nicht den Stil-Attribut als String mit el.style einstellen. Entweder jeden Stil individuell eingestellt (.style.display ,. style.color, ...) oder verwenden

$('#success').css({display: 'block', color: 'green'})

Quelle

2017-02-09 10:00:01 Connum

https://jsfiddle.net/ 1vfvvbda/- works – Developer

Sie haben Recht ... Ich wusste das eigentlich nicht nach fast zwei Jahrzehnten CSS ... – Connum

Ich stimme zu, dass dies kein richtiger Weg ist, es zu tun ... selbst ich war überrascht, das funktioniert zu sehen !!! nicht sicher, ob alle Browser dies unterstützen :) – Developer

ist dies Ihr letzter Code, der für mich

<!DOCTYPE HTML> 
<html> 

<head> 

    <meta charset="utf-8"> 

    <title>AJAX + PHP форма</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

    <style type="text/css"> 

    .input_group { 

     display:inline-block; 
     padding: 5px; 
     width:100%; 
     text-align: center; 

    } 

    form { 

     width: 50%; 

    } 

    #send_message { 
     text-align: center; 
    } 

    </style> 


</head> 

<body> 

    <form id="contact" action=""> 

    <fieldset> 

     <legend>AJAX + PHP форма</legend> 

     <div class = "input_group"> 

      <label for="name" id="name_label">Имя</label> <br/> 

      <input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/> 

     </div> 

     <br/> 

     <div class = "input_group"> 

      <label for="company" id="company_label">Компания</label> <br/> 

      <input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" /> 

     </div> 

     <br/> 

     <div class = "input_group"> 

      <label for="phone" id="phone_label">Телефон</label> <br/> 

      <input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" /> 

     </div> 

     <br/> 

     <div class = "input_group"> 

      <label for="msg_text" id="msg_label">Запрос</label> <br/> 

      <textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea> 

     </div> 

     <div class = "input_group"> 

      <input type="button" onclick="myFunction()" id="submit" value="Отправить" /> 

     </div> 

     </fieldset> 

    </form> 

    <h2 style="display:none;" id ="error">Заполните все поля!</h2> 
    <h2 style="display:none;" id="success">Message sent!</h2> 

<script> 
    function myFunction() { 
     var name = document.getElementById("name").value; 
     var message = document.getElementById("message").value; 
     var company = document.getElementById("company").value; 
     var phone = document.getElementById("phone").value; 

    // Returns successful data submission message when the entered information is stored in database. 
    var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone; 
     if (name == '' || message == '' || company == '' || phone == '') { 
     document.getElementById("error").style="display: block; color: red;"; 
    } else { 

    // AJAX code to submit form. 
     $.ajax({ 
     type: "POST", 
     url: "demo.php", 
     data: dataString, 
     cache: false, 
     success: function(data) { 
      alert(data) 
      $('#success').css({display: 'block', color: 'green'}); 
     } 
     }); 
    } 
    return false; 
    } 
</script>

feine Arbeit, und das ist Demo pHP-Datei

<?php 
print_r($_REQUEST); 
?>

aktualisieren nur Taste Typ Absenden-Button

Quelle

2017-02-09 10:03:22

bist du sicher? -https: //jsfiddle.net/1vfvvbda/ – Developer

Ich habe dieses Problem vor ein paar Jahren konfrontiert, aber ich sah es funktioniert jetzt. so traurig –

Ich stimme dem zu Dies ist kein richtiger Weg, es zu tun..ich war überrascht zu sehen, dass das funktioniert !!! nicht sicher, ob alle Browser dies unterstützen :) – Developer

Ajax Erfolgsfunktion funktioniert nicht richtig

Antwort

Verwandte Themen