Html Question posted in
Some basic documentation can be found here.

How to make an HTML form be permanent after filling out the field, but before submitting?

Context: I think that filling out a form in a paper with a pen brings the person to pay more attention to what it writes and I wonder if there is a way to bring that to a html form.

Expected Behaviour: The person clicks on a checkbox and it stays like that unless the person reloads the page, it cannot be "unclicked", or a person writes a settence in a text field and, after it presses enter (or tab) the field can’t be edited.

Doesn’t have to behave exactly like that, any suggestion close to it will be helpful. It can be in HTML, Js, Python (for Django) or whatever, just wondered if there is a "simple" way or it would be a separate project all throughout.

Tried searching on google but didn’t find anything close to that.

Tags:

2

Answers


  1. 0

    You can use the focusout event handler to do what you want.

    And as said by Abdul Aziz Barkat in the comments, you need to enable them before sending the form, elsewhere, they will not be included in the request.

    You can also use the readOnly attribute instead of the disabled to avoid this extra step, but the checkbox will not work by itself with this solution.

    var inputs = document.querySelectorAll("input");
inputs.forEach(element => element.addEventListener("focusout", (e) => test(element)));
function test(element) {
    element.disabled=true;
}
    <input type="text" placeholder="You have only one try, focus a little more name"/>
<input type="checkbox" />
    Login or Signup to reply.
  2. 0

    If you have multiple forms with inputs or types of input you can use the queryselectorall to check for inputs in a form; based on attributes etc.

    You can then do this:

    var inputs = document.querySelectorAll("#idOfForm>input");//Gets all the inputs inside a specific form
inputs.forEach(input=> input.addEventListener("focusout", (e) => focusOrDisable(input)));
function focusOrDisable(inputElement) {
    if (inputElement.value.length > 0) {
        inputElement.disabled = true;//Disables the input if input is filled in
    } else {
        inputElement.focus();//Else focus on the input
    }
}

    This allows the user to select an other input with mouse, tab or enter if the input is filled in.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search