JavaScript：如果輸入字段為空，則隱藏按鈕鏈接

Question

每當輸入字段（id =“ valagency”）為空時，我都試圖隱藏按鈕鏈接（id =“ btnsubmit”），以便我的用戶只能在輸入字段中填充了一些數據后單擊按鈕。

對於html部分，我有

<tr>
 <td class="tbldatastart">
  <input type="text" id="**valagency**" name="agencyname<%= strAgencyId %>" class="btn10" readonly> 
  <input type="text" name="agencyid<%= strAgencyId% >"> 
  <a href="javascript:Map('<%= strAgencyId %>');" class="btn1">Map</a>
 </td>
</tr>

<tr>
 <td colspan="2"></td>
 <td><a href="javascript:Submit()" id="btnsubmit" class="btn1">Submit</a></td>
</tr>

對於javascript，我有

function Submit() {

  $("#valagency").keyup(function(){
    if($(this).val()) {
        $("#btnsubmit").show();
    } else {
        $("#btnsubmit").hide();
    }

  });
}

提交按鈕仍然存在。 我不知道我在哪里做錯了。 請幫忙。

提前致謝。

Answer 1

您正在調用函數Submit，此時將執行啟用禁用按鈕代碼。

您需要獨立使用該代碼，而不是在提交呼叫時使用。

將以下代碼置於提交功能之外：

$("#valagency").keyup(function(){
    if($(this).val() == "") {
        $("#btnsubmit").show();
    } else {
        $("#btnsubmit").hide();
    }
});

如果要禁用“提交時提交”按鈕，請單擊使用keyup事件后如何進行。

如果要在“提交”按鈕上單擊，則需要使用keyup 。

如果你想使用keyup那么代碼將是外界的submit功能。

Keyup不適用於粘貼要輸入的數據。 為此，請考慮以下示例。

<input type="text" name ="mytxt" id="mytxt"> 
<a href="#" id="btnsubmit" class="btn1">Submit</a>


$('input[name=mytxt]').change(function() { 
if($(this).val() == "") {        
        $("#btnsubmit").hide();
    } else {
        $("#btnsubmit").show();
    }
});

如果要在頁面加載時隱藏按鈕，則可以使用https://jsfiddle.net/kurbhatt/m06yywmn/2/

Answer 2

問題是您在單擊提交按鈕時正在運行keyup()函數。 這將永遠不會執行。 只需將您的keyup()函數移到此按鈕單擊之外即可。 您還需要默認隱藏#btnsubmit 。

這是一個最小的示例：

 $("#btnsubmit").hide(); $("#valagency").keyup(function() { if ($(this).val()) { $("#btnsubmit").show(); } else { $("#btnsubmit").hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="valagency"> <a href="#" id="btnsubmit" class="btn1">Submit</a> 

希望這可以幫助！ :)

Answer 3

代替keyup事件，使用change事件獲取輸入字段的最終值並檢查其是否為空。

Answer 4

它僅與輸入keyup事件相關，因此如果要檢查輸入的值以隱藏/顯示按鈕。 通過“提交”使其獨立，應在“提交”之前隱藏/顯示。

function submit() {
  //do something
}
$("#valagency").keyup(function(){
  if($(this).val() == "") {
      $("#btnsubmit").show();
  } else {
      $("#btnsubmit").hide();
  }
});