Форма JQuery - получить переменную для выполнения внешних функций

Question

Простая форма с возможностью выбора из меню или ввода текста или ввода текста.

Все работает в целом. Тем не менее, я пытаюсь отключить кнопку отправки до либо используется опция ввода.

Я не могу получить значение переменной, которое должно быть правильно прочитано в 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.

Что мне не хватает?

EDIT:

Дополнительная информация ...

форма загружается через 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" />

В принципе, у меня есть несколько таких полей. Таким образом, добавляя к переменной count, я могу определить, сколько полей заполнено и включить кнопку отправки таким образом. По сути, если я знаю, есть 5 полей, которые необходимы, я могу их сосчитать. Это позволяет мне обойти проблемы, возникающие при установке полей «/ или select/input» как «обязательных».

Добавлено дополнительное поле, поэтому вложение должно быть включено только после завершения обоих элементов. И изменил keyup на blur в функции ввода поля.

(дальнейший индивидуальный вход проверка не входит сюда для простоты).