javacariptでreturn false;でページがリロードされる

前提・実現したいこと

フォームからコメントをPHPにページをリロードさせずに送信する機能をJavaScriptで作っています。

発生している問題・エラーメッセージ

下のようなJSをHTMLのhead部分にlinkで読み込ませています。
Ajaxでの送信後にページがリロードされないよう、return false;としているのですが、送信を２、３回行うと必ず一度はリロードされてしまいます。

該当のソースコード

JavaScript
1$(function(){
2  $('#send').submit(function(){
3    var name = $('#com').val();
4    if (name.length === 0){
5      return false;
6    } else {
7      var post_data = {'com' : var name.val()};
8      $.ajax({
9        type: 'POST',
10        url: 'post.php',
11        data: post_data,
12      });
13      return false;
14    };
15  });
16});

form部分のHTMLです。

HTML
1<form method="post" id="send">
2<input name="com" id="com" type="text" class="text" maxlength="30">
3<input type="submit" class="submit" value="投稿"　>
4</form>

試したこと

onclickを使う
onsubmitを使う

補足情報（FW/ツールのバージョンなど）

Chrome
Windows10 Home 64bit
PHP7.1
Apache2.4

行動規範の内容に同意します

回答3件

フォームとして送信するつもりがまったくないのであれば、<button>をtype=buttonにしておいて、.clickにイベントを仕掛ける、という形のほうがいいのではないかと思います。

投稿2018/03/10 01:16

編集2018/03/10 01:17

maisumakun

総合スコア145183

ベストアンサー

var post_data = {'com' : var name.val()};
は
var post_data = {'com' : name};
ではないでしょうか。

■追記■
次のファイルで動作確認してみましたが正常にPOSTされているようです。
[post.php]

php
1<?php
2#入力内容をファイルに記録
3error_log(date(DATE_ATOM) . ' ' . $_REQUEST['com'] . "\r\n", 3, '/tmp/post.php.log');
4?>ok

[post.html]

html
1<html>
2<head>
3<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
4<script type="text/javascript">
5jQuery(function($) {
6$('#send').submit(function(){
7    var name = $('#com').val();
8    if (name.length === 0){
9      return false;
10    } else {
11      var post_data = {'com' : name};
12      $.ajax({
13        type: 'POST',
14        url: 'post.php',
15        data: post_data,
16      });
17      return false;
18    };
19  });
20});
21</script>
22</head>
23<body>
24<form id="send">
25<input name="com" type="text" id="com" class="text" maxlength="30"/>
26<input type="submit" class="submit" value="投稿"/>
27</form>
28</body>
29</html>

[post.htmlを開いて入力]

[/tmp/post.php.log]

2018-03-10T00:34:28+00:00 aaa

どうしてもだめそうなら以下のコードで試してみてください。
[post.html修正版]

html
1<html>
2<head>
3<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
4<script type="text/javascript">
5jQuery(function($) {
6  $('#send').on('click', function(){
7    var name = $('#com').val();
8    if (name.length > 0){
9      $.post('post.php', {com : name});
10    };
11  });
12});
13</script>
14</head>
15<body>
16<form>
17<input type="text" id="com" class="text" maxlength="30"/>
18<input type="button" id="send" class="submit" value="投稿"/>
19</form>
20</body>
21</html>