Question

简单形式，可选择菜单或输入文字。

一切都在发挥作用。但是，我正在尝试禁用提交按钮，直到使用输入选项。

我无法在jquery中正确读取变量值，我不知道为什么。

$(document).ready(function() {

var allThere = false; //stop
	
//Either pick an item....
$('#selmen').on('change', function() {
  $('#theName').slideUp(300);
		
    var theVal = $(this).val();
    if (theVal) {
    console.log('Select value = ' + theVal);
    allThere = true; //go
    console.log('innerSelect = ' + allThere);
    } 
});

//Or type new....
$("#theName").on("keyup", function(){
    $('#selmen').slideUp(300);

    if ($('#theName').val() != '') {
    console.log('key value = ' + $(this).val());
    allThere = true; //stop
    console.log('innerName = ' + allThere);
    }
});
				
//check the variable...
//This reports FALS always
if (allThere == false) {
    $("#newsub").attr("disabled", "disabled"); //stop
    console.log('Base allThere = ' + allThere);
} else {
     $("#newsub").removeAttr("disabled"); //go
     console.log('Base allThere = ' + allThere);
}		

}); //end doc ready

body { margin: 50px; }
input { display: block; margin: 10px 0;}
#newsub { background: #a00; color:#fff; border: none; padding: 10px 20px; text-align: center;}
#newsub:disabled { background: #333; color:#ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selmen" id="selmen" class="drop">
<option value="">Pick One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="theName" />
<input type="sumbit" name="newsub" id="newsub" value="ADD" />

如果操作正常，则在选择或输入值时，提交按钮应变为红色。

控制台显示在函数中更新的变量。但是，由于一些神秘的原因，该变量未在底部if / else语句中读取。

我错过了什么？

编辑：

其他信息......

表单通过ajax加载。我基本上有：

$('#formload').on('click', function() {
    $('#mainformholder').slideToggle();
    $('#mainform').load('_core/inc/mainform.php', function() {
      //The snippet above
    });
});

因此，移动到document.ready()函数之外的函数也存在问题。（至少对我来说）

Answer 1

好吧，因为您只是在加载文档时检查allThere的值。每次事件发生时，您都必须再次检查：

$(document).ready(function() {

  var allThere = false; //stop

  //Either pick an item....
  $('#selmen').on('change', function() {
    $('#theName').slideUp(300);

    var theVal = $(this).val();
    if (theVal) {
      console.log('Select value = ' + theVal);
      allThere = true; //go
      console.log('innerSelect = ' + allThere);
      checkValidity(allThere);
    }
  });

  //Or type new....
  $("#theName").on("keyup", function() {
    $('#selmen').slideUp(300);

    if ($('#theName').val() != '') {
      console.log('key value = ' + $(this).val());
      allThere = true; //stop
      console.log('innerName = ' + allThere);
      checkValidity(allThere);
    }
  });

  checkValidity(allThere);

  function checkValidity(allThere) {
    //check the variable...
    //This reports FALS always
    if (allThere == false) {
      $("#newsub").attr("disabled", "disabled"); //stop
      console.log('Base allThere = ' + allThere);
    } else {
      $("#newsub").removeAttr("disabled"); //go
      console.log('Base allThere = ' + allThere);
    }
  }

}); //end doc ready

body {
  margin: 50px;
}

input {
  display: block;
  margin: 10px 0;
}

#newsub {
  background: #a00;
  color: #fff;
  border: none;
  padding: 10px 20px;
  text-align: center;
}

#newsub:disabled {
  background: #333;
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selmen" id="selmen" class="drop">
<option value="">Pick One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="theName" />
<input type="sumbit" name="newsub" id="newsub" value="ADD" />

Answer 2

感谢@AVAVT这是我的整体解决方案：

$(document).ready(function() {

  var flds = 0; //count

  //Either pick an item....
  $('#selmen').on('change', function() {
    $('#theName').slideUp(300);

    var theVal = $(this).val();
    if (theVal) {
      console.log('Select value = ' + theVal);
      flds++; //go
      checkValidity(flds);
    }
  });

  //Or type new....
  $("#theName").on("blur", function() {
    $('#selmen').slideUp(300);

    if ($('#theName').val() != '') {
      console.log('key value = ' + $(this).val());
      flds++; //go
      checkValidity(flds);
    }
  });

  //Or type new....
  $("#other").on("blur", function() {
    if ($('#other').val() != '') {
      console.log('key value = ' + $(this).val());
      flds++; //go
      checkValidity(flds);
    }
  });

  checkValidity(flds);

  function checkValidity(flds) {
    if (flds < 2) {
      $("#newsub").attr("disabled", "disabled"); //stop
      console.clear();
      console.log('Base fld count = ' + flds);
    } else {
      $("#newsub").removeAttr("disabled"); //go
      console.clear();
      console.log('Base fld count = ' + flds);
    }
  }

}); //end doc ready

body {
  margin: 10px;
}

input {
  display: block;
  margin: 10px 0;
}

#newsub {
  background: #a00;
  color: #fff;
  border: none;
  padding: 10px 20px;
  text-align: center;
}

#newsub:disabled {
  background: #333;
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selmen" id="selmen" class="drop">
<option value="">Pick One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="theName" />
<input type="text" id="other" />
<input type="sumbit" name="newsub" id="newsub" value="ADD" />

基本上，我有几个像这样的字段。因此，通过添加计数变量，我可以确定填充了多少字段并以此方式启用提交按钮。基本上如果我知道有5个字段是必需的，我可以算一下。这允许我通过将/或选择/输入字段设置为“必需”来避免遇到的问题。

添加了其他字段，因此现在只有在两个项目完成后才能启用提交。并在输入字段函数中将keyup更改为blur。

（为简单起见，此处不再包含单独的输入验证）。

Jquery表单 - 获取传递外部函数的变量

2 个答案: