HTMLフォーム送信アクション

Question

私はhtmlで連絡先フォームを設定しましたが、ユーザーがメッセージを送信するたびにページがリロードされます。私はこれがajaxを使って修正できるいくつかの例を見てきましたが、私はそれについてどうやって行くのか分かりません。これは、一緒にその背後にあるPHPコードで、私のフォームです：

<form id="email-form" action="index.html" method="post" role="form" target="_blank"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <label for="name">Name</label> 
     <input type="text" class="form-input" name="name" id="name" value="" placeholder="Enter your name"> 
    </div> 
    <div class="col-md-6"> 
     <label for="email">Email</label> 
     <input type="email" class="form-input" name="email" id="email" value="" placeholder="Enter your email"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <label for="message">Message</label> 
     <textarea rows="6" id="message" name="message" class="form-input" placeholder="Talk to us about maths!"></textarea> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <button class="main-button" type="submit" id="submit">Send Message</button> 
    </div> 
    </div> 
</form> 

<?php 

$name = $_POST['name']; 
$email = $_POST['email']; 
$message = $_POST['message']; 
$from = 'Maths website'; 
$to = 'my@email.com'; 
$subject = 'Maths Message'; 

$body = "From: $name\n E-Mail: $email\n Message:\n $message"; 

if ($_POST['submit']) { 

    if ($name != '' && $email != '') { 
    if (mail ($to, $subject, $body, $from)) { 
     echo '<p>Your message has been sent!</p>'; 
    } else { 
     echo '<p>Something went wrong, go back and try again!</p>'; 
    } 
    } else { 
    echo '<p>You need to fill in all the fields!</p>'; 
    } 

} 

も ​​- formタグがaction="index.html"を持っていることに注意してください。これはまだ動作しますか？私は.htaccessファイルにAddType application/x-httpd-php .html .htmという行を追加しましたが、これがアクションkewordで動作するかどうかはわかりません。あなたに必要な変更を加えたコードの下

Answer 1

使用：

<form action="index.php" method="post"id="formid" > 
<input id="name" type="text" name="name" required><br><br> 
<input id="password" type="password" name="password" required><br> 
<input type="submit" id="submit" name="submit"> 
</form> 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#submit").click(function() { 
       var name= $("#name").val(); 
       var password= $("#password").val(); 

       $.ajax({ 
        type: "POST", 
        url: "insert.php", 
        data: "name=" + name+ "&password=" + password, 
        success: function(data) { 
         alert("sucess"); 
        } 
       }); 


      }); 
    }); 
</script> 



<?php //insert.php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "ajax"; 


    // Create connection 
    $conn = new mysqli($servername, $username, $password,$dbname); 

// Check connection 
    if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
    } 

    $name=$_POST['name']; 
    $pass=$_POST['password']; 
    $sql=mysqli_query($conn, "INSERT INTO insert_tbl(name,pass)  VALUES('".$name."','".$pass."')")  

    ?>