変数内容をHTML内で表示する方法

このQ&Aのポイント
  • javascript初心者のため、perlからの変数の取り扱い方に困っている。特に、HTML内で変数の内容を表示する方法を知りたい。
  • 質問者はjavascriptの変数(msg)の内容をHTMLタグ内で表示させたいが、うまくいかない。
  • 質問者はajaxを使ってperlとのデータのやり取りをしようとしているが、perlの変数の扱い方とjavascriptの変数の扱い方が異なるため、困っている。具体的には、HTML内で変数(msg)の内容を表示する方法を知りたい。
回答を見る
  • ベストアンサー

変数内容をHTML内で表示する方法

javascript初心者です(主にはperlを使っています)。 ajaxに手をだしたところ、perlとの変数の取り扱い方が基本的なところで違っていて戸惑っています。 例えばperlの場合、タグ内の変数(例えば$msg)は、ホームページで表示する際は、その内容が展開表示されるので、 javascriptでも、変数(例えばmsg)を、それと同様に扱ったところ、全く展開表示されずに困っています。 javascriptで変数(例えばmsg)の内容を、htmlタグ内で表示させるには、どうしたらよいのか教えて下さい。 (あれこれ検索してみましたが、何故か、その方法が見つかりませんでした) 具体的には、、、、、 (以下のソース参照) 「チェック」ボタンをクリックしたら、それをきっかけにして、外部プログラムが起動し そこからの返答として、javascriptの変数msgの中に 「exist」もしくは「noexist」が代入されて返ってきます。 それに基づき、javascriptの変数 resultの中に「有 msg」又は「無 msg」が代入され、 それが、<div id="note$id"></div>の部分に表示されます。 が、その際、変数msgの内容を表示させたいのですが、それができません。 例えば result = '有 document.write(msg);'; とやったのですが、それでも表示されません。 msgの内容をHTMLタグ内で表示させる方法を教えて下さい。 よろしくお願いします。 --------------------------------------------- 実際のソース(肝心な部分だけを抽出) --------------------------------------------- <header部分> <!-- JQuery --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> <!-- // When DOM is ready $(document).ready(function(){ // ------- Form ------- $("input").click(function(){ id2= $(this).attr("class"); sharpform="#form"; sharpfields="#fields"; sharpnote="#note"; formid = sharpform + id2; fieldsid= sharpfields + id2; noteid= sharpnote + id2; $(formid).submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "./外部ブログラム名.cgi", data: str, success: function(msg) { // Message Sent? Show the 'Thank You' message and hide the form if(msg == 'exist') { result = '有 msg'; $(fieldsid).hide(); } else if(msg == 'noexist') { result = "無 msg"; $(fieldsid).hide(); } else { result = msg; } $(noteid).html(result); } }); return false; }); }); }); --> </script> --------------------------------------------- <body部分> <div id="note$id"></div> <div id="fields$id"> <form id="form$id" method="post" action=""> <input type="hidden" name="method" value="post"> <input type="hidden" name="check" value="$check"> <input type="submit" value="チェック" class="$id"/> </form> </div> ※html表示時には、$idには、1や2等の数字が入って表示されます。 ---------------------------------------------

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

  • ベストアンサー
  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

result = '有 ' + msg;

keeeeeeen
質問者

お礼

ええ!? 半日悩んだ難問(笑)の答えが、たったそれだけ? まさか、そんな、、、、、、、と半信半疑(笑)思って試してみたら、、、、、 yuu_x様、、、、大変ありがとございました。 バッチリ表示されました。 相談して正解でした。 perlの発想から頭がなかなか抜け出せないようで、相談しなかったら、永久に解けない難問でありつづけたと思います。 本当に回答、ありがとうございました。

関連するQ&A

  • タグで、submitさせる方法について

    こんばんは。いつもお世話になります。 input type='submit'を、画像を使ってロールオーバーで実行したいのですが、 うまくいきません。1)は、OKです。2)と3)は、ダメでした。 1)にある、name='delete_msg' が重要な鍵ですが、 それをJavaScriptでどう扱えば良いのかわかりません。 3)の<div id='delete' ..... onclick='javascript:....'>Delete</div>で実行させる場合、 function pmDelete()にどう書けば良いのか教えてください。 よろしくお願いします。 ------(例:ここから)----------------------------- <html><head> <script type='text/javascript'> function pmDelete(){ document.mSg.submit(); } </script> <style type='text/css'> div#delete { float: left; background-image: url(page_up.gif); text-indent: -1000em; overflow: hidden; cursor: pointer; } div#delete:active { background-position: 0 -20px; } </style> </head> <body> <form name='mSg' id='mSg' action='index.php' method='post'> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />111<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />222<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />333<br /> 1)<input type='submit' name='delete_msg' value='Delete' /><br /> 2)<input type='submit' value='Delete' /><br /> 3)<div id='delete' name='delete' onclick='javascript:pmDelete();'>Delete</div> </form></body></html> ------(例:ここまで)-----------------------------

  • HTML内でJavaScriptの変数を使いたい

    <script language="JavaScript"> <!-- function fnc_prompt(){ var msg; msg = window.prompt("URL",""); } //--> で、msgにURLを代入して、 <form action="&{msg};" method="post"> フォームタグ内でその変数を使いたいのですが可能でしょうか。 よろしくお願いします。

  • 不必要になった要素を非表示にしたいのですが、良い方法を教えて下さい。

    こんにちは、お世話になります。 早速ですが、質問させてください。 リスト表示している要素をクリックしたら、その要素の上にフォームを表示してポストしたいと思っています。 おおよそ出来る様になったのですが、不必要になったと思われる時に、非表示にする事ができません。 フォームを表示している<div>以外の部分をクリックしたり、入力部からフォーカスが外れた時に非表示にするにはどのようにすれば良いか教えて下さい。 jQueryを使っています。firefox 3 で動けば良いと思っています。 見にくいと思いますが、以下に出来るだけ簡略化した物を貼り付けます(tabを全角スペースにしてあります)。よろしくおねがいします。 <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>test</title>  <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){  $('span').each(function(){   $(this).click(function(){    $('#form_box').hide();        $('#name').val($(this).html());    var offset = $(this).offset();    $('#form_box').css({'top' : offset.top , 'left' : offset.left }).show('fast',function(){$('#name').focus()});   });  })  //$('#name').blur(function(){$('#form_box').hide();}) }); function hide() {  $('#form_box').hide();  return false; } </script> <style type="text/css"> span {  cursor : pointer; } </style> </head> <body>  <ul>   <li><span>1</span>    <ul>     <li><span>1-1</span></li>    </ul>   </li>   <li><span>2</span>    <ul>     <li><span>2-1</span>      <ul>       <li><span>2-1-1</span></li>      </ul>     </li>     <li><span>2-2</span></li>    </ul>   </li>  </ul>  <div id="form_box" style="display:none;position:absolute;">   <form onsubmit="alert('送信')">    <input type="text" id="name" />    <input type="submit" value="送信" />    <button onclick="return hide();">閉じる</button>   </form>  </div> </body> </html>

  • input type="file"のvalue監視

    input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。

  • javascriptで別ファイルで変数を取得する。

    A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。 アラートは表示されるのですが、入力欄に何を打っても、 namae と出てしまいます。変数に何も入ってないようです。 これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか? 〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>

  • ajax を使って,htmlを読み込み表示する方法

    webページのfaqを作成しています。 目次が並んでいて,どれかひとつ質問をクリックすると,その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問2</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問3</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために,<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問2</h3> <div.class="a-2"></div> <h3>質問3</h3> <div.class="a-3"></div> </div> これを実行すると,文字の場所がずれて表示されてしまいます。 (今回の作業は既に出来上がっているページに機能を追加しているので,おそらくタグが干渉しあっているのだろうと思います。これは,細かく確認すれば直るとは思います) その他,細々と不具合があります。 また,質問の数は50以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。

  • HTMLとJSでtxet内容を表示したい

    下記のコードで質問があります。 仕様としてはtextに何かを書き込んで追加ボタンでテキストボックスの下に書き込んだ内容が表示され保存されるという風にしたいですが途中から何を書けばいいかわからなくなってしまいました。 ご指導お願いいたします <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <head> <body> <input type="text" id="form_txt"> <input type="button" width="50" value="追加" onclick="add_txt()"> <script> function add_txt() { var result = document.getElementById('form_txt'); /*ここからが何を書けばいいかわかりません・・・。*/ } </script> </body> </html>

  • 計算結果の表示方法について

    お世話になります。 Java Scriptの記述方法で教えてください。 下記のフォームを作りました。 テキストボックスに目標タイムを4時間30分であれば4.5と入力することで必要な時速とキロ当たりのペースを出すようにしています。 2行に渡り、キロ当たりのペースを分と秒で出ていますがが、これを○分○秒と1行に表示させたいのです。 どなたかお知恵をお願いします。 <html> <head> <script type="text/javascript"> function calc(frm) { var result = Math.round(42.195 / (parseFloat(frm.elements["a"].value))*10) / 10; document.getElementById('result_1').getElementsByTagName('span')[0].innerHTML = result; result = Math.floor(parseFloat(frm.elements["a"].value) / 42.195 * 60); document.getElementById('result_2').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(parseFloat(frm.elements["a"].value) / 42.195 * 60*60)%60; document.getElementById('result_3').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(1 / 42.195 * 5 * parseFloat(frm.elements["a"].value) *100) /100; document.getElementById('result_4').getElementsByTagName('span')[0].innerHTML = result; } </script> </head> <body> <form> <input type="text" name="a"> <input type="button" value="計算" onClick="calc(this.form)"><br> 計算結果<br> <div id="result_1">時速      <span></span>km/h</div> <div id="result_2">キロペース  <span></span>分</div><div id="result_3">       <span></span>秒</div> <div id="result_4">5km       <span></span>時間</div> </form> </body>

  • JQueryの変数の扱いで弱っています。

    お世話になります。 JQuery初心者です。 3日程、ハマリ、行き詰まったので、相談させて下さい。 アマゾンのレビューの「レビューは参考になりましたか?」「はい」「いいえ」の 様なものを作りかけています。 その際、以下の様な記述をしています。 (肝心な部分抜粋) ---------------------------------------------- 大元   正常に稼働 ---------------------------------------------- <!-- JQuery --> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $("#form1").submit(function() {        //●●●この  #form1  の部分を変数にしたい var str = $(this).serialize(); 処理 }}; --> </script> </head> <body> <form id="form1" method="post" action="">    //●●●#form1とはコノ部分 <select name="option"> <option value="yes" selected>参考になった</option> <option value="no">参考にならなかった</option> </select> <input type="submit" name="submit" value="投票する"/> </body> </html> ---------------------------------------------- 上記の記述で正常に稼働しています。 が、1つのページにフォームを複数作り、それぞれのフォームにIDをふって、 それぞれ正常に稼働させたいのです。 そこで、javascriptの $("#form1").submit(function() {  ここの   #form1   部分を変数にして、複数のフォームに対応させたいと思っています。 が! 以下の様に改良したところ、正常に稼働しません。 ---------------------------------------------- 以下、改良部分   うまく稼働せず ---------------------------------------------- -------javascript部分 $("input").click(function(){ //●●●ここを改良 変数作成 id2= $(this).attr("class"); sharp="#form"; id3 = sharp + id2; }); $("id3").submit(function() {       //●●●ここを改良 変数指定 -------フォーム部分 <form id="form1" method="post" action=""> <input type="submit" name="submit" value="投票する" class="1"/>     //●●●ここを改良 class="1" を追加 ------------------------------------------------- つまり、classの「1」をjavascript部分で読み取って、#form の文字列と組み合わせて    #form1 として、機能させたいのですが、うまくいきません。 (何故か、$("#form"+id2) の部分がうまく機能しません。) ※要は複数のフォームのidに、1つのjavascriptで対応させたいだけで、 上記の様な、まわりくどいやり方には全くこだわっていません。 どうか、迷える子羊に愛の手を!

    • ベストアンサー
    • AJAX
  • 入力内容をリアルタイムに取得・表示する処理

    次のような内容でテキストエリアに入力された特定のキーワードをカウントしているのですが、カウントの値をリアルタイムに取得・表示にはどのような処理を加えたら良いのでしょうか。 <form id="post" name="post" method="post" action="post.php"> <texarea id="text" class="text-edit" name="text"></textarea> <input id="submit" name="submit" type="submit"> </form> (<div id="keyword-counter"></div>をここに追加) <div id="word-counter">文字数</div> <script type="text/javascript"> jQuery( function($) { function KeywordCounter() { var input_text = document.post.content.value; var word = input_text.split('キーワード').length -1; } $('#word-counter') .before('<div id="keyword-counter"></div>').bind('keyup', KeywordCounter); KeywordCounter(); }); </script>

専門家に質問してみよう