jquery表单 - 通过外部函数获取变量

简单的形式，可以从菜单中选择或者从菜单中选择或输入文本。jquery表单 - 通过外部函数获取变量

一切工作一般。但是，我试图禁用提交按钮，直到或者使用输入选项。

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

$(document).ready(function() { 
 

 
var allThere = false; //stop 
 
\t 
 
//Either pick an item.... 
 
$('#selmen').on('change', function() { 
 
    $('#theName').slideUp(300); 
 
\t \t 
 
    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); 
 
    } 
 
}); 
 
\t \t \t \t 
 
//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); 
 
} \t \t 
 

 
}); //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()函数以外的函数也有问题。（至少对我来说）

来源

2017-02-21 Scott

那么，因为你只在文件加载时检查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" />

来源

2017-02-21 20:49:40 AVAVT

这是有道理的....但是，我没有提到这似乎也是一个障碍。该表单通过'load（）'函数加载。请参阅问题编辑。我试着将功能移到不同的位置，并将目标更改为具体，但仍然无法实现。谢谢。 – Scott

那么，只需将函数*放在* document.ready中即可。看到我编辑的答案。JavaScript是相当松懈，就像那个xD – AVAVT

谢谢..实际上我的部分毫无遗漏。不会在改变变量的if/else语句中运行该函数。这解决了它。再次感谢你！ – Scott

由于这里@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。

（为简单起见，此处未包括进一步的单独输入验证）。

来源

2017-02-22 00:06:06 Scott

jquery表单 - 通过外部函数获取变量

回答

相关问题