用途
新着
履歴
分類

jQuery フォームの値を取得

jQuery フォームの値を取得
jQuery フォームの値を取得
jQueryでフォームの入力値を取得するサンプルです。

以下のフォームに文字を入力するしてボタンを押すと値をまとめても文字列にします。


data1
data2
data3
値を出力
出力結果

HTMLはこちら

<form id="demo_form">
    <div>
        data1
        <input type="text" name="data1" size="40" value="" >
    </div>
    <div>
        data2
        <input type="text" name="data2" size="40" value="" >
    </div>
    <div>
        data3
        <input type="text" name="data3" size="40" value="" >
    </div>
</form>

ボタンをおされたタイミングで実行されるJSはこちら。

$(document).ready(function(){
    function show_results() {
        var str = $("#demo_form").serialize();
        $("#demo_results").text(str);
    }
    $(document).on('click', '#demo_insert_btn', function() {
        show_results();
    });
});

ちなみに今回上記では実装してませんが、ajaxでデータを送る場合のサンプルコードはこちら。

$.ajax({
   type: "POST",
   url: "同じドメインのパスを書く",
   data: str,   //data1=a&data2=b&data3=cがここに入ります
   success: function(msg){
     alert( msg); // 完了メッセージを表示する場合。
   }
 });

公開 2020-04-12 15:17:23
更新 2020-04-12 18:04:46
このページの二次元コード

関連するリンク

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2020 kipure
Top