フォームの提出後にページに滞在する方法

Question

私は特定の問題の答えを試してみるために何日も探しましたが、できません。助けてください。

私のウェブサイトには、一度クリックすると、電子メールを送信するフォームがあります。同じページにとどまり、フォームから画像にdivを変更しながら、これを実行したいと思います。

これは私がインターネットから掃除したコードです。

ほとんどのバーニースタイルで可能な場合は、アドバイスをお願いします。
お手数をおかけしますようお願い申し上げます。

jQuery(document).ready(function(){ 
 

 
    jQuery('.contact').submit(function() { 
 

 
$.ajax({ 
 
     type: "POST", 
 
     url: "contact-form-handler.php", 
 
     data: dataString, 
 
     success: function() { 
 
     $('#contact_form').html("<div id='message'></div>"); 
 
     $('#message').html("<img src='thankyou.jpg' style='width:100%'/>") 
 
     .append("<p>We will be in touch soon.</p>") 
 
     .hide(); 
 
     }); 
 
     } 
 
    }); 
 
     return false; 
 

 
});

<form method="post" action="" name="contact" id="contact" class="w3-container w3-light-grey w3-margin"> 
 

 
    <div class="w3-row w3-section"> 
 
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div> 
 
    <div class="w3-rest"> 
 
     <input class="w3-input w3-border" required name="name" id="name" type="text" placeholder="Name"> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="w3-row w3-section"> 
 
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div> 
 
    <div class="w3-rest"> 
 
     <input class="w3-input w3-border" required name="email" id="email" type="text" placeholder="Email"> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="w3-row w3-section"> 
 
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div> 
 
    <div class="w3-rest"> 
 
     <input id="message" class="w3-input w3-border" required name="message" type="text" placeholder="Message"> 
 

 
    </div> 
 
    </div> 
 

 
    <p class="w3-center"> 
 
    <input type="submit" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" /> 
 
    </p> 
 

 

 
</form>

`

<?php 
 
$errors = ''; 
 
$myemail = 'jerry@sitesbyjc.com';//<-----Put Your email address here. 
 
if(empty($_POST['name']) || 
 
    empty($_POST['email']) || 
 
    empty($_POST['message'])) 
 
{ 
 
    $errors .= "\n Error: all fields are required"; 
 
} 
 

 
$name = $_POST['name']; 
 
$email_address = $_POST['email']; 
 
$message = $_POST['message']; 
 

 
if (!preg_match(
 
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
 
$email_address)) 
 
{ 
 
    $errors .= "\n Error: Invalid email address"; 
 
} 
 

 
if(empty($errors)) 
 
{ 
 
\t $to = $myemail; 
 
\t $email_subject = "Contact form submission: $name"; 
 
\t $email_body = "You have received a new message. ". 
 
\t " Here are the details:\n Name: $name \n Email: $email_address \n Message: \n $message"; 
 
\t 
 
\t $headers = "From: $myemail\n"; 
 
\t $headers .= "Reply-To: $email_address"; 
 
\t 
 
\t mail($to,$email_subject,$email_body,$headers); 
 
    
 
    
 
} 
 
?>

Answer 1

私はあなたの質問を理解していれば、あなたは（あなたはAJAXを呼び出す際に提出を防ぐためにpreventDefault()を使用する必要がありますデフォルトで）、次のようなことができます：

jQuery(document).ready(function(){ 
    jQuery('.contact').submit(function($e) { 

     $e.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "contact-form-handler.php", 
      data: dataString, 
      success: function() { 
       $('#contact_form').html("<div id='message'></div>"); 
       $('#message').html("<img src='thankyou.jpg' style='width:100%'/>") 
       .append("<p>We will be in touch soon.</p>") 
       .hide(); 
      }); 
     } 
    }); 
    return false; 

}); 

はpreventDefault()の詳細情報、およびMDNにも程度defaultPrevented。

Answer 2

イベントハンドラを送信ボタンにアタッチし、送信ボタンを単純なボタンに変更すると、クリックしたときにフォームを送信しないようにすることができます。 <form>が提出上のURLにユーザーをリダイレクトするために、デフォルトの動作として、それを持っている

jQuery('#submit_btn').submit(function() { 

}; 

Answer 3

：イベント処理コードに変更することができます

<input type="button" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" /> 

：ボタンのコードに変更することができます。 action属性から取得したURL。

このリダイレクトを防止するには、ブラウザに「リダイレクトしないでください」と指示する必要があります。

ショート：ロングe.preventDefault()

：提出コールバックでは、あなたの関数は、パラメータを取ります。単にeのように名前を付けます。これはオブジェクトであり、関数はpreventDefaultです。この関数は、デフォルトの動作、リダイレクトを防止します。このコールは、コールバック関数の最初の行で行います。