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


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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/31 10:44:23
  • 終了:2011/01/07 10:45:04

回答(3件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932010/12/31 11:48:12

ポイント27pt

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");

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

id:rikuba No.2

rikuba回答回数26ベストアンサー獲得回数122010/12/31 12:35:19

ポイント27pt

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");
  });
});
id:Galapagos No.3

Galapagos回答回数963ベストアンサー獲得回数892010/12/31 16:44:32

ポイント26pt

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>
  • id:Cherenkov
    質問文にあるコードの$(this).attrの部分を
    this.type = "hidden";
    にするだけでよかったです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません