What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

button situation?

joaosiltatv

New member
Hi guys. I'm need at coding and I'm in a volunteer project and we need to build a website. I'm losing my mind with things that probbaly it's very very easy.

Ao, one of my problems is: I want to create like a form, with a minimum of 100 characters. When the person writes less that 100, appears a message saying that the person needs to write more (and the button is disable). When the person writes 100 or more, the button gets available and they can submit the form. (and then go like back to the home page).

Hopefully someone can help me. Thank you in advance.
 

Attachments

  • Screenshot_2.png
    Screenshot_2.png
    6.9 KB · Views: 4
  • Screenshot_3.png
    Screenshot_3.png
    25.1 KB · Views: 4
Hi guys. I'm need at coding and I'm in a volunteer project and we need to build a website. I'm losing my mind with things that probbaly it's very very easy.

Ao, one of my problems is: I want to create like a form, with a minimum of 100 characters. When the person writes less that 100, appears a message saying that the person needs to write more (and the button is disable). When the person writes 100 or more, the button gets available and they can submit the form. (and then go like back to the home page).

Hopefully someone can help me. Thank you in advance.
One way of fixing it is by adding
JavaScript:
function loop() {
    if(document.getElementById("escrevertexto").value.length>=100)    {
        document.getElementById("button-57").disabled=false;
    }
    else    {
        document.getElementById("button-57").disabled=true;
    }
    setTimeout(loop, 0);
}
loop();
which checks every millisecond making sure that the form is valid and enabling the button, if not it disables the button.
 
Last edited:
You can do the same thing using the "KEYUP" event and a data attribute.

KeyUP events are fired immediately.

Code:
<input type="text" name="" id="escrevertexto" data-min-length="100" />
<button id="button-57" disabled="disabled">Submit</button>

<script>
    document.querySelector("#escrevertexto").addEventListener("keyup", (el) => {
        document.querySelector("#button-57").disabled = el.currentTarget.value.length <= el.currentTarget.dataset.minLength;
    });
</script>
 
Another way to build software https://mlsdev.com is to use predefined components. Depending on the scope of your project, this is important for your budget. In addition, you can use different kinds of software for different applications. For example, if you need to create a website for your company, you can use PHP. The PHP coder will need to know CSS as a style guide. It is a common language that allows you to design a variety of applications.
 
Last edited:
Back
Top