Home>

On the input form, if you enter in the text area and press 3 buttons to agree,
Please teach me how to make the button selectable for the first time.
Also, the text area can be input up to 1000 characters, and if it exceeds that, the button will be disabled.

html is as follows.

<form>
      <p>
        <label for = "inquiry">--- Contact ---</label><br />
        <span>0</span>
        <textarea name = "inquiry" cols = "60" row = "5"></textarea>
      </p>
      <div>
        <!-checkbox1->
        <input type = "checkbox" name = "agree"><label for = "agree1">I agree -1</label>
        <!-checkbox2->
        <input type = "checkbox" name = "agree"><label for = "agree2">I agree-2</label>
        <!-checkbox3->
        <input type = "checkbox" name = "agree"><label for = "agree3">I agree-3</label>
      </div>
      <br>
      <button type = "button">Confirmation</button>
    </form>

js is as follows.

$('. request_button'). prop ('disabled', true);
  $('# inquiry'). bind ('keydown keyup keypress change', function () {
    var typeLength = $(this) .val (). length;
    $('. count'). html (typeLength);
    if (typeLength === 0) {
      $('. request_button'). prop ('disabled', true);
    } else if (typeLength>0&&typeLength<1000) {
        $('. request_button'). prop ('disabled', false);
    } else {
      $('. request_button'). prop ('disabled', true);
    }
  });
  $('. agereement_check'). click (function () {
    var checkCount = $('. agreement: checked'). length;
    if (checkCount === $('. agreement: checkbox'). length) {
      $('. request_button'). prop ('disabled', false);
    } else {
      $('. request_button'). prop ('disabled', true);
    }
  });


The source is given to jsfiddle.
https://jsfiddle.net/m_a_u_v_e/xpvt214o/658724/

In the above description, even if you do not check to agree, if you enter characters in the text box,
The confirmation button can be selected.
Also, just check the I agree without entering letters
The confirmation button can be selected.

I want to activate the button only when both conditions are met.

Thank you for teaching me.

  • Answer # 1

    How about this?

    const toggleRequestButton = () =>{
      const $requestButton = $('. request_button');
      const textLength = $('# inquiry'). val (). length;
      if (textLength>0&&textLength<1000&&$('. agereement_check'). length === $('. agereement_check: checked'). length) {
        $requestButton.prop ('disabled', false);
      } else {
        $requestButton.prop ('disabled', true);
      }
    }
    $(document) .on ('input', '#inquiry', () =>{
      toggleRequestButton ();
      $('. count'). text ($('# inquiry'). val (). length);
    });
    $(document) .on ('click', '.agereement_check', toggleRequestButton);

    Acquiringlengthoftextareatwice is a performance but it is not a place to do so ...

  • Answer # 2

    < How about p>input and textarea required and maxlength attributes?

    https://developer.mozilla.org/en/docs/Web/HTML/Element/input
    https://developer.mozilla.org/en/docs/Web/HTML/Element/textarea

    $(document) .on ('change', 'form', function (event) {
      $('. request_button'). prop ('disabled',! this.checkValidity ());
    });

Related articles