Why is attribute changing of HTML using JS not working?

Question

I want to disable the button or change the attribute of the field so that if there are less than 12 characters in the input field it will disable the button I tried everything i know of.(commented) (Possible Duplicate of - Can't change html attribute with external script )

Html code

<button name="button" type="submit" id="continue_button" class="step__footer__continue-btn btn" aria-busy="false">
  <span class="btn__content" data-continue-button-content="true">Continue to shipping</span>
  <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg>
</button>

JS code -

$("#checkout_shipping_address_address1").attr('maxlength','15');
      var valueLength = $('#checkout_shipping_address_address1').val();
      if(valueLength.length < 12){
     //   console.log(valueLength.length);
     //   $("#checkout_shipping_address_address1").aria-invalid="true";
       // var attrChange = $("#error-for-address1");
      //  $("#checkout_shipping_address_address1").innerHTML("aria-describedby" = attrChange);
       // $("#checkout_shipping_address_address1").innerHTML("aria-descibedby = attrChange"); 
     //   $("#checkout_shipping_address_address1").setAttribute("aria-invalid", "true");
      //  $('#continue_btn').attr("disabled", true);
      //  $('#continue_btn').disabled = true;
     //   $('#continue_btn').prop('disabled', true);
      }
      else
      {
       // $('#continue_btn').disabled=false;
      }

The attribute is not changing on the webpage neither can i disable the button.

Note- I cant change HTML/CSS code as i dont have access to it

P.S - I am quite new to JS/JQuery.

<button name="button" type="submit" id="continue_button" class="step__footer__continue-btn btn" aria-busy="false"><span class="btn__content" data-continue-button-content="true">Continue to shipping</span><svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg></button> — Lakshay Kalra
– Lakshay Kalra, Commented Feb 19, 2021 at 8:00
The id of your button is id="continue_button", whilst in your JQuery you look for $('#continue_btn'), that's one reason it might not be working. — KeairaSedai
– KeairaSedai, Commented Feb 19, 2021 at 8:01
Thanks for the edit but it's still working, and in inspect i cant see the added/changed attribute.I used $('#continue_button').disabled= true; — Lakshay Kalra
– Lakshay Kalra, Commented Feb 19, 2021 at 8:06
you should be doing $('#continue_button').prop('disabled', true); — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Feb 19, 2021 at 8:08

n1c0de · Accepted Answer · 2021-02-19 08:36:50Z

You have to put an event listener on your text input and I propose to you a vanilla JS solution :

Disable button by default
Check value length on input
Change disabled value according to the result

const input = document.querySelector("#continue_input");
const button = document.querySelector("#continue_button");
input.addEventListener("input", (event) => {
  if(event.target.value.length > 11) {
    button.removeAttribute("disabled");
  } else {
    button.setAttribute("disabled", "true");
  }
});

.step__footer__continue-input {
  margin-bottom: 1rem;
}

<input id="continue_input" class="step__footer__continue-input" type="text" placeholder="Enter 12 characters here">
<button id="continue_button" class="step__footer__continue-btn btn" type="submit" name="button" aria-busy="false" disabled="true">
  <span class="btn__content" data-continue-button-content="true">Continue to shipping</span>
  <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"><use xlink:href="#spinner-button"></use></svg>
</button>

sbgib · Accepted Answer · 2021-02-19 08:29:40Z

0

The input needs an event handler function (added with on()) so that something happens when the user changes the input value:

$("#checkout_shipping_address_address1").attr('maxlength', '15').on('input', function() {
  $('#continue_button').prop('disabled', $(this).val().length < 12);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="checkout_shipping_address_address1" />
<button name="button" disabled type="submit" id="continue_button" class="step__footer__continue-btn btn" aria-busy="false">
  <span class="btn__content" data-continue-button-content="true">Continue to shipping</span>
  <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg>
</button>

answered Feb 19, 2021 at 8:29

sbgib

5,8583 gold badges22 silver badges27 bronze badges

1 Comment

Lakshay Kalra Over a year ago

Got your concept, but its not working for me.

Collectives™ on Stack Overflow

Why is attribute changing of HTML using JS not working?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related