web-dev-qa-db-ja.com

フォーム送信後にページがリロードしないようにする方法-JQuery

私は自分のアプリ開発クラスのWebサイトで作業していますが、最も奇妙な問題があります。

少しのJQueryを使用して、フォームデータを「process.php」というphpページに送信してから、DBにアップロードします。奇妙なバグは、フォームの送信時にページがリロードされることであり、JQueryをバックグラウンドで実行する方法がわからないか、私の人生がわかりません。それが、そもそもJQueryを使用するという点です。とにかく、関連するすべてのコードを送信します。他に何か必要な場合はお知らせください。

<script type="text/JavaScript">

$(document).ready(function () {
  $('#button').click(function () {

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});
</script>
<div class= "main col-xs-9 well">
  <h2 style="color: black" class="featurette-heading">Join our mailing list!</h2>
  <form id="main" method = "post" class="form-inline">
    <label for="inlineFormInput">Name</label>
    <input type="text" id="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
    <label for="inlineFormInputGroup">Email</label>
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
      <input type="text" id="email" class="form-control" id="inlineFormInputGroup" placeholder="[email protected]">
    </div>
    <!--Plan to write success message here -->
    <label id="success_message"style="color: darkred"></label>
    <button id ="button" type="submit" value="send" class="btn btn-primary">Submit</button>
  </form>

関連する場合、これは私のphpです。

<?php
  include 'connection.php';

  $Name = $_POST['name'];
  $Email = $_POST['email'];

  //Send Scores from Player 1 to Database 
  $save1   = "INSERT INTO `contact_list` (`name`, `email`) VALUES ('$Name', '$Email')";

  $success = $mysqli->query($save1);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);

    echo "unsuccessfully";
  }

  echo "successfully";
?>

これはログのスクリーンショットです：

screenshot of log

javascriptphpjqueryhtmlforms
10
Casey.PhillipsTMC

<button>要素をフォームに配置すると、特に指定がない限り、フォームが自動的に送信されます。次の2つの戦略を使用できます。

  1. <button type="button">を使用して、デフォルトの送信動作をオーバーライドします
  2. OnSubmitイベントでevent.preventDefault()を使用して、フォームの送信を防止します

解決策1：

  • 利点：マークアップの簡単な変更
  • 欠点：特にJSが無効な場合、デフォルトのフォームの動作を覆します。ユーザーが「Enter」を押して送信したい場合はどうなりますか？

追加のtype属性をボタンマークアップに挿入します。

<button id="button" type="button" value="send" class="btn btn-primary">Submit</button>

解決策2：

  • 利点：JSが無効になっている場合でもフォームは機能し、少なくとも1つのボタンが送信に使用されるように標準フォームUI/UXを尊重します

ボタンがクリックされたときにデフォルトのフォーム送信を禁止します。これは理想的なソリューションではないことに注意してください。実際には、ボタンクリックイベントではなく、送信イベントをリッスンする必要があるためです。

$(document).ready(function () {
  // Listen to click event on the submit button
  $('#button').click(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

より良いバリアント：

この改善では、<form>要素から発行された送信イベントをリッスンします。

$(document).ready(function () {
  // Listen to submit event on the <form> itself!
  $('#main').submit(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

さらに良い変形： .serialize() を使用してフォームをシリアル化しますが、入力にname属性を追加することを忘れないでください：

jQueryのドキュメント に従って、name属性は.serialize()が機能するために必要です。

フォーム要素の値をシリアル化された文字列に含めるには、要素に名前属性が必要です。

<input type="text" id="name" name="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
<input type="text" id="email" name="email" class="form-control" id="inlineFormInputGroup" placeholder="[email protected]">

そして、あなたのJSで：

$(document).ready(function () {
  // Listen to submit event on the <form> itself!
  $('#main').submit(function (e) {

    // Prevent form submission which refreshes page
    e.preventDefault();

    // Serialize data
    var formData = $(this).serialize();

    // Make AJAX request
    $.post("process.php", formData).complete(function() {
      console.log("Success");
    });
  });
});
49
Terry