Question

我们有一个交互式地图，它通过PHP连接到数据库。由于我对javascript很新，我有一些问题。

我们有大约15个文本输入和一个下拉输入。我只提供代码中有问题的部分。

HTML

     <div class="nav nav-sidebar">
       <form action="./action_page.php" method="post">
        <ul class="dropdown-item" id="u3">
          <div data-toggle="buttons">
            <label class ="btn btn-default" style="float:left;">
              <input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
            </label>
            <label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
              <input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
            </label>
          </div>
        </ul>
        <button input type="submit" id="submit-button" class="submit-button" value="Submit">Submit</button>
       </form>
       <button type="button" onclick="test()" class="clear-button">Reset</button>
     </div>

JS

function test(){

  $('input[name="politic"]').prop('checked', false);

}

如果至少1个输入是emtpy，如何禁用“提交”按钮？
我的test（）函数重置了"poltics"的值但仍然选中了Button。我该如何解决这个问题？

我很感激没有获得正常工作的代码，更像是如何开始这个问题的指南，或者如果你想提供代码，我会很感激一些短信解释。

Answer 1

我添加了3个输入字段的示例，这些字段将为空，直到所有字段都被填充..对于无线电，我添加了缺少的类删除，

希望有所帮助，欢呼

编辑：现在试试.. EDIT2：立即尝试：）

function checkallinputs(){
  var ch = false;
  $('form input[type="text"]').each(function(el){
    if( $(this).val() != '' ) ch = true; return false;
  });
  if( ch ){ $('button[type="submit"]').removeClass('disabled'); return true; }
  if(!ch ){ $('button[type="submit"]').addClass('disabled'); return false; }
}

// run this on document.ready or in (function())() self exe block on page
checkallinputs();

$('form input[type="text"]').on( 'change', function(){ checkallinputs(); });
// disable submit
$( 'form' ).on( 'submit', function(){ return checkallinputs(); });
// reset radio ==>remove class
function test(){
  $('input[name="politic"]').prop('checked', false);
  $('input[name="politic"]').parent().removeClass('active');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


       <form action="./action_page.php" method="post">

  <div class="form-group">
    <label for="input1">Input 1</label>
    <input type="text" class="form-control" id="input1">
  </div>

  <div class="form-group">
    <label for="input2">Input 2</label>
    <input type="text" class="form-control" id="input2">
  </div>

  <div class="form-group">
    <label for="input3">Input 3</label>
    <input type="text" class="form-control" id="input3">
  </div>

<div class="checkbox">
         <div data-toggle="buttons">
            <label class ="btn btn-default" style="float:left1;">
              <input type="radio" class="btn btn-default" name="politic" id="politic1" value="2"> Trump
            </label>
            <label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
              <input type="radio" class="btn btn-default" name="politic" id="politic2" value="1"> Hillary
            </label>
          </div>
  </div>

  <button type="submit" class="btn btn-default disabled">Submit</button>
  <br>
  <button type="button" onclick="test()" class="btn btn-default">Reset</button>

</form>

Answer 2

如果至少1个输入是emtpy，如何禁用“提交”按钮？

有几种方法可以完成这项工作。

排名第一：

最简单的方法是在字段中添加必需的属性，除非填写所有必填字段，否则用户将无法提交表单。这不是推荐的方式，因为它取决于浏览器，我相信有解决方法。

<input type="text" name="username" required>

第二名：

另一种方法是为所有输入添加一个onkeyup事件处理程序，它调用一个函数来检查是否所有输入都已填满。默认情况下，您在此处禁用了提交按钮，并且在填写完所有输入后，您可以启用提交按钮。这不是最好的方法，因为用户可能不知道按钮被禁用的原因，除非您专门提供反馈，例如为无效字段设置红色边框。在每个keyup之后运行验证可能对应用程序要求很高。

第三：

我更喜欢和推荐的是这个。您可以保持启用提交按钮，并将其绑定到点击事件，您可以在其中检查您的验证是否得到满足，也就是说，对于您的情况，您检查是否有任何输入是空的，如果一个是空的，那么您不需要提交表单并显示提醒或向用户提供反馈以填写该字段。您可能也想将焦点设置为空字段。

我的test（）函数重置＆＃34; poltics＆＃34;但按钮是仍然选择。我该如何解决这个问题？

你是什么意思＆＃34;按钮仍被选中＆＃34;？重置按钮？如果需要，您可以将焦点设置为您选择的另一个输入

$(.'input-name').focus();

Answer 3

如果至少1个输入是emtpy，如何禁用“提交”按钮？

您只需要跟踪输入的更改事件，如下所示。如果选中了输入，则必须重新启用提交按钮。如果使用重置按钮，则需要禁用提交按钮。默认情况下可以禁用此按钮。

我的test（）函数重置＆＃34; poltics＆＃34;但仍然选择了按钮。我该如何解决这个问题？

当您提供代码时，两位政治家的单选按钮都成功取消选择。

＆＃13;

function test(){

  $('input[name="politic"]').prop('checked', false);
  $('#submit-button').prop('disabled', true);
}

$('input[type="radio"]').on('change', function () {
  // Here we set the button to not disabled if the radio was selected
    $('#submit-button').prop('disabled', !$(this).prop('checked'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav nav-sidebar">
       <form action="./action_page.php" method="post">
        <ul class="dropdown-item" id="u3">
          <div data-toggle="buttons">
            <label class ="btn btn-default" style="float:left;">
              <input type="radio" class="btn btn-default" name="politic" id="politic" value="2"> Trump
            </label>
            <label class ="btn btn-default" style="margin-bottom:10px; margin-right: 20%; float:right;">
              <input type="radio" class="btn btn-default" name="politic" id="politic" value="1"> Hillary
            </label>
          </div>
        </ul>
        <button type="submit" id="submit-button" class="submit-button" value="Submit" disabled>Submit</button>
       </form>
       <button type="button" onclick="test()" class="clear-button">Reset</button>
     </div>

＆＃13;

当所有输入都为空时，取消选择单选按钮和禁用提交

3 个答案: