1. ホーム
  2. php

ページ更新なしでPHPにフォームデータを渡すAJAXによるフォーム送信 [重複] [重複

2023-10-26 22:30:31

質問

なぜこのコードが動作しないのか、どなたか教えていただけませんか?

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {
        $('form').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="button" value="Submit">
    </form>
  </body>
</html>

送信を押しても何も起こりません。受信側のphpファイルでは、$_POST['time']と$_POST['date']を使ってmysqlクエリにデータを入れていますが、データを取得できていないだけです。何か提案はありますか?私はそれが送信ボタンに関係する何かだと仮定しているが、私はそれを理解することはできません。

どのように解決するのですか?

ajaxリクエストの後、フォームが送信されます。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
  </body>
</html>