如何將此jquery轉換爲javascript

Question

嗨我不能在這裏使用jquery。請幫我將這3個選擇器改爲javascript。 我已經試過document.getElementById（'FeedbackLightBox_txtName'）.value;但我不工作。

<script type="text/javascript"> 
    function SetButtonStatus() { 
     var tb1 = document.getElementById('FeedbackLightBox_txtName').value; 
     var tb2 = document.getElementById('FeedbackLightBox_txtMessage').value; 
     var tb3 = document.getElementById('FeedbackLightBox_txtEmail').value; 
     if (tb1.length >= 5 && tb2.length >= 5 && tb3.length >= 5) 
      makeBtn(); 
     else 
     $('#FeedbackLightBox_btnSubmit')[0].control.set_enabled(false); 
    } 
    function makeBtn() { 
     $('#FeedbackLightBox_btnSubmit')[0].control.set_enabled(true); 
    } 
    function ClearValues(sender, args) { 
     $('#FeedbackLightBox_txtName').val(''); 
     $('#FeedbackLightBox_txtMessage').val(''); 
     $('#FeedbackLightBox_txtEmail').val(''); 
     args.set_cancel(true); 
     return false; 
    } 
</script> 

Answer 1

是這樣的？

document.getElementById('FeedbackLightBox_btnSubmit').control.set_enabled(false); 

document.getElementById('FeedbackLightBox_txtName').value = ''; 

JFYI

當你說

$('#FeedbackLightBox_btnSubmit')[0] // it gives you an access to HTML element object which is equivalent to saying `document.getElementById('Feed..)`. 

Answer 2

不知道，其中.control.set_enabled(false);到元件上定義的，但我想你知道。

function SetButtonStatus() { 
     var tb1 = document.getElementById('FeedbackLightBox_txtName').value; 
     var tb2 = document.getElementById('FeedbackLightBox_txtMessage').value; 
     var tb3 = document.getElementById('FeedbackLightBox_txtEmail').value; 
     if (tb1.length >= 5 && tb2.length >= 5 && tb3.length >= 5) { 
       makeBtn(); 
     } else { 
      document.getElementById("FeedbackLightBox_btnSubmit").control.set_enabled(false); 
     } 
} 
function makeBtn() { 
     document.getElementById("FeedbackLightBox_btnSubmit").control.set_enabled(true); 
} 
function ClearValues(sender, args) { 
     document.getElementById("FeedbackLightBox_txtName").value = ''; 
     document.getElementById("FeedbackLightBox_txtMessage").value = ''; 
     document.getElementById("FeedbackLightBox_txtEmail").value = ''; 
     args.set_cancel(true); 
     return false; 
} 

Answer 3

看來你有一個表單是這樣的：要檢查一番

<form id="FeedbackLightBox_form" onsubmit="return validate(this)" action=""> 
    Name: <input name="FeedbackLightBox_txtName"><br> 
    Message: <teaxtArea name="FeedbackLightBox_txtMessage"></textarea><br> 
    Email: <input name="FeedbackLightBox_txtEmail"><br> 
    <input type="submit" id="FeedbackLightBox_btnSubmit"> <input type="reset"> 
</form> 

已進入提交之前的每個字段，所以您在使用驗證它：

function validate(form) { 
    var control, controls = form.controls; 
    for (var i=0, iLen=controls.length; i<iLen; i++) { 
    control = controls[i]; 
    if (control.type != 'submit' && control.value.length < 5) { 
     return false; 
    } 
    } 
} 

The clearForm如果您使用復位按鈕，功能無疑是不必要的，但無論如何：

function clearForm() { 
    document.getElementById('FeedbackLightBox_form').reset(); 
} 

同樣的，（不恰當命名）makeBtn功能可以是：

function makeBtn() { 
    document.betElementById('FeedbackLightBox_btnSubmit').disabled = false; 
} 

也許它應該被稱爲enableBtn？

Answer 4

看起來像jQuery只用於獲取HTML元素，所以你可以在你的函數之前定義這些全局變量（或將它們作爲函數參數傳遞）以避免重複。

var tb1 = document.getElementById('FeedbackLightBox_txtName'); 
var tb2 = document.getElementById('FeedbackLightBox_txtMessage'); 
var tb3 = document.getElementById('FeedbackLightBox_txtEmail'); 
var btn = document.getElementById('FeedbackLightBox_btnSubmit'); 

function SetButtonStatus() { 
    if (tb1.value.length >= 5 && tb2.value.length >= 5 && tb3.value.length >= 5) 
     makeBtn(); 
    else 
     btn.control.set_enabled(false); 
} 
function makeBtn() { 
    btn.control.set_enabled(true); 
} 
function ClearValues(sender, args) { 
    tb1.value = ''; 
    tb2.value = ''; 
    tb3.value = ''; 
    args.set_cancel(true); 
    return false; 
}