如何在點擊按鈕時顯示div標籤？

Question

我的程序是上傳一個文件，當我點擊上傳它會調用一個servlet。同樣的上傳頁面包含一些其他字段，當我點擊上傳按鈕時應該顯示。如何調用servlet以及顯示剩餘內容。實際上使用servlet我想在同一頁面上顯示文件內容。

這是我的代碼。

<form class="form-horizontal" name="regist" action="Registration" 
      onsubmit="return validateFile((this))" enctype="multipart/form-data" 
      method="post"> 

      <div class="control-group" class="span12"> 
       <label class="control-label" for="file">Please upload a 
        file:</label> 
       <div class="controls"> 
        <input type="file" name="file"/> 
       </div> 
      </div> 
      <div class="control-group"> 
       <div class="controls"> 
        <button type="submit" class="btn btn-primary">Upload</button> 
       </div> 
      </div> 
     </form> 
    </div> 

<div id="showFrames" style="display:none;"> 

<!-- 
    hidden contents are here --> 

</div> 

和我的劇本是

function validateFile(form) { 
     var fileName = form.file.value; 
     if (!fileName) { 
      alert("No File Selected!!!"); 
      return false; 
     } 
     else 
     { 
      $("#showFrames").show(); 
     } 
    } 

，但它不工作。誰能幫我？感謝

Answer 1

使用jQuery，我會那樣做：

$('.form-horizontal').sumbit(function(e) { 
    if($(this).find('input[type="file"]').val().length) { //check by length 
     $("#showFrames").show(); 
    } else { 
     alert('No file Selected'); 
     e.preventDefault(); 
    } 
}); 

它會使用表單ID，如果你需要有一個以上的形式會更好。

這種方式可以刪除onsubmit屬性。

Answer 2

Replace your as per below 
    <form class="form-horizontal" name="regist" action="Registration" 
     onsubmit="return validateFile(this)" enctype="multipart/form-data" 
     method="post"> 

     <div class="control-group" class="span12"> 
      <label class="control-label" for="file">Please upload a 
       file:</label> 
      <div class="controls"> 
       <input type="file" name="file"/> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls"> 
       <button type="submit" class="btn btn-primary">Upload</button> 
      </div> 
     </div> 
    </form> 
</div>