プロが教えるわが家の防犯対策術!

新米プログラマーです。
JavascriptとJavaでショッピング画面を作っています。

以下のコードで function doActionShoppingEntry(){ で登録用のフォームを表示して、
function doActionShoppingAdd(){ Ajax通信で登録処理を行っています。

var data = $('#fmShoppingDetail').serialize(); でフォームの内容をシリアライズしようと
しているのですが、うまくシリアライズされず data は空っぽのままです。

読み込む順番とか、スコープの問題かな、とも思ったんですけど、
var data_shoppingDate = $('#shoppingDate').val(); や
var data_hinme = $('#hinmei').val();
は認識されて、空欄チェックをちゃんとしてくれます。

いろいろやってみたのですが、シリアライズされない状況が続いています。

どなたかヒントを頂くなりお願いできますでしょうか。

よろしくお願いします。



// ■お買物登録
// 登録画面表示
function doActionShoppingEntry(){
var space = "";
space += '<form id="fmShoppingDetail">'
+ '<tr>'
+'<th>購入日</th>'
+'<td><input type="text" id="shoppingDate" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>場所</th>'
+ '<td><input type="text" id="place" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>品名</th>'
+ '<td><input type="text" id="hinmei" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>金額</th>'
+ '<td><input type="text" id="kingaku" /></td>'
+ '</tr>'

+ '<input type="button" onclick="doActionShoppingAdd();" value="登録" />'
+ '<input type="hidden" id="customerId" value="' + $('#customerId') + '" />'
+ '</form>';

var obj = document.getElementById("datatableShoppingAdd");
obj.innerHTML = space;

// お買上日
$(function(){
$('#shoppingDate').datepicker();
$("#shoppingDate").datepicker("option", "dateFormat", "yy/mm/dd");
} );

}


// 登録
function doActionShoppingAdd(){
// 必須項目の入力チェック
var data_shoppingDate = $('#shoppingDate').val();
if(data_shoppingDate == ""){
window.alert('購入日は空白では登録できません。');
return false;
}else{
var data_hinme = $('#hinmei').val();
if(data_hinme == ""){
window.alert('品名は空白では登録できません。');
return false;
}
}

if(window.confirm("登録していいですか?")){
var data = $('#fmShoppingDetail').serialize();                ←ここです。
$('#gon').text("登録内容は" + data); //gon内のテキストに表示
console.log("data[0]==========" + data[0]);

$.post('/shoppingadd',data,function(resp, status, XHR){
if(status == "success"){
$('div#status').text("登録しました。");
}
});
}else{
return false;
}
}

このQ&Aに関連する最新のQ&A

A 回答 (3件)

ANo2です。



ご質問文から、datepickerやajaxの部分を除いて試してみましたが、こちらの環境ではシリアライズできています。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

</head>
<body>

<div id="datatableShoppingAdd"></div>

<script type="text/javascript">
<!--
// 登録画面表示
function doActionShoppingEntry(){
var space = "";
space += '<form id="fmShoppingDetail" name="fmShoppingDetail">'
+ '<input type="hidden" id="customerId" name="customerId" value="test" />' // + $('#customerId') + '" />'
+ '<tr>'
+'<th>購入日</th>'
+'<td><input type="text" id="shoppingDate" name="shoppingDate" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>場所</th>'
+ '<td><input type="text" id="place" name="place" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>品名</th>'
+ '<td><input type="text" id="hinmei" name="hinmei"/></td>'
+ '</tr>'
+ '<tr>'
+ '<th>金額</th>'
+ '<td><input type="text" id="kingaku" name="kingaku" /></td>'
+ '</tr>'
+ '<input type="button" onclick="doActionShoppingAdd();" value="登録" />'
+ '</form>';

var obj = document.getElementById("datatableShoppingAdd");
obj.innerHTML = space;
}


// 登録
function doActionShoppingAdd(){
// 必須項目の入力チェック
var data_shoppingDate = $('#shoppingDate').val();
if(data_shoppingDate == ""){
window.alert('購入日は空白では登録できません。');
return false;
}else{
var data_hinme = $('#hinmei').val();
if(data_hinme == ""){
window.alert('品名は空白では登録できません。');
return false;
}
}

if(window.confirm("登録していいですか?")){
var data = $('#fmShoppingDetail').serialize();

alert(data); // ← ********* 追加 **********

/*
$('#gon').text("登録内容は" + data); //gon内のテキストに表示
console.log("data[0]==========" + data[0]);

$.post('/shoppingadd',data,function(resp, status, XHR){
if(status == "success"){
$('div#status').text("登録しました。");
}
});
*/
}else{
return false;
}
}
doActionShoppingEntry();

//-->
</script>
</body>
</html>
    • good
    • 0

ANo1です。



>3)console.log(document.getElementById("fmShoppingDetail")[1]);
[0]ではなく[1]って…
同じidのフォームが2箇所以上存在するってことでしょうか?
まずは、同じidの要素が存在するってことが文法違反では?

あと、なんだか気になってきたのは、fmShoppingDetailって本当にform要素のidなんでしょうか?
element.serialize()のelementはformのjQueryオブジェクトを指定するはずなんですけれど。

この回答への補足

それと、ことによるとシリアライズできないのかと思い、通常のForm
の送信(method="pose" action="/snoppingadd" 等を指定して)してみたのですが、
ウンともスンとも言ってくれず、動作しませんでした。

Javascriptで出力したFormは通常のHTML内のフォームと異なるのでしょうか?

また、それが原因でシリアライズできないのでしょうか?

よろしくおねがいします。

補足日時:2012/11/09 12:17
    • good
    • 0
この回答へのお礼

fujillinさん、回答ありがとうございました。

console.log(document.getElementById("fmShoppingDetail")[1]);
については
"fmShoppingDetail"が構成する2つ目のinput要素と理解していました。
ですので、ここには「購入日」に関する情報が入ってくると思っていました。

よくわかっていないようです。

「element.serialize()のelementはformのjQueryオブジェクトを指定するはず」
の意味がよくわかりませんでした。

わかりにくいと思い、script部分をすべてコピペしようと思ったら4千文字
超えてしまったので、今回の「お買物登録」部分のすべてだけを再度下に示します。

すべてのformを載せることができませんが、再度確認しましたが、FormのIDが重複
しているものはありませんでした。

よろしくお願いします。


// ■お買物登録
// 登録画面表示
function doActionShoppingEntry(){
var space = "";
space += '<form id="fmShoppingDetail" name="fmShoppingDetail">'
+ '<input type="hidden" id="customerId" name="customerId" value="' + $('#customerId') + '" />'
+ '<tr>'
+'<th>購入日</th>'
+'<td><input type="text" id="shoppingDate" name="shoppingDate" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>場所</th>'
+ '<td><input type="text" id="place" name="place" /></td>'
+ '</tr>'
+ '<tr>'
+ '<th>品名</th>'
+ '<td><input type="text" id="hinmei" name="hinmei"/></td>'
+ '</tr>'
+ '<tr>'
+ '<th>金額</th>'
+ '<td><input type="text" id="kingaku" name="kingaku" /></td>'
+ '</tr>'

+ '<input type="button" onclick="doActionShoppingAdd();" value="登録" />'
+ '</form>';

var obj = document.getElementById("datatableShoppingAdd");
obj.innerHTML = space;

// お買物登録を表示
$('#datatableShoppingList').hide();
$('#datatableShoppingDetail').hide();
$('#datatableShoppingAdd').show();


// お買上日
$(function(){
$('#shoppingDate').datepicker();
$("#shoppingDate").datepicker("option", "dateFormat", "yy/mm/dd");
} );


}

// 登録
function doActionShoppingAdd(){

// 必須項目の入力チェック
var data_shoppingDate = $('#shoppingDate').val();
if(data_shoppingDate == ""){
window.alert('購入日は空白では登録できません。');
return false;
}else{
var data_hinmei = $('#hinmei').val();
if(data_hinmei == ""){
window.alert('品名は空白では登録できません。');
return false;
}
}


if(window.confirm("登録していいですか?")){

var data = $('#fmShoppingDetail').serialize();
$('#gon').text("登録内容は" + data); //.ser内のテキストに表示
console.log("data=================" + data);

console.log("$('#shoppingDate').val()=====" + $('#shoppingDate').val());
console.log("$('#hinmei').val()=====" + $('#hinmei').val());

console.log("document.getElementById('fmShoppingDetail')[0]=====" + document.getElementById("fmShoppingDetail")[0]);
console.log("data[0]==========" + data[0]);
console.log("data[1]==========" + data[1]);

$.post('/shoppingadd',data,function(resp, status, XHR){
console.log("resp==========" + resp);
console.log("status==========" + status);
console.log("XHR==========" + XHR);

if(status == "success"){
$('div#status').text("登録しました。");
}
});

}else{
return false;
}

}

-->
</script>

お礼日時:2012/11/09 12:00

インプット要素にname属性を設定すればよいのでは?

    • good
    • 0
この回答へのお礼

fujillinさん、回答ありがとうございました。

教えて頂いた通りFormの中のすべてのinput要素にname属性を設定して
みました。値はid属性と同じものを設定しました。

残念なことに、それでもシリアライズされず data は空っぽのままです。

いくつか調べたことをご報告します。

1)console.log( $('#shoppingDate').val());
2)console.log( $('#hinmei').val());
3)console.log(document.getElementById("fmShoppingDetail")[1]);
4)console.log("data[0]==========" + data[0]);

1)と2)はちゃんと値がセットされますが、3)と4)は undefined と
なって帰ってきます。
「Form上には値が存在するが、シリアライズされていない」
ことを表しているのでしょうか。

何かヒントになることを教えて頂けないでしょうか。

よろしくおねがいします。

お礼日時:2012/11/09 10:08

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qhtmlのfileタグに自動で値を入れる方法

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉の策になっています…。

とりあえず(だめだとは思っていたのですが)
<input type="file" value="ファイルパス" name="filepath">
と直書きにしてみたり
document.all.filepath.value = "ファイルパス";
などとしてみたりしましたがだめでした…。
W3C勧告の使用上はvalueでファイルパスを指定できるようになっているようなのですが、現在の一般的なブラウザでは禁止されているようですね。

このような場合、何らかの方法でfileにファイルパスを自動入力することはできますでしょうか?
もしできない場合、何らかの方法で実現する方法はありますでしょうか?よろしくお願いします。

ちなみに実現できればいい環境は
WinXP環境のIE6です。言語はクライアント言語はJavaScriptのみで、という条件付です。
できないかもしれないのですが、こういうのって必要になるときもあるよなーなどと思っており、もしかしたら解決方法があるかもしれないと思い質問しました。よろしくお願いします。

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉...続きを読む

Aベストアンサー

やっぱ無理じゃないでしょうか。
なにか裏ワザ的な方法で一時的にできたとしても、いつか直されるかもしれないのでおいそれとは使えないし。

>W3C勧告の使用上はvalueでファイルパスを指定できるようになっている
→参考URL 「ユーザが明示的に送信を求めたファイル以外のものは送ってはいけない」とあります。

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#forms-security

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<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>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<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>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<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>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qで配列(複数の要素)を渡したいとき?

こんにちわ,

今HTML+PHPで
$hoge[]にいくつかの要素が入っているとき,
それをあるfoo.phpというページに渡したいとき,
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが,うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは?
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか?

QCSSでreadonlyの機能はありますか?

ASPにてCSSを使用しています。
inputタグを読取専用(readonly)にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。

Qsyntax error, unexpected '}' というエラーの対処法

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが33行目前後のどこをなおせばいいのでしょうか?
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
1~100までの数を入力してください
<input type="text" name="answer" size="5" maxlength="3" />
<input type="sbumit" value=回答" />
</form>
<hr />
<?php
session_start();
if(is_null($_SESSION['answer'])){
mt_stand(microtime()*1000000);
$_SESSION['answer']=mt_rand(1,100);
$_SESSION['game_cnt']=0;
}
if($_POST['answer']!=""){
$_SESSION['game_cnt']++;
if($_session['answer']==$_POST['answer']){
print("おめでとうございます".
$_SESSION['game_cnt']."回で正解しました!");
session_destroy();
}else{
if($_SESSION['answer']>$_POST['answer']){
print("もう少し大きいです。");
}else
print("もう少し小さいです。");
}
}
}
?>
</body>
</html>
それとこの間違えたところをなおしたあとはいつもコンピュータを再起動しないと修正したところが適用されないのですがほかに方法はないですか?基本的な質問ですいません。

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが33行目前後のどこをなおせばいいのでしょうか?
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
1~100までの数を入力してください
<input type="text" name="answer" size="5" max...続きを読む

Aベストアンサー

print("もう少し大きいです。");
}else
print("もう少し小さいです。");
のelseの後に{がないようですが、大丈夫でしょうか?

Q文字列から、特定の文字を削除したい

アンケートで入力された値を受け取り、メールで送信しているのですが、受け取った値から、特定の文字列を削除することは可能でしょうか?

例えば電話番号の入力の場合、
03-xxxx-xxxx →03xxxxxxxx
077-xxx-xxxx →077xxxxxxx
のように、-(ハイフン)が入力されていたら、-を削除した文字列に置換してメール送信したいのです。
入力する時に、3つのテキストエリアに分けるのは諸事情でできないので、特定の文字を削除する関数か処理方法がありましたら、教えていただきたいです。
よろしくお願いします。

Aベストアンサー

str_replace
http://itbtech.itboost.co.jp/man/php_man/function.str-replace.html

<?php
$orig_telno = "03-xxxx-xxxx";

$telno = str_replace("-", "", $orig_telno);
echo $telno;

03xxxxxxxx

“PHP 文字列” あたりをキーワードに検索すれば
そんなに難しいものでもないような。

Qテーブルをスクロールさせるときのスクロールの位置

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
 ↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr class="FreezHeader"><th>あ</th><th>か</th><th>さ</th></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
<tr><td>あ</td><td>か</td><td>さ</td></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
</table>
</div>

</body>
</html>
===================================


上記のような HTML を書いた場合,
【下の図】↓の「A」のように表示されます。


「A」のようにではなく
スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。
できれば 【下の図】↓の「B」のような感じで
それが難しいとした場合, 【下の図】↓の「C」のような感じです。

このように表示させる方法を教えていただきたく思います。


IEのみで使えれば良いので,
他のブラウザでの見え方は考えなくて良いです。
ただ,
IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと
なるべく JavaScript の使用は避けて
なおかつ,なるべくシンプルな方法が希望です。

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
 ↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%"...続きを読む

Aベストアンサー

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォルトはall(仕様書ではscreenですが、実装はallになっています。HTML5では allに変更される)

 期待のように表示させるためには、本来はtbodyにoverflowを指定すればよいのですが、これはtable要素には使えないことになっています。(IEにはバグあり使えそうに見えます)
 そのため、スタイルシートでtbodyをblockに変換してやる必要があります。しかしその時点でIEは、tbodyの高さをtrに継承してしまうバグがあります。またスクロールバー自体が表示されません。

 IEで期待通りの表らしき形にしたいのなら、table以外でマークアップしてすべての要素table,thead,tfoot,tbody,tr,td,th,col,cilgroup・・をブロックに下からスタイルシートで配置しなおさないとなりません。
 当然ですが、スタイルシートを読まないブラウザ(テキストブラウザ、点字端末、読み上げソフト、そしてプリンター)や他の端末、検索エンジンには意味が通じないことになります。

 仕方なく、table全体を<div>で囲って、thead部分をfixedで固定する方法も試したのですが、IEのみfixedで位置を決めない場合は影も形も消えうせてしまいます。--もちろん標準ブラウザではきちんと整形されます。

{IEのみで使えれば良いので,}
 は、印刷やその他すべてを犠牲にすれば、表の見出しと本体を別のtableにするなど、文書構造を無視したマークアップ・・あるいは、リストなどでマークアップすることになりますが、決してすべきではない邪道になります。

☆tbodyをscrollさせる方法は下記サイトをご覧ください。
Tableのヘッダ(thead)を固定して、<tbody>内をスクロールさせる方法 » 株式会社ジラフィー(Giraffy) ( http://giraffy.jp/blog/2009/09/11/css/107/ )

 今回は質問ありがとうございます。自分自身よい勉強になりました。IEがクソであることも再確認できたし・(笑)

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォル...続きを読む

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

Qformで特定のinputを送信しないようにしたい

複数のinputを送信時に値をフォーマットに従ってまとめて送信するとき
そのもととなった複数のinputは送信しないようにしたいです
(郵便番号など入力欄を二つにわけるが送信時は一つにまとめるなど)

nameを付けないという方法も考えましたが
radioを含む場合に不都合なのでこの方法はとりたくありません

また送信時にinputを削除するという方法も
ajaxで元のページにとどまることも考えうるので
この方法もとりたくありません

理想はinputに特定の属性値を与えると
form送信時に送信しないようになる
とかだったのですがその方法は見つけられませんでした

クライアントサイドでの処理が難しそうなら
サーバーサイドでの処理にしますが
できれば避けたいと思っています

よろしくお願いします

Aベストアンサー

できないです。
そもそもCGI側に渡すための物ですから
(郵便番号など入力欄を二つにわけるが送信時は一つにまとめるなど)
入力ページから送信された物は一旦CGI側で、
$postcode="120-1135";
とかになって、
<input type="hiidden" name="zip-code" value="120-1135">
・・・・・
<th>郵便番号</th><td class="zip-code">120-1135</td>
とtableか、
<input type="text" name="zip-a" value="120" readonly>-<input type="text" name="zip-b" value="1135" readonly>
とかの再フォーになっているはず。
 <input type="text" name="zip-a" value="120">-<input type="text" name="zip-b" value="1135">
 で修正を受け付けても良い。

>クライアントサイドでの処理が難しそうならサーバーサイドでの処理にしますができれば避けたいと思っています
 これ、根本的に間違っています。
 javascriptなどはユーザー側に制約されるので、可能な限り楽な方法--CGI側で処理すべきです。そのほうが楽です。

できないです。
そもそもCGI側に渡すための物ですから
(郵便番号など入力欄を二つにわけるが送信時は一つにまとめるなど)
入力ページから送信された物は一旦CGI側で、
$postcode="120-1135";
とかになって、
<input type="hiidden" name="zip-code" value="120-1135">
・・・・・
<th>郵便番号</th><td class="zip-code">120-1135</td>
とtableか、
<input type="text" name="zip-a" value="120" readonly>-<input type="text" name="zip-b" value="1135" readonly>
とかの再フォーになっているはず。
 <input t...続きを読む

QonClickとsubmitの処理順序

#過去ログをあたりましたが、自分で納得いく解答がなかったので質問します。

フォームのsubmitボタンにonClickでチェッカーなどの関数を与えた場合、
submitでフォーム内容を送信するのと、onClickで指定されている関数の
どちらが先に処理されるのでしょうか。
(一応、WindowsのIE、ネスケ共々、onClickの処理の後、submitされるようではあります)

function tasikame {
(フォームの内容チェック/中略)
alert("入力されていない項目があります")
}

例えば、このような関数をonClickで起動する場合、フォームに入力されていない
項目があると、警告されます。
この時、submitはどの環境でも起動しないで終わるのでしょうか。
それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

#分かりづらければ、補足しますのでどうぞよろしく。

Aベストアンサー

> 例えば、このような関数をonClickで起動する場合、フォームに入力されていない
> 項目があると、警告されます。
> この時、submitはどの環境でも起動しないで終わるのでしょうか。
> それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

この関数の書き方だと、警告のメッセージボックスが表示され、OK を押すと、フォームの
内容は submit されます。

イベントハンドラでは、false を返すことで、本来の動作をキャンセルすることができます。
ですから、期待する(であろう)動作をするためには、

function tasikame {
 //フォームの内容チェック
  ...

 if ( フォームの内容が正しくなければ ) {
  alert("入力されていない項目があります");
  return false;
 } else {
  return true;
 }
}

というような書き方になります。


人気Q&Aランキング