LoginSignup
6

More than 5 years have passed since last update.

【HTML】input type = "submit" と "button" の違いって・・・?

Posted at

検索条件を入力し、<form>の中の<input>で発火するjQueryでのDOM操作(append)を書いていて、ちょっと嵌ったので書いておく。
後でちゃんと分かったらもう少し追記したい。

<tbody>部分に<td>要素をappendしていきたかった。
1. うまくappendされなかったコード

sample.html
<form>
 <input type="text" id="name">
 <input type="submit" id="btn" value="search">
</form>

<table>
 <thead>
  <th>term A</th>
  <th>term B</th>
 </thead>
<!-- ここにappendされる -->
 <tbody id="results"></tbody>
</table>
sample.js
//searchボタン押下で発火
$(document).ready(function(){
    $('#btn').on('click',function(e){
        ajax();
    });
});

//DBからのデータ取得のためPHPへ
function ajax(){
  var search_val=$('#name').val();
  $.post('./search.php', {search_term : search_val}, function(data){
  append(data);
 },'json');
}

//json形式のデータをfor文で回してtbodyにappend
function append(data){
  var record = '';
  for(var i=0; i<data.length; i++){
    record += '<tr><td>'+ data[i].term_a +'</td><td>'+ data[i].term_b +'</td></tr>';
  }
  $('#results').append(tweets);
}

ブラウザでの挙動を見ていると、appendされてから消えているような・・・。
早すぎて見えない・・・。

2.appendされたコード
sample.htmlは同じ。
結論だけ言うと、submitのデフォルトアクションをキャンセルする
preventDefault()を追記したら回避できた・・・。

sample.js
//searchボタン押下で発火
$(document).ready(function(){
    $('#btn').on('click',function(e){
//submitのデフォルトアクションをキャンセル
        e.preventDefault();
        ajax();
    });
});

//DBからのデータ取得のためPHPへ
function ajax(){
  var search_val=$('#name').val();
  $.post('./search.php', {search_term : search_val}, function(data){
  append(data);
 },'json');
}

//json形式のデータをfor文で回してtbodyにappend
function append(data){
  var record = '';
  for(var i=0; i<data.length; i++){
    record += '<tr><td>'+ data[i].term_a +'</td><td>'+ data[i].term_b +'</td></tr>';
  }
  $('#results').append(tweets);
}

以前も同じようなコードを書いて嵌らなかったのは、
<input type="button">でHTMLを記述していたからっぽく、HTML側をそう修正してもうまくいった。

submitとbuttonの違いって・・・?
送信機能がもともと実装されているか否かだけじゃないのか・・・?
なんか押下時のスクリプトの実行のタイミングが違ったりして、そのせいかなー?とか推測していますが、調べてもよく分からん。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6