jQuery ダイアログで文字を入力して値を取得する方法

2023年2月23日

環境
jquery 3.6.3
jqueryui 1.12.1
Google Chrome 110.0.5481.104（Official Build）（64 ビット）

構文
1.ダイアログの表示
$(“#セレクターID名").dialog({
modal:true //モーダル表示
title:"タイトルの内容"
buttons:{
“確認":function(){処理コード}
}
})
2.テキストボックスの値を取得します
$(“#テキストボックスのID名").val()

使用例
ダイアログを開いて文字を入力すると画面に入力した値が表示されます。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script>
$(document).ready(function(){
      $("#show").click(function() {
            $("#name").dialog({
                  modal:true, //モーダル表示
                  title:"テストダイアログ", //タイトル
                  buttons: { //ボタン
                  "確認": function() {
                        $("#res").text($("#userid").val());
                        $(this).dialog("close");
                        },
                  "キャンセル": function() {
                        $(this).dialog("close"); 
                        }
                  }
            });
      });
});
</script>
</head>
<body>

<div id="name" style="display:none;">
<input type="text" id="userid" size="15" maxlength="15">
</div>
入力した値:<p id="res"></p>
<input type="button" id="show" value="テスト" />
</body>
</html>

実行結果
「テスト」ボタンを押すと、ダイアログが表示されます。
ダイアログ画面に「yamada」と入力し、「確認」ボタンを押します。
要素「res」に「yamada」が表示されます。

jQuery

Posted by arkgame

関連記事: