페이지를 다시로드하지 않고 양식 제출

-6

제대로 작동하는 양식이 있지만 제출 후 페이지를 다시로드합니다. 페이지를 다시로드하는 대신 양식 아래에 메시지를 표시하고 싶습니다. 여기 페이지를 다시로드하지 않고 양식 제출

내 html 코드입니다 :

<form class=" form-horizontal" action="php/contact.php" method="post" id="contact_form" name="contact-form"> 
     <fieldset> 

     <div class="form-group"> 

       <input name="firstname" placeholder="First Name" class="form-control" type="text"> 
       <input name="lastname" placeholder="Last Name" id="lastname" class="form-control" type="text"> 
       <input name="email" placeholder="E-Mail Address" class="form-control" type="text"> 
       <input type="text" name="mail"> <!-- anti spam - needs to stay non-filled - hidden by css --> 
       <input name="phone" placeholder="(+44) 020 1234 5678" class="form-control" type="text"> 
       <input name="company" placeholder="Company name" class="form-control" type="text"> 
       <input name="website" placeholder="Website or domain name" class="form-control" type="text"> 
       <textarea class="form-control" name="message" placeholder="Your message"></textarea> 

      <!-- Success message --> 
      <div class="alert alert-success" role="alert" id="success_message"> 
       Thanks for contacting us, we will get back to you shortly.</div> 
      <button type="submit" class="btn btn-block btn-primary">Send <span class="fa fa-fw fa-lg fa-send"></span> </button> 

     </div> 
     </fieldset> 
    </form>

나는 또한 JQuery와 유효성 검사 스크립트를 사용

이이 스크립트에 대한 빠른 요약 한 것입니다 (나는 변화의 대부분이 여기에 수행해야 생각) :

$(function() { 
     $("form[name='contact-form']").validate({ 

     rules: { 

      firstname: "required", 
      message: "required", 
      email: { 
      required: true, 

      email: true 
      }, 

     }, 

     messages: { 
      firstname: " Please enter your firstname", 
      email: " Please enter a valid email address", 
      message: " Please type your message"   
     }, 

     submitHandler: function(form) { 
      form.submit(); 
     } 
     }); 
    });

그리고이 제출 한 후 페이지를 다시로드하는 PHP 코드입니다 :

<?php 

     $adresdo = "[email protected]"; 
     $temat = "Message from tucado.com"; 
     $zawartosc = "First Name: ".$_POST['firstname']."\n" 
        ."Last Name: ".$_POST['lastname']."\n" 
        ."Company: ".$_POST['company']."\n" 
        ."Email: ".$_POST['email']."\n" 
        ."Telephone: ".$_POST['phone']."\n" 
        ."Website: ".$_POST['website']."\n"  
        ."Message: ".$_POST['message']."\n"; 

     if(!$_POST['firstname'] || !$_POST['email'] || !$_POST['message']){ 
     header("Location: ../contact.html"); 
     exit; 
     } 
     $email = $_POST['email']; 
     if(mail($adresdo, $temat, $zawartosc, 'From: Contact <'.$email.'>')){ 
     header("Location: ../msg-sent.html"); 
     } 
    ?>

당신이 할 수주십시오 메시지를 보낼 때이 코드를 수정하여 (id = "success_message") 메시지를 표시하도록 도와주십시오. 도와 줘서 고마워.

출처

2017-10-23 Piotr Ciszewski

StackOverflow는 맞춤 응답을 작성하는 것이 아니라 특정 질문으로 도와줍니다. :-) 그러므로 이것이 내가 질문이 여기에 속하지 않는다고 생각하는 이유입니다. –

주로 주로 일반적인 문제이며이 사이트는 사용자에게 맞춤 솔루션을 제공하기위한 목적으로 구축되지 않았기 때문에 주로 발생합니다. 코드 검토 교환에서 다음을 시도 할 수 있습니다. https://codereview.stackexchange.com/ :-) 행운을 비네! –

아약스 제출을 시도하십시오. 제출 처리기 안에 ajax 코드를 넣고 serialise 나 formdata를 사용하여 전체 양식을 가져옵니다. 예를 들어보십시오. 데이터를 retreive하도록

submitHandler: function(form) { 
    $.ajax({ 
     url: "name_of_file.php", 
     type: "POST",    
     data: new FormData($(form)), 
     cache: false,    

     success: function(data) { 

      $("#success_message").html(data); 
     } 
    }); 
    return false; 
},

은 PHP 파일의 출력을 원하는 에코.

출처

2017-10-23 14:56:42

@ BlessonChristy에게 감사드립니다. 나는 현재 submitHandled를 당신이 provied 한 것으로 대체했다. 불행히도 그것은 나를 위해 작동하지 않습니다. 나는 내가 뭔가 잘못했다고 생각합니다. 귀하의 지시에 따라 수정 한 내용은 다음과 같습니다 - 잘못된 것이 있습니까? https://jsfiddle.net/tucado/7gqut0qu/ –

페이지를 다시로드하지 않고 양식 제출

답변

관련 문제