2011-08-05 29 views
0

は、私は、ファイルがなかった場合は、ボタンを非表示になりますJavaScriptを必要とする入力ファイルの表示/非表示ベース

<input type="file" name="image" id="file"> 

と、このファイル

<input type="submit" value="Upload/Edit picture" name="upload_picture" id="upload_picture" class="btn" /> 

を保存ボタンを持っています選択されたファイルが選択されている場合は、ボタンを表示します。

+0

デザインだけの質問のように:送信ボタンではなく、それを隠しを無効にするほうがよいのではないでしょうか?私はなどを押すことによってまだ表示されていない送信ボタンを提出できると思います。 – Willem

答えて

1
<input type="file" name="image" id="file"> 

<input type="submit" value="Upload/Edit picture" name="upload_picture" id="upload_picture" class="btn" /> 

<script> 
$(function(){ 
    $("#upload_picture").hide(); 
    $("#file").change(function(){ 
     if ($("#file").val() != ""){ 
      $("#upload_picture").show(); 
     } 
     else{ 
      $("#upload_picture").hide(); 
     } 
    }); 
}); 
</script> 

http://sandbox.phpcode.eu/g/6d8cd.php

0

この

$("#file").change(function(){ 
    if(!$(this).val()){ 
     $("#upload_picture").hide(); 
    } 
    else{ 
     $("#upload_picture").show(); 
    } 
}); 
1
$('#file').change(function(){ 
    $('#upload_picture').show(); 
}); 

とフィドル試してみてください:http://jsfiddle.net/xGAVj/

+0

これは期待通りにはうまくいかないでしょう。いくつかのコーナーケースでは、入力フィールドを空にしている間に送信ボタンが表示されることがあります。 – Willem

1

HTML:

<input id="fld" type="file" name="image" id="file"> 

<input id="btn" type="submit" value="Upload/Edit picture" name="upload_picture" id="upload_picture" class="btn" /> 

Javascriptを:

$("#fld").change(function(){ 
     if($(this).val() != "") 
     { 
      $("#btn").toggle(); 
     } else{ 
      $("#btn").toggle(); 
     } 
}); 

実施例:http://jsfiddle.net/saDFC/

+0

例と生活のプレビューありがとう! – Viktors

+0

@Viktors Golubevs問題を受け入れるか、+1しないのですか? –