Question

我想创建一个提交按钮，一旦单击该按钮，它将运行我已完成的功能：disable（），但我想这样做，以便仅在上述输入包含文本的情况下才运行onclick事件。

    <form id="name">
        <p7>Please enter a name for your plan: </p7> <input required>
        <input type="submit" onclick="disable()">
    </form>

因此，如果用户在标签后键入所需的输入，然后单击“提交”，则会禁用它）但是，如果用户仅单击提交而未在所需输入中键入任何内容，则disable（）不会运行

预先感谢

Answer 1

您可以在disable函数的开头验证输入值，如下所示：

function disable() {
    var myInput = document.getElementById("myInput");
    if (!myInput.value.length) {
        alert('empty');
        return;
    }

    alert('fine');
}

<form id="name">
    <p7>Please enter a name for your plan: </p7>
    <input required id="myInput">
    <input type="submit" onclick="disable()">
</form>

Answer 2

如果要使用HTML5验证，请不要使用按钮的click事件，而要使用表单的Submit事件，如下所示：

function disable(e) {
  e.preventDefault() // Not needed, but for the snippet, for the form win't disappear
  console.log('Inside disable().');
}

$('#name').submit(disable);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="name">
  <p7>Please enter a name for your plan: </p7> <input id="input" required>
  <input type="submit">
</form>

我想在JS内验证它，请使用以下代码确定输入字段中是否有值：

function disable() {
  if (!$('#input').val()) {
    return;
  }
  console.log('Inside disable().');
}

$('#button').click(disable);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="name">
  <p7>Please enter a name for your plan: </p7> <input id="input" required>
  <input type="button" id="button" value="Click Me!">
</form>

Answer 3

您也可以在没有输入的情况下禁用按钮本身，因为不需要按钮。您需要在输入框字段上添加禁用功能。

在输入框上添加了 onkeyup 事件以跟踪更改。

disable()
function disable(){
  if($("#input").val()!=""){
    $("input[type=submit]").attr("disabled", false);
    //your own code here!! 
  }
  else{
    $("input[type=submit]").attr("disabled", true);
    return;  //do nothing and return back.
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="name">
      <p7>Please enter a name for your plan: </p7> 
      <input onkeyup="disable()" value="" id="input" required>
      <input onclick="disable()" id="submit" type="submit">   
</form>

仅当输入了输入时才运行onclick事件

3 个答案: