Ajaxでタグ要素の特定の属性に値を受け取る方法

このQ&Aのポイント
  • Ajaxを使用して、指定したタグ要素の特定の属性に値を受け取る方法について教えてください。
  • 具体的には、JSPファイルとアクションクラスの記述例を使用して、<input>タグのvalue属性やname属性に出力値を受け取る方法を知りたいです。
  • また、同時に複数の属性に出力値を受け取る方法も教えていただけると助かります。
回答を見る
  • ベストアンサー

Ajaxに関する質問です。

Ajaxに関する質問です。 SAStruts + JSP + jQueryで勉強しています。 JSPファイル、及びそれに対応するアクションクラスに対して下記の様に記述する事で、 ボタン押下によりajaxが実行され、指定したタグ要素のボディ部に出力値を受け取る事を確認しました。 ●index.jsp <span id="output">ボディ部</span> <input type="button" value="press me!" onclick="$('#output').load('output');"/> ●indexAction.java @Execute(validator = false) public String output() { ResponseUtil.write("出力値"); return null; } 今回、指定したタグ要素の特定の属性に値を受け取る方法を知りたいです。 具体的には上記の実装ですと、 実行前:<span id="output"></span> 実行後:<span id="output">出力値</span> の様になると思うのですが(イメージ)、 これを<span>では無く、<input>を使い、 inputタグのvalue属性に出力値を受け取り、 実行前:<input type="text" id="output" value=""/> 実行後:<input type="text" id="output" value="出力値"/> としたり、name属性に出力値を受け取り、 実行前:<input type="text" id="output" name="default"/> 実行後:<input type="text" id="output" name="出力値"/> としたり、同時に複数の属性に出力値を受け取り、 実行前:<input type="text" id="output" name="default" class="default"/> 実行後:<input type="text" id="output" name="出力値" class="出力値"/> としたりといった様な事を実現する為の実装方法があれば、例示していただけると助かります。 宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

間違えた。$(this)はボタンだった。 <input type="button" value="press me!" onclick="$('#output').load('output',function(responseText){ $("#output").attr('id',responseText); $("#output").attr('name',responseText); $("#output").attr('class',responseText); });"/> だな。コールバック関数無視されたりして... jspにインクルードするjQueryはVer1.4以上にして試して

metorontbl
質問者

お礼

ありがとうございます! やりたかった事ができました!

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

jspで、 <script src="${f:url('/js/jquery.js')}"></script> ... <input type="button" value="press me!" onclick="$('#output').load('output',{'dumy':'いるかな'}, function(responseText){ $(this).attr('id',responseText); $(this).attr('name',responseText); $(this).attr('class',responseText); });"/> とか、出来なかったらごめんね。 ※JAVASCRIPTじゃなくJAVAのカテゴリーで質問した方がよいかも

関連するQ&A

  • ラベルのマークアップ

    <input name="price_min" type="text" value="" id="price_min" />~ <input name="price_max" type="text" value="" id="price_max" />円 このようなフォーム要素があるとき、 どのようにラベル付けをするのが妥当なのでしょうか? <label> 価格:<br> <input name="price_min" type="text" value="" id="price_min" />~ <input name="price_max" type="text" value="" id="price_max" />円 </label> このように、ひとつの<label>に対して二つのコントロールを含めることはできるのでしょうか? 現在は<span>価格</span> のように<span>タグで代用しています。 ぜひアドバイスをお願いします。

    • ベストアンサー
    • HTML
  • HTMLタグ内に記入する変数の記入方法について

    こんにちは。いつもお世話になります。 例えば、$axis という変数があるとします。 これを、下記のようなPHP内のHTMLタグに記入する際、 タグとタグの間に入れる際の正式な書き方は、 <span>" . $axix . "</span> と、どこかで見た記憶があり、そのように書いているのですが、 多分、サーバー環境にも関係しているかも知れませんが、 <span>$axix </span> でも、 <span>{$axix}</span> でも取りあえず動作してます。 また、下記のようなタグ内に入れる場合でも、 <input type='text' name='axis' size='5' value='$axis'> <input type='text' name='axis' size='5' value='{$axis}'> <input type='text' name='axis' size='5' value='" . $axis . "'> でも動作しております。 なにが正式の書き方でしょうか。教えて下さい。 個人的には、タグとタグの間は、<span>" . $axis . "</span>。 タグ内では、'{$axis}'と{}で括る書き方が好きなんですが。 また、 value=\"$axis\" value=\"$pref\" value=\"$name\" value=\"$tel\" .. と言ったものを、正規表現可能エディタで、一括して value='{$axis}' value='{$pref}' value='{$name}' value='{$tel}' .. に置換する正規表現はないでしょうか。 教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • inputタグのtype値がfileの場合にデフォルト値を表示させたい

    フォームの中にデフォルト値を入れたい場合は、例えば  <input type="text" name="id" id="id" value="A25" /> のように、inputタグの中のvalue値を指定すれば良いわけですが、type値がfileの場合、  <input type="file" name="photo" id="photo" value="flower.jpg" /> のようにしても、フォームは空白のままです。 どうにかして、この場合でもデフォルト値が表示するように出来ないものでしょうか?

    • ベストアンサー
    • HTML
  • JSPファイルに書いたの各タグ情報を拾うには?

    JSPファイルの中に書いたHTMLやカスタムタグの情報を拾って テキストファイルに書き込みたいと思っています。 実際にやりたいことは、<INPUT>タグや、カスタムタグ<hoge>に付与した、 name属性の値を列挙したいという様な内容です。 例)JSPファイルに以下の様な入力項目を記述   <INPUT type="text" name="hoge1" value="10">   <INPUT type="text" name="hoge2" value="10">    :     ↓   テキストファイルに   hoge1   hoge2    : テキストファイルに書き出すという部分は分かりますが、JSPファイルから 各タグを判別し、その中のname属性の値を取得する・・・という部分が どうやってやろうかと困っています。 XMLのパーサを利用して・・・と考えたりもしましたが、HTMLの各タグは エンドタグが決まって記述されている訳ではないため、利用出来ないかも? と思っています。 何か良いものがあればと思っていますが、見つけられず、通常にファイルを オープンして入力項目タグがあるかどうか、ひとつずつ調べるという方法しか 思い付いていません。 もし何か良い方法があれば是非教えて下さい。

    • ベストアンサー
    • Java
  • PHPのフォームとAjaxを組み合わせたいのですが

    簡潔にコードを書かせて頂きますが、PHPとjQueryによるAjaxを連携させたいと考えています。 まずform.phpのフォームをsubmitし、その内容をpost.phpへ送り、リダイレクトにてres.phpへ送るという、PHPの基本的な動きをさせますが、 その結果はres.phpという新しいページではなく、Ajaxにてform.phpの<div id="text1">部に元々書かれている<form>ではなく、res.phpの出力内容を出力したいと考えております。 この場合、どのようにjQueryコードを記述すればいいのでしょうか? 色々考えて試してみたのですが、上手くいきませんでした。 自分はform.php、post.php、res.phpという3つのファイルを用意していますが、もしかしたらori.phpという出力用のファイルを用意し、その<div>空間内にform.phpのフォームやres.phpの結果をAjaxによって出力するのかなとも思いましたが、良く分かりませんでした。 アドバイス頂けないでしょうか? 宜しくお願い致しします。 (( form.php )) <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text1"> <h2>その1</h2> <form action="post.php" method="POST" id="form" name="form" > <input type="checkbox" id="news" name="news" value="news" /> ニュース <br /> <input type="submit" name="submit" value="submit" /> <input type="reset" name="reset" value="reset" /> </form> </div> </body> </html> (( post.php )) <?php session_start(); session_regenerate_id(TRUE); $_SESSION["news"] = "news 表示"; $host = $_SERVER['HTTP_HOST']; $uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); $extra = 'res.php'; header("Location: http://$host$uri/$extra"); (( res.php )) <?php session_start(); session_regenerate_id(TRUE); ?> <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text2"> <h2>その2</h2> <?php $_SESSION["news"]; ?> </div> </body> </html> <?php session_destroy(); $_SESSION = ''; ?>

    • ベストアンサー
    • PHP
  • ボタンを押してテキストボックスを追加しテーブルの作成

    avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>

  • IEでAjax

    現在、以下のソースをもとにAjaxのテストをしているのですが FireFoxだと正常に動作されますが、IE8だと無反応です。 もちろんJavaScriptは有効にしています。 この原因はどこにあるのでしょうか? ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona..."> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <script type="text/javascript"> <!-- var ajax = new XMLHttpRequest(); function makeTable(keyword) {  ajax.onload = function() {   document.getElementById('layerTable').innerHTML = ajax.responseText;  }  ajax.open('GET', 'sample.php?keyword=' + keyword, true);  ajax.send(null); } </script> </head> <body> <h1>Ajaxのテスト</h1> <form id="formMain" name="formMain" method="post" action=""> <p>キーワードを入力して、表示するボタンをクリックしてください。</p> <p> <input type="text" name="keyword" size="35"> <input name="buttonMake" type="button" id="buttonMake" value="表示する" onClick="makeTable(this.form.keyword.value)" /> </p> </form> <div id="layerTable">ここに応答が表示されます</div> </body> </html> ■sample.php <?php $keyword = $_GET['keyword']; $doc = "<b>Ajaxのテストです</b><br />"; $doc .= "キーワードは{$keyword}"; print($doc); ?>

    • ベストアンサー
    • AJAX
  • メールフォームについて質問です。

    メールフォームを作成したのですが、今まではメールフォームから送ると、受け取り用のアドレスでは送信者の名前が各々表示されていたのですが、現在、受け取り用のメーラーではpiyo@hoge.co.jp(当社のアドレス)から送られてくる様になりました。 したがって、受信メッセージがまとまってしまいます。 説明が難しいので画像を添付します。 画像は受け取り用のメールソフトです。 4 と表示されていますが、これがまとまっている状況です。 メールが送られてくるたびに5,6,7...と増えて行きます。 これはどのように解消すればよいのでしょうか。 お力添えの程よろしくお願いいたします。 <form action="http://www.piyo.co.jp/CGI/postmail/postmail.cgi" method="post"> <input type="hidden" name="match" value="e-mail e-mail2" /> <input type="hidden" name="need" value="お名前 フリガナ e-mailアドレス 確認用アドレス プライバシーポリシーに同意 送信内容" /> <input type="hidden" name="mailto" value="piyo@hoge.co.jp" /> <input type="hidden" name="subject" value="お名前" />■お名前<span class="red">【必須】</span><br /> <input type="text" name="お名前" size="45" maxlength="50" /><span class="sitemap_link">例:山田 太郎</span><br /> ■カナ<span class="red">【必須】</span><br /> <input type="text" name="フリガナ" size="45" maxlength="50" /><span class="sitemap_link">例:ヤマダ タロウ</span><br /> <br /> ■幼稚園名 / 会社名<br /> <input type="text" name="会社名" size="45" maxlength="50" /><span class="sitemap_link">例:株式会社山田</span><br /> <br /> ■E-mail アドレス<span class="red">【必須】</span><br /> <input type="text" name="e-mailアドレス" size="45" maxlength="50" /><span class="sitemap_link">例:xxx@xxx.co.jp</span><br /> ■E-mail アドレス (再度入力)<span class="red">【必須】</span><br /> <input type="text" name="確認用アドレス" size="45" maxlength="50"/><span class="sitemap_link">例:xxx@xxx.co.jp</span> <br /> <br /> ■お問い合わせ内容をご記入ください<span class="red">【必須】</span><br /> <textarea name="送信内容" rows="8" cols="70"></textarea> <br /> <input id="checkboxPrivacy" name="プライバシーポリシーに同意" value="プライバシーポリシーに同意します" type="checkbox" /><span class="sitemap_link2">プライバシーポリシーに同意する<span class="red">【必須】</span></span><br /> <br /> <input type="submit" value="送信" /> <input type="reset" value="リセット" /> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • servet(idに関連付くvalue値を取得する方法について)

    HTMLのフォーム内にある 「idに関連付くvalue値を取得する方法について」教えてください。 今はnameで取得しているのですが、 それが中々不便なものでServletでidのvalue値を取得したいと思っています。 【HTML】 ---------------------------------------------- <html> <head> <title>ID_VALUE_GET</title> </head> <body> <form name="form1"> <input type="text" id="id" name="name"> </form> </body> </html> ---------------------------------------------- 現在:  String インプット属性のnameのvalue値 = getAttribute(name); 考えている事:  String インプット属性のidのvalue値 = getAttribute(id); ということをしたいのですが可能でしょうか? (nameに対して、getAttribute(getParameter)をかけるのではなく、idに対してかける方法というのはありますでしょうか?)

    • ベストアンサー
    • Java
  • 【緊急】リアルタイムでエラーチェック

    下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。 このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>exValidationサンプル 2</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="skin/selectable/style.css" /> <link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.js"></script> <script type="text/javascript" src="js/exvalidation.js"></script> <script type="text/javascript" src="js/exchecker-ja.js"></script> <script type="text/javascript"> $(function(){ $("form") .exValidation({ rules: { name: "required", kana: "required katakana", email: "required email hankaku group", pass: "required min6 max12", repass: "required retype-pass", radio: "radio", checkbox: "checkbox" }, errInsertPos: 'after', errPosition: 'fixed' }); }); </script> </head> <body> <div class="pagebody"> <h1>exValidation</h1> <form> <fieldset> <p class="attention">*は必須項目です</p> <table> <tbody> <tr> <th>Name<span>*</span></th> <td><input type="text" id="name" name="name" value="" /></td> </tr> <tr> <th>Kana<span>*</span></th> <td><input type="text" id="kana" name="kana" value="" /></td> </tr> <tr> <th>Mail<span>*</span></th> <td><span id="email"><input type="text" id="email" name="email" value="" /> @ <input type="text" name="email2" value="" /></span></td> </tr> <tr> <th>Password<span>*</span></th> <td><input type="password" id="pass" name="pass" value="" /></td> </tr> <tr> <th>Retype-Password<span>*</span></th> <td><input type="password" id="repass" name="repass" value="" /></td> </tr> <tr> <th>Sex<span>*</span></th> <td> <span id="radio"> <label for="male"><input type="radio" id="male" name="sex" value="male" />male</label> <label for="female"><input type="radio" id="female" name="sex" value="female" />female</label> </span> </td> </tr> <tr> <th>Prefecture<span>*</span><br /> this is selectable</th> <td> <select id="pref" name="pref" class="selectable"> <optgroup label="---"> <option value="">---</option> </optgroup> <optgroup label="北海道"> <option value="01">北海道</option> </optgroup> <optgroup label="東北"> </optgroup> </select> </td> </tr> <tr> <th>City</th> <td><input type="text" name="city" value="" /></td> </tr> <tr> <th>Street</th> <td><input type="text" name="street" value="" /></td> </tr> <tr> <th>Favorite<span>*</span></th> <td> <span id="checkbox"> <label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label> <label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label> <label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label> <label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label> <label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label> </span> </td> </tr> </tbody> </table> </fieldset> <p class="submit"><input type="submit" value="Submit" class="button" /></p> </form> </div> </body> </html>

専門家に質問してみよう