いつもお世話になっております。
現在入力フォームに表示された情報をテーブルに表示する機能を作成しております。
しかし、完成したと思いきや、ラジオボタンの値が取得できておらず、undefinedとなってしまいます。どうすれば改善されますでしょうか?
自分なりに本やネットで調べてみたのですがわかりませんでした。
申し訳ございませんがどなたかご教授よろしく御願い致します。
<!DOCTYPE html>
<html>
<head>
<title>勉強</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/test.css" type="text/css" />
<link rel="stylesheet" href="js/test.js" type="text/javascript" />
<script type="text/javascript">
var num = 0;
function appendToTable() {
//名前10文字制限
var a1 = document.form1.formName.value;
if (a1.length > 10) {
alert("10文字以内で");
return;
}
else if (a1.length == "0") {
alert("未入力です");
return;
}
//メアド30文字制限
var a2 = document.form1.formMail.value;
if (a2.length > 30) {
alert("30文字以内で");
return;
}
else if (a2.length == "0") {
alert("未入力です");
return;
}
//tel半角判別
var a3 = document.form1.formTel.value; /* 入力値 */
if (a3.match(/[^0-9]/)){ /* 半角数字以外が在れば */
alert("半角で");
return;
}
else if (a3.length == "0") {
alert("未入力です");
return;
}
//セレクトメニュー未入力
if(document.form1.formYear.selectedIndex == 0){
alert('選択してください');
document.form1.year.focus();
return;
}
if(document.form1.formMonth.selectedIndex == 0){
alert('選択してください');
document.form1.formMonth.focus();
return;
}
if(document.form1.formDay.selectedIndex == 0){
alert('選択してください');
document.form1.formDay.focus();
return;
}
++num;
var $formObject = document.getElementById( "sampleForm" );
var $tableObject = document.getElementById( "sampleTable" );
var $tr = "<tbody id='addTbl" + num + "'><tr>";
$tr += "<td>" + $formObject.formName.value + "</td>";
$tr += "<td>" + $formObject.formMail.value + "</td>";
$tr += "<td>" + $formObject.formTel.value + "</td>";
$tr += "<td>" + $formObject.formSex.value + "</td>";//ここで取得できていない
$tr += "<td>" + $formObject.formYear.value + "</td>";
$tr += "<td>" + $formObject.formMonth.value + "</td>";
$tr += "<td>" + $formObject.formDay.value + "</td>";
$tr += "<td><input name='delchk' type='checkbox' id='" + num + "'></td>";
$tr += "</tr></tbody>";
$tableObject.insertAdjacentHTML( "beforeend", $tr );
}
function removeToTable() {
var $tableObject = document.getElementById( "sampleTable" );
var elms = document.getElementsByName("delchk");
var len = elms.length;
for(var i = len - 1; i >= 0; i--) {
if(elms[i].checked) {
$tableObject.removeChild(document.getElementById("addTbl" + elms[i].id));
}
}
}
</script>
</head>
<body>
<form id="sampleForm" name="form1">
【入力エリア】
<br />
名前:<input type="text" name="formName">
<br />
メールアドレス:<input type="text" name="formMail">
<br />
電話番号:<input type="text" name="formTel">
<br />
性別:<input type="radio" name="formSex" value="男性" checked="checked" /><label for="sex1" >男性</label>
<input type="radio" name="formSex" value="女性" /><label for="sex2">女性</label>
<br />
生年月日:<select name="formYear">
<option value="">--</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>年
<select name="formMonth">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>月
<select name="formDay">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>日<br />
</form>
<button onclick="appendToTable()" onSubmit="return chValie()">追加</button>
<table id="sampleTable">
<thead>
<tr>
<th id="tableName">名前</th>
<th id="tableMail">メールアドレス</th>
<th id="tableTel">電話番号</th>
<th id="tableSex">性別</th>
<th id="tableYear">生年</th>
<th id="tableMonth">月</th>
<th id="tableDay">日</th>
<th><input type="button" onclick="removeToTable()" value="削除"></th>
</tr>
</thead>
</table>
</body>
</html>
No.1ベストアンサー
- 回答日時:
以下で如何でしょう。
$radiosの各要素に対してチェックされているか確認し、チェックされている要素のvalueを取得します。
……
$tr += "<td>" + $formObject.formTel.value + "</td>";
// ここから追加
var $radios = $formObject.formSex;
var $radio_val;
for(var i=0; i<$radios.length; i++){
if($radios[i].checked){
$radio_val = $radios[i].value;
break;
}
}
// この行変更
$tr += "<td>" + $radio_val + "</td>";//ここで取得できていない
// ここまで
$tr += "<td>" + $formObject.formYear.value + "</td>";
……
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
selectを変更不可にしたい
-
selectを使った計算
-
ラジオボタンとプルダウンを連...
-
JavaScriptの質問です。どなた...
-
セレクトボックスの内容を次の...
-
Selectボックスの一覧表示方法
-
3つのselectでURLパラメータを...
-
javascriptで計算フォームを作...
-
プルダウンメニューに連動する...
-
jqueryでセレクトメニュー+スク...
-
javascriptでセレクトボックス...
-
複数条件の入力チェックについて
-
disableとすることなく、ユーザ...
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは?
-
<td>の中のonClick="location" で
-
JavaScriptにて動的に配列を作...
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報