人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jqueryで、inputにtypeをhiddenに変更する場合の方法を教えて下さい。

下記のように記述しているのですが変更できません。
◆javascript
$(function(){
$("form").submit(function(){
$(":text").each(function(){
$(this).attr("type","hidden");
})
})
})

◆html
<input type="text" name="name" />

●質問者: ナカシマ
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript jQuery 記述
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Cherenkov
●27ポイント

Vista, Firefox3.6.13とChrome8で動作確認。

jQueryからでは例外エラーが出るので無理だと思います。(uncaught exception: type property can't be changed)

直接やればtypeを変えることが出来ました。

デモ:

http://jsfiddle.net/7bAfa/

<script>
onload = function() {
 document.getElementsByTagName('form')[0].addEventListener('submit', function(e) {
 var text = document.querySelectorAll('[type="text"]');
 for(var i=0, n=text.length; i < n; i++) {
 text[i].type = "hidden";
 }
 e.preventDefault(); //動作確認の為イベントキャンセル
 },false);
 }
</script>
<form>
 <input type="text" name="name"/>
 <input type="submit"/>
</form>

普通type="text"をhiddenに変えるようなことはしないと思うのですが、単純に不可視にしたいのなら

$(this).css("display","none");

でできます。要素を増やしたくなくてやってるのならトリッキーですね。


2 ● rikuba
●27ポイント

type属性の変更は、jQueryがエラーとして処理します(jQuery-1.4.4.jsの1738行目?)。

jQueryのAPIを介さずに

$(':text').each(function () {
 this.type = 'hidden';
});

と書くこともできますが、jQueryのコメントにもあるようにIE8以下はinput要素のtype属性を後から書き換えることができず、エラーが発生します。

代替案として、要素を差し替えるという手があります。

$(":text").replaceWith(function () {
 var $this = $(this);
 var name = $this.attr('name');
 var value = $this.val();
 var hidden = $('<input type="hidden">');
 if (name) hidden.attr('name', name);
 if (value) hidden.val(value);
 return hidden;
});

念のため。送信ボタンを押した後は入力フィールドを編集させたくないということでしたら、入力フィールドを編集不可(disabled="true")にすればよいと思います。

$(function(){
 $("form").submit(function (e) {
 $(":text", this).attr("disabled", "true");
 });
});

3 ● Galapagos
●26ポイント

replaceWithを使って要素ごと置き換えてやります。

下記のようにしてみて下さい。

type="text"属性をすべてhiddenに変えたいのであれば、

$("input[name='name1']")

$("input:text")

としてください。

<html>
<head>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
 $("input[name='name1']").replaceWith('<input type="hidden" name="name1" />'); 
});
-->
</script>
</head>
<body>
<form>
ほげ<input type="text" name="name1" /><br />
およ<input type="text" name="name2" />
</form>
</body>
</html>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ