みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

formのtextの文字色を変えたい

JavaScriptで1page目で指定したパラメータを2page目で別のフォーム内のtextボックスに記入する際、他にも作るテキストボックスと違う文字色にしたいのですが、方法が判りません。そもそもそんなことできないのでしょうか?
------- 1page目 -------
<html>
<head>
<title>別ページのフォームにパラメータを送る</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5" width="80">
<tbody><tr>
<td align="center">
<input type="button" onClick="location.href='form2.html?No.001'" value="セット"></td>
<td align="center">
<input value="閉じる" onClick="window.close()" type="button"> </td>
</tr>
</tbody>
</table>
</body>
</html>

----- 2page目 -----
<html>
<head>
<title>別ページからのパラメータをフォームに書き込む</title>
<script language="JavaScript">
<!--
function pdata()
{
para= location.search;
para = para.substr(1,6);
document.myform.number.value=para;
}
//-->
</script>
</head>
<body onLoad="pdata()">
<table border="1" cellpadding="2" cellspacing="2" width="150">
<tbody>

<form name="myform" method="post">
<TR>
<TD >番 号</TD>
<TD ><input name="number" type="text" id="番号" size="15" /></TD>
</TR>
</form>
</tbody>
</table>
</body>
</html>

投稿日時 - 2008-09-28 11:38:46

QNo.4362301

困ってます

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

<html>
<body>
<form action="test1.html" method="post" onSubmit="hoge()">
<p>
<input type="text" id="a" value="abcde"><br>
<input type="text" id="b" value="aiueo"><br>
<input type="submit">
</p>
</form>
<script>
window.onload=function(){
saveCookie('a','',1); saveCookie('b','',1);
}
function hoge(){
saveCookie('a',document.getElementById('a').value,1);
saveCookie('b',document.getElementById('b').value,1);
return true;
}
function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();}
</script>
--------------
<html>
<head><style>.col1{color:#f00}</style></head>
<body>
<form submit="test1.html" onSubmit="hoge()">
<p>
<input type="text" id="a" value="abcde"><br>
<input type="text" id="b" value="aiueo"><br>
<input type="submit">
</p>
</form>
<script>
window.onload=function(){
var v;
document.getElementById('a').className=(v=loadCookie('a'))?'col1':''; document.getElementById('a').value= v;
document.getElementById('b').className=(v=loadCookie('b'))?'col1':''; document.getElementById('b').value= v;

}
function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();}
function loadCookie(vn){ var r = '',o = document.cookie.split('; '); for (var i in o){ var c = o[i].split('='); if (c[0]==vn && c[1]!=''){ r = c[1]?unescape(c[1]):'';break; }} return r;}
</script>

投稿日時 - 2008-09-28 15:06:40

お礼

_pipi_さん

回答有難うございました。
難しいスクリププトをいただきました。これから解読させていただきます。とりあえずお礼まで。

投稿日時 - 2008-09-28 23:35:36

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

受け渡しにはクッキーを使ってます
saveCookie(vn,v,dy)のvnは変数の名前、vは変数の値、dyが保存期間
loadCokkie(vn)で変数の名前の値を読み出します

もし渡されたデータがnull以外だったら赤色に変える
if(para=='') document.getElementById('a').style.color='#f00';

サンプルは、データの受け渡しがあれば、スタイルシートで
classNameをcol1(赤)にしてます。

あと自分のミス発見
2つめのHTMLでフォームの
<form submit="test1.html" onSubmit="hoge()">
のsubmit="test1.html"は意味がありません
なくして、idでもふってください

投稿日時 - 2008-09-29 06:32:54

お礼

_pipi_さん

No.4の補足説明有難うございました。クッキーでお受け渡し方法参考になりました。有効期限付きでの受け渡し方法までできることがわかり大変参考になりました。

渡されたデータの内容で色変えをする条件文なども大凡理解できました。もう少し自分の中で、理解を深め自分の応用例に組み込んで見たいと思っています。有難うございました。
フォーム内で、単純に特定のテキスト欄などの文字フォント、色、背景色などはstyleでHTMLでも処理できるのでそちらの方法とも組み合わせて行こうと考えています。

投稿日時 - 2008-09-30 10:49:40

ANo.2

javascirptでパラメータの受け渡しをするのであれば、
(1)getでlocation.searchをつかう
(2)hash値をつかう
(3)クッキーをつかう

などあると思いますが、どれも中途半端。
やはりデータの受け渡しにはgetやpostをつかったサーバーサイドの
プログラムを利用するのが賢明です

投稿日時 - 2008-09-28 13:25:32

お礼

yambejpさん、
回答にお礼を申し上げます。

質問にも書かせていただきましたが、パラメータの引渡しについては、URL上に丸見えになりますが、この方法で引き渡すことで問題意識は持っていません。これでOKと思っています。質問のポイントはこの引き渡された「?=no.001」から「no.001」を抽出してフォームのテキスト内に指定した色で書き込む方法が考えつかなくてお知恵を駆りたくて質問したのです。例示したスクリプトで黒色であればテキスト欄内に「no.001」は書き込まれているかと思います。この色を黒でなく指定した色にしたいのです。他のテキスト欄は黒色でよく、パラメータとして引き渡されたものだけを識別できるように色を変えたいのです。お分かりいただけますでしょうか?

投稿日時 - 2008-09-28 23:28:56

ANo.1

JavaScriptだけで、別のページに情報を引き継ぐとことは出来ないので、サーバー側で何とかするしかないです。

投稿日時 - 2008-09-28 12:31:28

お礼

notnotさん

回答有難うございます。パラメータの引渡しの方法については例示したスクリプトで満足しています。質問は引き渡されたパラメータをフォームのテキスト欄に色を指定して表示する方法についてなんです。質問の仕方が悪かったのかもしれません。

投稿日時 - 2008-09-28 23:32:23

あなたにオススメの質問