顯示/隱藏提交按鈕

僅當一個或兩個所需的輸入填充值時才顯示提交按鈕，但如果刪除所需的值，提交必須消失。

應該用我認爲的keyup來完成。有什麼想法？

2009-12-18 Henry

不太確定這一點，但如果你隱藏提交按鈕並按回車鍵，表單是否仍然會發布？您最好在提交時驗證表單，而不是完全阻止提交。 – Paddy 2009-12-18 09:25:09

@ Paddy：你說得對。如果按下「Enter」，即使字段留空，表單仍然會發布。爲了防止這種情況發生，我在下面編輯了我的答案。 – BenTheDesigner 2009-12-18 09:58:07

下面的功能應該幫助你：

$(function(){ 
    // Hide submit button if either field is empty 
    $('form input').keyup(function(){ 
     if($('#input1').val() == "" || $('input2').val() == ""){ 
      $('#submit').hide(); 
     } 
     else { 
      $('#submit').show(); 
     } 
    }); 
    // Don't submit form if either field is empty 
    $('form').submit(function(){ 
    if($('#1').val() == "" || $('#2').val() == ""){ 
     return false; 
    } 
    }); 
});

順便說一句，你需要使用CSS（display:none）最初隱藏你的提交按鈕。

來源

2009-12-18 09:10:43 BenTheDesigner

在不以基本javascript參考：

<input type="text" id="input-1" onkeyup="submitChange();" /> 

<input type="text" id="input-2" onkeyup="submitChange();" /> 

<input type="submit" id="submit" style="display: none;" /> 

<script type="text/javascript"> 

inputOne = document.getElementById("input-1"); 
inputTwo = document.getElementById("input-2"); 
inputSubmit = document.getElementById("submit"); 

function submitChange() 
{ 
    if(inputOne.value == "" || inputTwo.value == "") 
    { 
      inputSubmit.style.display = "none"; 
    } 
    else 
    { 
      inputSubmit.style.display = "block"; 
    } 
} 

</script>

來源

2009-12-18 09:01:41 Thys

如果表單有很多字段，那麼它必須是動態的 – sathish 2009-12-18 09:04:28

這個問題的標記jQuery ... – munch 2009-12-18 09:08:14

既然他說了兩個，我做了一個腳本，處理兩個 – Thys 2009-12-18 09:12:17

$('#inputid').keyup(function() { 
    if ($(this).val().length > 0) { 
     $('#submitbutton').show(); 
    } else { 
     $('#submitbutton').hide(); 
    } 
});

多個：

$('#inputid1,#inputid2, etc...').keyup(function() { 
    var hidden = false; 
    $('#inputid1,#inputid2, etc...').each(function() { 
     if ($(this).val().length == 0) { 
      hidden = true; 
     } 
    }) 
    if (hidden) { 
     $('#submitbutton').hide(); 
    } else { 
     $('#submitbutton').show(); 
    }

}）;

來源

2009-12-18 09:02:35

這隻適用於使用jQuery – Thys 2009-12-18 09:04:45

當然，但由於海報標籤與jquery的問題，我認爲這是正常的。 – 2009-12-18 09:08:06

我的錯誤，忘了檢查標籤：P – Thys 2009-12-18 09:11:11

爲什麼不看看onblur。

onblur Event

當對象失去焦點時發生onblur事件。

來源

2009-12-18 09:04:27

當輸入字段不爲空時激活按鈕時，會更方便用戶使用。否則，你不會給予用戶足夠的迴應，他/她認爲該表單仍然被禁用。 – nemisj 2009-12-18 09:06:16

onblur事件可以使用java腳本來檢查必需的字段，並根據需要*啓用/禁用*按鈕。 – 2009-12-18 09:07:41

我的意思是，只有當您離開輸入字段時纔會顯示窗體響應。這意味着，在輸入用戶仍然「處於恐慌狀態」的時刻，爲什麼他的表單按鈕被禁用。 – nemisj 2009-12-18 09:18:17

我建議在窗體本身使用一個事件處理程序，並檢查所有必填字段。爲了讓它更抽象一點，如果你可以用一些屬性標記你的輸入，這將是很好的。示例解決方案如下：

$('#formNode').keyup(function(e){ 
      var invalid = false; 
      $(this).children().each(function(i,child){ 
       if(($(child).attr("isReq") == "true") 
        && child.value.length == 0 
       ){ 
        invalid = true; 
       } 
      }); 
      $("#submitButton")[invalid ? "hide" : "show"](); 
}); 




    <form id="formNode"> 
      <input type="text" isReq="true"/> 
     <input type="text" isReq="true"/> 
     <input type="text" isReq="true"/> 
     <input type="submit" value="Submit" style="display:none" id="submitButton"/> 
    </form>

正如你所看到的，要檢查節點每一次，你只應與屬性isReq標記它和腳本將完成它的工作適合你。

來源

2009-12-18 09:20:59 nemisj

顯示/隱藏提交按鈕

回答

相關問題