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表單 - 通過外部函數獲取變量

回答

相關問題