Php Form Submit без Refresh - Ajax не работает

Question

Я пытаюсь получить получить свою форму, чтобы представить без страницы освежающих каждый раза

Однако, когда я вставляю Аякс и поместить PHP в новый файл форма оленьей кожи submit, и я не понимаю, почему?

Любые советы были бы полезны!

PHP

<?php 
if(isset($_POST['name'], $_POST['email'], $_POST['phone'], $_POST['message'])){ 
    //Post data 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $phone = $_POST['phone']; 
    $message = $_POST['message']; 
    //mail settings 
    $to = "arshdsoni@gmail.com"; 
    $subject = 'Soni Repairs - Support Request'; 
    $body = <<<EMAIL 

Hi There! 

My name is $name. 

Message: $message. 

My email is: $email 
Phone Number: $phone 

Kind Regards 
EMAIL; 

    $header = "From: $email"; 

    if($_POST) { 
     if($name == '' || $email == '' || $phone == '' || $message == '') { 
      echo $feedback = "<font color='red'> *Please Fill in All Fields!"; 
     } 
     else { 
      mail($to, $subject, $body, $header); 
      echo $feedback = "<font color='green'> *Message sent! You will receive a reply shortly!"; 
     } 
    } 

} 

else{ 
    echo $feedback = "<font color='red'> Missing Params"; 
} 

?> 

AJAX

<script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script> 
      $(document).ready(function(){ 

       $("#submitBtn").click(function(event) { 
        //values 
        var name=document.getElementById('name').value; 
        var email=document.getElementById('email').value; 
        var phone=document.getElementById('phone').value; 
        var message=document.getElementById('message').value; 
        var occasion=document.getElementById('occasion').value; 
        var dataString = $("#contact").serialize(); 

        $.ajax({ 
         type:"post", 
         url:"php.php", 
         data: dataString, 
         success: function(html) { 
          $('#feedback').html(html); 
         } 
        }); 
        event.preventDefault(); 
       }); 
      }); 
     </script> 

HTML код здесь: http://www.codeply.com/go/e3jAo1WrPl

Answer 1

Функция .bind() может быть путь, чтобы пойти с этой формой , поскольку он связывает действие щелчка t его кнопка для обработчика события.

Также может быть полезно иметь событие event.preventDefault() перед вызовом ajax.

  $(document).ready(function(){ 
      $("#submitBtn").bind([boundElement],function(event) { 
       event.preventDefault(); 
       var name=document.getElementById('name').value; 
       var email=document.getElementById('email').value; 
       var phone=document.getElementById('phone').value; 
       var message=document.getElementById('message').value; 
       var occasion=document.getElementById('occasion').value; 
       var dataString = $("#contact").serialize(); 

       $.ajax({ 
        type:"post", 
        url:"php.php", 
        data: dataString, 
        success: function(html) { 
         $('#feedback').html(html); 
        } 
       }); 
      return true; 
      }); 
     }); 

Я бы рекомендовал дважды проверить синтаксис связанного элемента в параметрах .bind(). Это одиночные кавычки для обращения к именованному элементу формы Пример HTML:

Answer 2

Вот предложение с помощью кнопки вместо отправки. Я прокомментировал preventDefault, потому что в этом случае нет необходимости - мы фактически не отправляем форму. Это дает нам больший контроль.

Запрос отправлен. В этом случае он, очевидно, терпит неудачу. В вашем случае, независимо от того, сбой или нет, будет зависеть от того, что вы делаете на стороне сервера.

http://plnkr.co/edit/txuxaFUkgFq9SFDcqUdp

<form action="http://www.yahoo.com" id="contactForm" method="get" target="_blank"> 
    <div class="innerForm"> 
     <label for="name">Name:</label> 
     <input id="name" name="name" type="text" /> 
     <label for="phone">Phone:</label> 
     <input id="phone" name="phone" type="text" /> 
     <label for="email">Email:</label> 
     <input id="email" name="email" type="text" /> 
     <label for="occasion">Occasion:</label> 
     <input id="occasion" type="text" name="occasion" /> 
     <label id="messageLabel" for="message">Message:</label> 
     <textarea id="message" name="message"></textarea> 
     <button id="test">test</button> 
     <!--input type="submit" value="Submit" id="submitBtn" name="submit" onclick="return chk();"/ --> 
    </div> 
    <div id="feedback"></div> 
</form> 

$(document).ready(function(){ 
    $("#test").click(function (event) { 
     //values 
     alert("test clicked"); 
     var name = document.getElementById('name').value; 
     var email = document.getElementById('email').value; 
     var phone = document.getElementById('phone').value; 
     var message = document.getElementById('message').value; 
     var occasion = document.getElementById('occasion').value; 
     var dataString = $("#contactForm").serialize(); 

     $.ajax({ 
      type: "get", 
      url: "http://www.yahoo.com", 
      data: dataString, 
      success: function (html) { 
       alert("success"); 
       //$('#feedback').html(html); 
      }, 
      error: function(result){ 
       alert("failure"); 
      } 
     }); 
     //event.preventDefault(); 
    }); 
}); 

Answer 3

Это может помочь вам с вашей проблемой:

$(document).ready(function() { 
    $("#contact").submit(function(event) { 
     event.preventDefault(); 

     var name  = $('#name').val(), 
      email  = $('#email').val(), 
      phone  = $('#phone').val(), 
      message = $('#message').val(), 
      occasion = $('#occasion').val(), 
      dataString = $(this).serialize(); 

     $.ajax({ 
      url: 'php.php', 
      type: 'post', 
      data: dataString, 
     }) 
     .done(function(html) { 
      $('#feedback').html(html); 
     }) 
     .fail(function(response) { 
      console.log(response); 
     }); 

    }); 
}); 

Фирса всех, у вас есть формы и кнопку отправки, поэтому при нажатии на кнопку, событие ' submit 'запускается, поэтому вы запрещаете запуск события, тогда вы делаете свое кодирование, переменные, но я не могу понять, почему вы объявляете все это, если вы их не используете, но это зависит от вас.