Функция успеха Ajax не работает должным образом

Я создал простую форму ajax/php, и моя функция успеха не работает должным образом по какой-либо причине. Я все еще получаю электронные письма, поэтому я предполагаю, что это условие верно, но оно не появляется, а кнопка отправки не блокируется. Вот мой код:Функция успеха Ajax не работает должным образом

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>

пункт Список

источник

2017-02-09 atogz

вы уверены, что функция «успех» стреляет? Проверьте наличие ошибок в консоли и сети и проверьте код состояния HTTP, возвращаемый вызовом ajax. Если это не 200, тогда «успех» не будет работать - вместо этого вы должны обработать обратный вызов «ошибка», а также - см. Здесь документы ajax: http://api.jquery.com/jquery.ajax/ – ADyson

Да, я проверил его, получая 200. И получая почтовые ящики также. – atogz

p.s. вы знаете, вместо того, чтобы вручную создавать данные (которые могут быть подвержены ошибкам), вы можете сэкономить головную боль, просто сделав '$ (« # contact »). serialize();' – ADyson

Вы не можете установить атрибут стиля в виде строки el.style. Либо установить каждый тип по отдельности (.style.display ,. style.color, ...) или использовать

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

источник

2017-02-09 10:00:01 Connum

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

Вы правы ... Я на самом деле не знал, что после почти двух десятилетий CSS ... – Connum

Я согласен, что это неправильный способ сделать это. Даже я был удивлен, увидев, что это работает !!! не уверен, будут ли поддерживаться все браузеры :) – Developer

это ваш окончательный код, который работает отлично для меня

<!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>

и это демо PHP файл

<?php 
print_r($_REQUEST); 
?>

просто обновить тип кнопки представить кнопку

источник

2017-02-09 10:03:22

вы уверены? -https: //jsfiddle.net/1vfvvbda/ – Developer

Я столкнулся с этой проблемой несколько лет назад, но я видел, что она работает сейчас. извините –

Я согласен с тем, что это не правильный способ сделать это. Я был удивлен, увидев, что это работает !!! Не уверен, будут ли поддерживаться все браузеры :) – Developer

Функция успеха Ajax не работает должным образом

ответ

Смежные вопросы