javascriptの変数の渡し方とラジオボタンでテーブルを変えるフォームの作成方法

このQ&Aのポイント
  • javascriptの変数を渡す方法と、ラジオボタンで選択した値によって表示するテーブルを変えるフォームの作成方法について説明します。
  • 質問文章では、AAAとBBBというラジオボタンがあり、BBBを選択した後にBBBの入力ボックスが表示されるかどうかについての質問があります。
  • PHPを使用してフォームを作成し、javascriptを使ってラジオボタンの選択に応じてテーブルの表示を切り替えていますが、BBBの入力ボックスの表示に問題があるようです。
回答を見る
  • ベストアンサー

javascriptの変数の渡し方

ラジオボタンで選択した値によって表示するテーブルを変えるフォームを作っています。 AAAは入力ボックスが1つ BBBは入力ボックスが2つ 同じphpへ送信して、入力ボックスへデータは入るのですが、javascriptの値を渡すことが出来ません。 BBBでsubmit後、BBBの入力ボックスを表示することは出来ますでしょうか。 <? echo "<form method=post action=?>"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=1"; if($user==1){ echo " checked"; } echo ">AAA"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=2"; if($user==2){ echo " checked"; } echo ">BBB"; echo "<br>"; echo "<span id=inner>"; echo "<table>"; echo "<tr>"; echo "<td>AAAのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<span id=outer>"; echo "<table>"; echo "<tr>"; echo "<td>BBBのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "<td><input name=form2 type=text value=$form2></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<br>"; echo "<input type=submit value=submit>"; echo "</form>"; ?> <script language='javascript'> var inner = document.getElementById('inner'); var outer = document.getElementById('outer'); function change_user (uid) { if (uid == '2') { inner.style.display = 'none'; outer.style.display = ''; } else { inner.style.display = ''; outer.style.display = 'none'; } } change_user(document.getElementById('user').value); </script>

  • PHP
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

えーと。 同じフォームの中に、AAAとBBBで同じ名前(form1)のテキストフィールドが あるので、これはだめです。別名で管理してください。 それとechoの連発はいただけません。ヒアドキュメントにしましょう 以下を踏まえてこんな感じで書くとよろしいかと。 <script language="javascript"> window.onload=function(){ inner = document.getElementById("inner"); outer = document.getElementById("outer"); var user=document.forms[0].user; var uid=0; if(user[0].checked) uid=1; if(user[1].checked) uid=2; change_user(uid); } function change_user(uid){ if(uid == "2"){ inner.style.display = "none"; outer.style.display = "inline"; }else if(uid=="1"){ inner.style.display = "inline"; outer.style.display = "none"; } } </script> <?PHP $checked["user"][$_REQUEST["user"]]=" checked"; print <<<eof <form method="get" action="{$_SERVER["PHP_SELF"]}"> <input type="radio" name="user" onclick="change_user(this.value)" id="user1" value="1"{$checked["user"]["1"]}><label for="user1">AAA</label> <input type="radio" name="user" onclick="change_user(this.value)" id="user2" value="2"{$checked["user"]["2"]}><label for="user2">BBB</label> <br> <span id="inner"> <table> <tr> <td>AAAのフォーム</td> <td><input name="form1" type="text" value="{$_REQUEST["form1"]}"></td> </tr> </table> </span> <span id="outer"> <table> <tr> <td>BBBのフォーム</td> <td><input name="form2" type=text value="{$_REQUEST["form2"]}"></td> <td><input name="form3" type=text value="{$_REQUEST["form3"]}"></td> </tr> </table> </span> <br> <input type="submit" value="submit"> </form> eof; ?>

cefirosp
質問者

補足

>>同じフォームの中に、AAAとBBBで同じ名前(form1)のテキストフィールドが そうですよね、重複ではsubmit後に二番目が優先でした。 >>それとechoの連発はいただけません。ヒアドキュメントにしましょう そうだったのですか、以後気をつけます。 ソースの見直しありがとうございます。 AAAもしくはBBBで送信した場合、チェックされて表示はされているのですが テキストボックスが初期の二つ出る状態になっていまいます。 こちらも継続してAAAならAAAのテキストボックスのみ表示 とするのはやはり難しいでしょうか。

関連するQ&A

  • 変数の書き方について

    下記のようなプログラムを作成しました。 この状態で20行目のechoを実行しても何も表示されません。 15行目にある$emailを表示させるためには、 19行目と20行目の辺りになんらかの変数を書かなければならないと思うのですが、 具体的にはどのような内容を記載すればよろしいのでしょうか? ご教授のほどよろしくお願いします。 1:<form method="post" action="<?=$_SERVER["PHP_SELF"]?>"> 2:<input type="hidden" name="act" value="updconf"> 3:<input type="hidden" name="roomid" value="<?=$roomid ?>"> 4:<input type="hidden" name="hiduke" value="<?=$hiduke?>"> 5:<input type="hidden" name="jikan" value="<?=$jikan?>"> 6:<input type="submit" name="sub" value="予約更新"> 7:</td> 8:<td>お名前</td> 9:<td> 10:<input type="text" name="yoyakusha" value="<?=$user ?>"> 11:</td> 12:</tr> 13:<tr> 14:<td>メールアドレス</td> 15:<td><input type="text" name="email" value="<?=$email ?>"></td> 16:</tr> 17:</form> 18: 19:<?php 20:echo $email; 21:?>

    • ベストアンサー
    • PHP
  • javascriptによる計算

    テキストボックス「a1~6」の値とテキストボックス「b1~6」に入力された値を足し算してテキストボックス「c1~6」(例…c[i] = a[i] + b[i])を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "+"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>

  • <FORM ACTION= をつけると「宣言されていません」と

    <script language="javascript"> function change(tr,n) { tr.bgColor=CheckBox[n].checked?"#ff0000":"#ffffff"; } </script> 上記のコードで下記のように<form・・ を付けると「宣言されていません」とエラー表示になります。 <FORM ACTION="sample.cgi" METHOD="POST"> <TABLE BORDER="1"> <TR id="tr1"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr1,0)"></TD> </TR> <TR id="tr2"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr2,1)"></TR> </TABLE> </form> 下記だと正常です。 <TABLE BORDER="1"> <TR id="tr1"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr1,0)"></TD> </TR> <TR id="tr2"> <TD> <INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" onclick="change(tr2,1)"></TR> </TABLE> ちんぷんかんぷんになってきました。

  • データーベースをフォームから入力し更新

    データーベースをフォームから入力し更新 登録済のデーターベースをフォームから入力し更新したいのですが、どうしてもうまくいきません。 http://park18.wakwak.com/~little-box/Dreamweaver/sql010.htm のサイトを参考にしているのですがitiran.phpのところからつまづいています。 // 検索した結果を全部表示 echo "<table border=1>"; echo "<tr><td>id</td><td>name</td></tr>"; while($row=mysql_fetch_array($res)){    echo "<tr>";    echo "<td>". $row["name"] . "</td>";    echo "<td>". $row["age"] . "</td>";    echo "<form action=koushin_input.php method=post>";    echo "<input type=hidden name=id value=" . $row["id"] . ">";    echo "<td><input type=submit value=更新></td>";    echo "</form>";    echo "<form action=sakujo.php method=post>";    echo "<input type=hidden name=id value=" . $row["id"] . ">";    echo "<td><input type=submit value=削除></td>";    echo "</form>";    echo "</tr>"; } echo "</table>"; の辺りがおかしいのではと思っているのですが… アドバイスください。また、他に参考になるサイトがありましたらぜひ教えてください。

    • ベストアンサー
    • PHP
  • <span>の中では折り返さないにするには

    どうしたらいいのでしょうか? <table><tr><td> <span><input type="checkbox" name="goo[]" value="aaaa "/>aaaa</span> <span><input type="checkbox" name="goo[]" ・・・・・・・・・・・・・・・・ <span><input type="checkbox" name="goo[]" value="zzzz "/>zzzz</span> </td></tr></table> において <td>~</td> の内部のデータは折り返されますが 折り返す際に<span>~</span>の途中では折り返されないようにするにはどうしたらいいのでしょう?

    • ベストアンサー
    • HTML
  • width="150" に収まるように・・・

    ドリームウェーバーでページを触っているんですが、メルマガ登録のソースをいじると送信ボタンが効かなくなります。以下のソース部分をwidth="150"の場所に収まるようにしてフォームを小さくして、別のページに貼り付けたいのですが・・・ <table border="0" cellpadding="5" cellspacing="2" width="53%" bgcolor="#8888cc"> <tr> <td bgcolor="#ddddff"> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr> <td colspan="2" valign="top"><span class="m_p"><b>■登録申込み(購読無料)</b></span></td> </tr> <tr> <td width="586" align="right"> <form action="http://e2.wingmailer.com/wingmailer/mr.cgi" method="post"> <input type="hidden" name="uid" value="E048"> <nobr>E-mail:</nobr></td> <td width="130"> <input type="text" name="email" size="24"> </td> </tr> <tr> <td width="586" align="right"><nobr>お名前:</nobr></td> <td width="130"> <input type="text" name="opt1" size="24"> </td> </tr> <tr> <INPUT TYPE="hidden" NAME="opt2" VALUE="エヴィエ"> <td width="586">  <input type="submit" value="購読する"></form> </td> </tr> </table> </td> </tr> </table>

  • 問い合わせフォームでの確認画面について

    phpで問い合わせフォームを作成しているのですが、修正ヵ所があれば問い合わせフォームの下に「戻る」ボタンだけを表示し、正確に入力されていれば「戻る」ボタンと「OK」ボタンを表示することができました。 しかし、問い合わせフォームの上に表示する、修正ヵ所があれば「入力内容に誤りがあります。※印の項目は必ずご記入ください。」、正確に入力されていれば「以下の内容で送信しますか?」を表示させることができません。 この場合、どのようなコードを、どの部分に記述したら良いのでしょうか? ちなみに、submit後のphpファイルのコードは以下となります。 かなり無駄が多いかもしれません。 <table class="table margin01" width="592" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="190" align="left" bgcolor="#FFF09D">お名前<span class="tabletext1"></span></td> <td> <?php $name=$_POST['name']; if($name=='') { echo'<FONT COLOR="#cc3333">※必ず入力してください。</FONT>';; } else { echo $name; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス<span class="tabletext1"></span></td> <td> <?php $mail=$_POST['mail']; if (!preg_match( '/^[a-z0-9][a-z0-9_\.\-]*@[a-z0-9][a-z0-9_\.\-]+[a-z]$/i', $mail)) { echo'<FONT COLOR="#cc3333">※正しいメールアドレスを指定してください。</FONT>';; }elseif($_POST['mail']!==$_POST['mail2']) { echo '<FONT COLOR="#cc3333">※確認用メールアドレスと一致していません。</FONT>';; }else{ echo $mail; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス(確認)<span class="tabletext1"></span></td> <td> <?php $mail2=$_POST['mail2']; if($mail2=='') { echo'<FONT COLOR="#cc3333">※必ず入力してください。</FONT>';; } else { echo $mail2; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">お問い合せ内容<span class="tabletext1"></span></td> <td> <?php $list=$_POST['list']; if($list=='お問い合せ内容をお選びください') { echo'お問い合せ内容をお選びください<FONT COLOR="#cc3333">&nbsp;※必ず入力してください。</FONT>';; } else { echo $list; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">内容<span class="tabletext1"></span></td> <td> <?php $content=$_POST['content']; if($content=='') { echo'<FONT COLOR="#cc3333">※必ず入力してください。</FONT>';; } else { echo $content; } ?> </td> </tr> </table> <?php if($name==''|| $mail==''|| $mail2==''|| $list==''|| $content=='') { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } elseif($_POST['mail']!==$_POST['mail2']) { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } elseif(!preg_match( '/^[a-z0-9][a-z0-9_\.\-]*@[a-z0-9][a-z0-9_\.\-]+[a-z]$/i', $mail)) { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } elseif($list=='お問い合せ内容をお選びください') { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } else { echo'<form method="post"action="thanks.php">'; echo'<input type="hidden" name="name" value="'.$name.'">'; echo'<input type="hidden" name="mail" value="'.$mail.'">'; echo'<input type="hidden" name="mail2" value="'.$mail2.'">'; echo'<input type="hidden" name="list" value="'.$list.'">'; echo'<input type="hidden" name="content" value="'.$content.'">'; echo'<p align="center" class="margin01"><input type="button"onclick="history.back()"value="戻る">'; echo'<input type="submit"value="OK"></p>'; echo'</form>'; } ?>

    • ベストアンサー
    • PHP
  • javascriptの記述方法について

    こんにちわ。 今、以下のような記述で、kei1~kei5までの合計をtotalに出そうと考えましたが、 function allcalc(){}内に書く記述で困っています。 form名を分けているのは、別の関数で各行の小計(kei1~5)を出すために分けてみましたが、あまり意味がなさそうで一つのform名に変更しようかとも思っています。 <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT type="text/javascript"> <!-- function allcalc(total){ var al_total = 0; for (i=1; i <= 10; i++){ elementkei="total.form[" + i +"].element[2].value" if(elementkei != "") {al_total += elementkei} } document.form6.total.value = al_total; } //--> </SCRIPT> </HEAD><BODY><TABLE><FORM name="form1"> <TR><TD><INPUT type="text" name="baika1"></TD> <TD><INPUT type="text" name="suryou1"></TD> <TD><INPUT type="text" name="kei1"></TD> </FORM> <FORM name="form2"> <TR><TD><INPUT type="text" name="baika2"></TD> <TD><INPUT type="text" name="suryou2"></TD> <TD><INPUT type="text" name="kei2"></TD> </FORM> ・・・・・・・・・・・・・これが5つあります <FORM name="form6"> <TR><TD>合計</TD> <TD><INPUT type="text" name="total"> <TD><INPUT type="button" name="go" value="合計計算" OnClick="allcalc(document)"></TD> </FORM></TABLE></BODY></HTML> これを動作させてみると、「total.form[がNullかオブジェクトではありません」とエラーが流れます。 恐らく、allcalcの引数とその参照の仕方が悪いと思うのですが、 書き方を変えてみても、同じようなエラーで止まってしまいます。 どなたか方法を教えていただけないでしょうか。

  • tableタグとformタグの組み合わせ

    tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか? 私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので お聞きしました。 <table> <form> <input type="hidden" name="a" value="1"> <tr> <td> <input type="text" name="b" value=""> </td> </tr> <tr> <td> <input type="submit" value="OK" value=""> </td> </tr> </fomr> </table>

    • ベストアンサー
    • HTML
  • 以下ソースのJavaScript部分をご教示下さい

    <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script> </script> </head> <form action=""> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者</B> </Td> </Tr> <Tr> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="本人">本人 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="奥さま">奥様 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="お嬢さま">娘 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="ご子息さま">息子 </Td> </Tr> <Tr> <Td ColSpan="4"> <input type="radio" name="irai">その他 <input type="text" size="21" name="hoka"> </Td> </Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者の連絡先</B> </Td> </Tr> <Tr> <Td Valign="top"> 番号:<input type="text" size="27" name="t"> </Td> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="1"> </Td><Td>日時確認</Td></Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="2"> </Td><Td>依頼内容確認</Td></Tr> </Table> <textarea name="yoyaku" value="" rows="5" cols="28"> </textarea> <br> <button type="button" onclick="update(this.form);">内容反映</button> <input type="reset" value="リセット"> </form> </body> </html> 「内容反映」を押すと、テキストエリアに以下の様に吐き出され、 リセットで入力内容・テキストエリア共にリセットしたいです。 チェックボックスの2つについては、確認だけですので、 吐き出す必要はありません。 ◆反映内容◆ 依頼者:(irai選択内容が反映) 連絡先:(tに入力した内容が反映) 宜しくお願い致します。