TopJavaScriptjQuery > 2012年1月
2012年1月24日

フォームの<input type="file" />の値をjQueryでリセット(クリア)する方法

January 24,2012 1:55 AM
Tag:[]
Permalink

フォームの<input type="file" />の値をjQueryでリセット(クリア)する方法を紹介します。

jQueryでリセットする

1.問題点

フォームの値をリセット(クリア)する場合、通常はtype属性が「reset」のボタンですべてクリアできます。<input type="file" />の値も同様にリセットされます。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" />
    <input type="reset" value="リセット" />
</form>
サンプル1

JavaScript(jQuery)でリセットしたい場合、次のように記述すればいいように思われます。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" id="file" />
    <input type="button" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
    $('#file').val('');
});
</script>
サンプル2

Firefoxやchromeでは期待する動作になるようですが、IEではブラウザの仕様(セキュリティ?)で、type属性「file」の値を書き換えることができないようです。

2.値をクリアする方法1

クロスブラウザでtype属性「file」の値をクリアするには、次の方法で実現できます。厳密にはクリアではなく、replaceWith()で要素を置き換えています。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" id="file" />
    <input type="button" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
    $('#file').replaceWith('<input type="file" id="file" />');
});
</script>
サンプル3

3.値をクリアする方法2

2項よりHTMLマークアップがやや冗長になりますが、次の方法でもクリアできます。

HTML

<form id="bar" action="foo.cgi">
    <span id="file"><input type="file" /></span>
    <input type="button" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
    $('#file').html($('#file').html());
    // または $('#file').html('<input type="file" />');
});
</script>
サンプル4

4.resetボタンでクリアする

本題からそれますが、type属性「reset」のボタンでファイルアップロードフィールドのみをリセットする場合は次のようにします。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" id="file" />
    <input type="text" id="text" />
    <input type="reset" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=reset]').click(function(){ 
 
    // resetボタンのデフォルト動作(フォーム全体のクリア)を抑止
    e.preventDefault(); 
    $('#file').replaceWith('<input type="file" id="file" />');
});
</script>
サンプル5

preventDefault()を利用して、リセットボタンのデフォルト動作(=全フィールドのリセット)を無効にして、ファイルアップロードフィールドのみをリセットします。

Comments [0] | Trackbacks [0]
2012年1月18日

onsubmitの戻り値をfalseにしてsubmitを実行しない(中断させる)方法

January 18,2012 2:22 AM
Tag:[, ]
Permalink

JavaScriptで、onsubmitの戻り値をfalseにしてフォームのsubmitを中断させる(実行しない)方法を紹介します。

1.onsubmitイベントとは

onsubmitイベントは、フォームの送信ボタン(type属性がsubmitのボタン)がクリックされた時に発生するイベントです。

<form method="post" action="foo.cgi" onsubmit="foo();">
  <input type="text" value="" />
  <input type="submit" value="送信" />
</form>

2.submitを中断する(=フォームを送信しない)方法

onsubmitイベントを使ってsubmitを中断するケースとして、送信時にJavaScriptでフォームのチェックをして、フォームデータに未入力の項目がある場合、「return false;」で送信を中止するというパターンがあると思いますが、中止したはずのに送信が実行されてしまうということがあります。

次のソースコードはその例で、未入力の項目がある場合に「return false」を行ってますが、送信は中断されません。

<script type="text/javascript">
function check() {
    for(i = 0; i < document.foo.length; i++) {
        if (document.foo.elements[i].type == "text") {
            if (document.foo.elements[i].value == '') {
                 alert("未入力の項目があります。");
                 return false;
            }
        }
    }
}
</script>
<form name="foo" action="foo.cgi" onsubmit="check();">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

原因は、赤色で示したform要素のonsubmit属性の記述が誤っているためです。

送信を中止するためには、onsubmit属性で起動した関数の返却値(false)をさらに返却する必要があります。つまり、

onsubmit="関数名"

ではなく、

onsubmit="return 関数名"

としなければなりません。

また、常に送信を中止したい場合は、

onsubmit="関数名; return false;"

と書けばよいでしょう。

先程のサンプルでは、次の青色部分のように修正すれば送信を中止します。

<script type="text/javascript">
function check() {
    for(i = 0; i < document.foo.length; i++) {
        if (document.foo.elements[i].type == "text") {
            if (document.foo.elements[i].value == '') {
                 alert("未入力の項目があります。");
                 return false;
            }
        }
    }
}
</script>
<form name="foo" action="foo.cgi" onsubmit="return check();">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

「true」はonsubmitイベントのデフォルト返却値なので、OKの場合に「return true;」を明示的に記述する必要はないと思います。

3.jQueryでの記述

jQueryで記述する場合は、次のようになるみたいです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#foo').submit(function(){
        var flag = 0;
 
        // フォームチェック
        $(this).find('input[type=text]').each(function(){
            if ($(this).val() == '') {
 
                // NGの場合
                flag = 1;
                return false; // break
            }
        });
        if (flag) {
            return false; // return
        }
    });
});
</script>
<form id="foo" action="foo.cgi">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

青色で示した、submit()ブロック内で「return false;」をすればフォームの送信を中止するようです。

each()ブロック内の赤色で示した「return false;」は、each()のループを脱出しているだけなので、間違えないように注意しましょう。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3