显示/隐藏提交按钮

仅当一个或两个所需的输入填充值时才显示提交按钮，但如果删除所需的值，提交必须消失。

应该用我认为的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

显示/隐藏提交按钮

回答

相关问题