• ベストアンサー

form内のinputタグのみロックする方法

早速ですが質問いたします。 JavaScriptでform内のinputタグのみロックさせたいのですが、そんなことは可能でしょうか? JavaScriptについて初心者ですので、ご教示のほど、よろしくお願いいたします。

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

  • ベストアンサー
noname#199778
noname#199778
回答No.2

inputタグのみロックすると言う意味が少々つかみにくいところがありますが、Javascriptからは、document.forms["form要素のname"].elements["フォーム部品のname"]というプロパティを参照すれば、特定のフォーム部品にアクセスすることができますので、これを利用してやれば良いと思います。 具体的には、 document.forms["form1"].elements["input1"].disabled= true; と言う処理で、name属性にform1と言う値をもつフォーム内の、name属性にinput1と言う値をもつフォーム部品を使用不可にすることができます。 もし、その特定のフォームに含まれるフォーム部品を、一度にすべて使用不可にしたい場合は、 for (i=0; i<document.document.forms["form1"].elements.length; i++){ document.forms["form1"].elements[i].disabled= true; } と言う処理を走らせれば、一挙にすべてのフォーム部品を使用不可にできます。 特定の種類のフォーム部品のみをまとめて使用不可にしたい場合は、document.forms["form1"].elements["input1"].typeでそのフォーム部品のtypeを取得できますので、それを利用して使用不可にする要素を振り分けることができます。 下記は、type="text"のinput要素のみをすべて使用不可にする処理です。 for (i=0; i<document.document.forms["form1"].elements.length; i++){ if (document.forms["form1"].elements[i].type=="text"){ document.forms["form1"].elements[i].disabled= true; } } こういった処理をJavaScriptの処理の中に織り込めば、ご希望の動作になるのではないかと思います。 参考になれば…

その他の回答 (1)

  • spnk55
  • ベストアンサー率29% (11/37)
回答No.1

DOMを使って、inputタグの数だけfor文でまわして、 inputタグを使用不可にするやり方でどうでしょうか? IEやNNで動作OKと思いますが、DOMに対応していない 古いブラウザバージョンだとNGですね・・・。 function Func(){ for(i=0; i<document.getElementsByTagName("input").length; i++){ document.getElementsByTagName("input")[i].disabled="true"; } }

関連するQ&A

  • FORMのINPUTタグについて

    FORMタグ内のINPUTタグで例えばボタンを作成した場合。 そのボタンを押すと他のURLへリンクするという動作は出来るのでしょうか? CGIを使わないで、HTMLのみで出来るのでしょうか。? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • inputタグはformタグで必ず囲む必要がありますか?

    <input type="text">や< input type="button">などのinputタグは、入力欄に入力されたデータを他のファイルに送らずに同ファイル内で処理する場合も、必ず<form></form>で囲む必要があるのでしょうか? 例えば、<input type="text" id=”background_color”>に色(例:赤、青等)を入力し< input type="button" value=”変更” onClick=”change_background()”>ボタンを押すと、バックグラウンドの色が入力された色に変わるようなコードを書くとします。Javascript(change_background())の内容は同ファイルの<header></header>内に記述しますが、ここでは関係ないので割愛します。 この場合、 <body> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </body> で良いのでしょうか? それとも <body> <form> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </form> </body> とする必要が、ありますか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 【htmlタグ】inputタグの書き方について

    現状は <input type="text">のテキスト入力エリアが存在します。 それを<form>タグで囲い、 <input type="button">のボタン押下にてform内容を送信していますが、 ボタンではなく、<a>タグのように、ハイパーリンクのような見た目にしてform内容を送信したいです。 どのように修正すればよろしいのでしょうか。宜しくお願いします。

    • ベストアンサー
    • HTML
  • HTML?JavaScript?  INPUTタグ内の文字をハイライト

    HTML?JavaScript?  INPUTタグ内の文字をハイライトさせたい 下記画像のように、formタグ中にある、Inputタグ内の文字をそれぞれカラフルにハイライトさせたいのですが、その方法が分かりません。HTMLかJavaScriptを使えばできるのかも分かりません。 どのようにすれば良いかどなたか教えていただけないでしょうか?宜しくお願い致します。 なお、下記のようにやってはみたものの、submitでタグも送信してしまいますし、タグがそのまま表示されてしまい、イメージする様にはなりませんでした。 <form action="~"> <input value="<span style=background-color:#ffff00>Input</span> <span style=background-color:blue>文字</span> <span style=background-color: pink>ハイライト</span>"> <input type=submit> </form>

  • <form>タグを使って...

    <form>タグを使ってWEB拍手を作りたいんです。 よくJavaScriptで作るメールフォームがあるじゃないですか? それを応用して、一言メッセージみたいなのを作りたいんです。 JavaScript、PHPの知識はないので、タグを記載して頂けると幸いです。

  • value文のないInputタグ

    Inputタグの内容を送信したいのですが、 例えば、フォームF1のテキストエリアT1に、 document.F1.T1.value = "テスト"; として、JavaScript側から値(value)を指定します。 この場合、 <form method="post" name="F1"> <input type="text" name="T1"> </form> とするだけで、ブラウザに、「テスト」と表示させられますよね。 しかし、Inputタグの中に「value」の値が無いため、 他のURLに、テキストエリア「T1」の内容を送信することができません。 このようにJavaScript側から値(value)を指定したInputタグの値を送信する方法について教えてください。

  • <form>タグに2つのボタン

    <form>タグで2つのボタンを表示させ、以下のようにそれぞれのボタンで フィールドに別の値を入れて送信させることはできますでしょうか? できればHTMLで、できなければJavaScriptでできますでしょうか? ・button1を押したときは  フィールド「CASE」に1を入れて送信、  HTMLで書くと、<input type="hideen" name="CASE" value="1"> ・button2を押したときは  フィールド「CASE」に2を入れて送信、  HTMLで書くと、<input type="hideen" name="CASE" value="2"> ===== HTML ====================== <form action="test.cgi" method="post"> <input type="text" name="text1"> <input type="submit" value="button1"> <input type="submit" value="button2"> </form> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • <form>タグ内の再読み込みに関して

    以下のようなhtmlファイルがあったとします。 ※<body>タグ内以外は省略 ------------------------------------------------- <body onload="bodyload()"> <form> <input id="id_button1" type="image" value="button" name="n_button1" onclick="click();"> </form> </body> ------------------------------------------------- 呼び出されるjavascriptを以下の通りとします ------------------------------------------------- function bodyload() { document.getElementById('id_button1').src = '/images/base.png' } function click() { document.getElementById('id_button1').src = '/images/1.png' } ------------------------------------------------- id_button1のクリックによって、click()が動作し画像が「/images/1.png」に変更されるのですが、 一瞬で「/images/base.png」に戻ってしまいます。色々試したところhtmlファイルの<form>タグを 消してやれば「/images/base.png」に戻ることなく画像を変更することが可能であることに気づき ました。 どうやらformタグがあると再読み込みが行われているようです。 formタグがあると何故このような動きをするのでしょうか? formタグ内でも再読み込みの有無を 制御することはできないのでしょうか?お分かりになる方がいらっしゃればご教授いただければ と思います。 javascriptというよりhtmlの内容かもしれませんがよろしくお願いいたします。 なお、実行環境はWindows8Pro、VisualStudio2012、Windowsストアアプリ開発プロジェクト内のデバッグです。

  • 2つのFormタグの動作について

    同じページに2つのFormタグを設置したいと考えています。ページが長いため、上部と下部それぞれにFormタグを設置したいと考えています。 <form name="upForm" action="xxx.cgi" method="post"> <input type="text" name="name1"> <input type="submit" value="送信"> </form> --------------- 他の処理 --------------- --------------- 他の処理 --------------- --------------- 他の処理 --------------- <form name="downForm" action="xxx.cgi" method="post"> <input type="text" name="name1"> <input type="submit" value="送信"> </form> 下のFormの送信ボタンを押すと、上のFormが動作しているようで、下のFormの入力値が反映されません。それぞれのFormをそれぞれの送信ボタンで動作させる方法につきまして、ご存知の方がいましたらぜひ教えていただきたいと思います。 よろしくお願いいたします。

    • ベストアンサー
    • CGI
  • HTMLのinputタグ数が変わる場合のjavascript処理

    パターンA ~HTML~ <input type='text' name='a[]'> <input type='text' name='a[]'> ~JavaScript~ var n = document.form1.elements["a"][0].value ; var n = document.form1.elements["a"][1].value ; パターンB ~HTML~ <input type='text' name='a[]'> ~JavaScript~ var n = document.form1.elements["a"][0].value ; ---(1) パターンAではエラーが出ないのですが、パターンBでは(1)のところでエラーになってしまいます。 【elements["a"][0]】の部分を【elements["a"]】とすればエラーは出ません。 どうやら、inputタグが1つしかない場合は、Javascriptでは配列として認識しないようです。 できれば、inputタグが1つの場合でも複数の場合でも、同じJavascriptコードを使いたいのですが、何か良い方法はありますか?

専門家に質問してみよう