How to disable a button until text of 12 letters entered?-CodePudding

I am trying to figure out how to disable a button until 12 letters of a text is inputted into a text input.

I am using a program that uses Bootstrap and you can add in your own JavaScript.

My script below is for a form builder along with two functions, one function to disable the button in the form and the other is for a time to switch to another page:

<!--Formbuilder Form-->
<form action="[email protected]" id="loginForm" name="Contact Us Form" method="POST" 
>
<div >
<div hidden="hidden" data-form-alert >Thanks for filling out 
the form! We will be in touch with you soon.</div>
<div hidden="hidden" data-form-alert-danger > </div>
</div>
<div >
<div >
<div >
<div >
<input type="text" id="fn" name="fn" placeholder="Enter Username" data-form-field="nameFirst" 
required="required"  value="new">
</div>
<div >
<input type="text" id="ln" name="ln" placeholder="Enter Password" data-form-field="nameLast" 
required="required"  value="new">
</div>
</div>
</div>
<div  id="btnSubmit" mbr-buttons="true" mbr-theme- 
style="display-4" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><a 
type="submit"  id="btnsubmit" data-app-placeholder="Type Text" 
onclick="func1()" disabled="stateHandle()">Send message</a></div>
<script>
    var btn = getElementById('btnSubmit');
    function stateHandle(){
        if(){ //?
            btn.disabled = true;
        }else if(){ //?
            btn.disabled = false;
        }
    }
    function func1(){
    window.setTimeout(function() {
window.location.href = 'index.html';
}, 3000);     
} 
</script>
</div>
</form><!--Formbuilder Form-->

CodePudding user response：

You can add an EventListener on that input field and set a function which runs and check every time user input something in that field.

document.getElementById('fn').addEventListener("input",stateHandle)
  
    function stateHandle(){   
      var btn = document.getElementById('btnsubmit');
      var inputField = document.getElementById('fn')
        if(inputField.value.length < 16){ //disable the button if length in less than 16
            btn.disabled = true;
        }else{ //enable it if it's 16 or more
            btn.disabled = false;
        }
    }
    function func1(){
    window.setTimeout(function() {
window.location.href = 'index.html';
}, 3000);     
}

<!--Formbuilder Form-->
<form action="[email protected]" id="loginForm" name="Contact Us Form" method="POST" 
>
<div >
<div hidden="hidden" data-form-alert >Thanks for filling out 
the form! We will be in touch with you soon.</div>
<div hidden="hidden" data-form-alert-danger > </div>
</div>
<div >
<div >
<div >
<div >
<input type="text" id="fn" name="fn" placeholder="Enter Username" data-form-field="nameFirst" 
required="required"  value="new">
</div>
<div >
<input type="text" id="ln" name="ln" placeholder="Enter Password" data-form-field="nameLast" 
required="required"  value="new">
</div>
</div>
</div>
<div  id="btnSubmit" mbr-buttons="true" mbr-theme- 
style="display-4" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><button 
type="submit"  id="btnsubmit" data-app-placeholder="Type Text" 
disabled>Send message</button></div>

</div>
</form><!--Formbuilder Form-->

CodePudding user response：

First of all, do document.getElementById

Here is how you can do it:

<input id='inputfeild'>
<button onclick = `event()`>

let input = document.getElementById(`inputfeild`)
function event() {
if(input.value.length > 11) {.../*do your function */}
}

The if statement makes sure that the function does nothing if the text box does not have 12 or more characters in it.