JavaScript + jQuery のスニペット - フォーム

投稿日 2015/05/31

[Home] [Index] 

ボタンをクリックしたとき

input type="button" をクリックしたときのイベントハンドラの例を下に示す。

$(document).ready(function() {
  $("#button1").click(function(event) {
    if ($("#text1").val() == "") {
      alert("テキストボックスが空欄です。");
      event.preventDefault();  // ボタンクリック動作をキャンセル
      return;
    }
  $("#form1").submit();
});

submit をクリックしたとき

input type="submit" をクリックしたときのイベントハンドラの例を下に示す。

$(document).ready(function() {
    $("#form2").submit(function(event) {
      if ($("#text2").val() == "") {
        alert("テキストボックスが空欄です。");
        event.preventDefault();  // ボタンクリック動作をキャンセル
        return;
      }
      $("#form2").submit();
    });
});

Select で項目が変化したとき

$(document).ready(function() {
  $("#select5").change(function() {
    s = $("#select5").val();
    $("#form5_result").text(s);
  });
});

コントロールを有効・無効にするには

$(document).ready(function() {
  $("#attr_button1").click(function() {
    var sts = $("#attr_text1").prop("disabled");
    $("#attr_text1").prop("disabled", !sts);
    $("#attr_check1").prop("disabled", !sts);
  });
});

チェックボックスのチェック状態を得るには

$(document).ready(function() {
  $("#form3").submit(function(event) {
    event.preventDefault();  // ボタンクリック動作をキャンセル
    s = "";
    if ($("#check1").prop("checked"))
       s = $("#check1").val();
    if ($("#check2").prop("checked")) {
       s += " ";
       s += $("#check2").val();
    }
     $("#form3_result").text(s);
  });
});

ラジオボタンのチェック状態を得るには

$(document).ready(function() {
  $("#form4").submit(function(event) {
    event.preventDefault();  // ボタンクリック動作をキャンセル
    s = $("input[name='radiogroup']:checked").val();
    $("#form4_result").text(s);
  });
});

テキストエリアの内容を取得するには

$(document).ready(function() {
  $("#button6").click(function() {
    s = $("#textarea6").text();
    $("#form6_result").text(s);
  });
});

 

 


 このページの先頭

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: こちらからメッセージを送ってください。 (お仕事も大募集)

 このページの先頭へ..