How to set change attributes for one Element? using JS not JQuery

Question

I am trying to create a form that changes attributes for an input field depending on a checkbox being checked. I saw in another question that we can create an element and its attributes with a similar function, but when I adapt it to this form, it's not working, anybody can help me do this? I know it's easier using JQuery, but I need this done in pure JS.

<!DOCTYPE html>
<html>
<body>

<form role="search" method="get" action="">
<input type="checkbox" id="check-minor" name="check-minor" onclick="searchFunc()"> <label for="check-minor">Menor</label>
<input type="text" name="qt" id="qt" placeholder="Write your Shop Code" required pattern="[0-9A-Za-z]{7,9})" size="30">
</div>
<button type="submit" class="btn btn-default" id="submit-button">Search</button>
</form>

<script>

function setAttributes(elements, attributes) {
  Object.keys(attributes).forEach(function(name) {
    element.setAttribute(name, attributes[name]);
  })
}

var qtpie = document.getElementById("qt");
function searchFunc() {
    if (document.getElementById("check-minor").checked){
        setAttributes(qtpie, {
            required pattern: "[0-9]{11}",
            placeholder: "Shop Code for Minors"
        }) 
    } else {
        document.getElementById("qt").placeholder= "Write your Shop Code"
    }

</script>

</body>
</html>

The parameter is elements, but then you use element.setAttribute. Do you see the difference? — Barmar
– Barmar, Commented Aug 9, 2018 at 11:33
You got a space in your javascript object too required pattern — Mark Baijens
– Mark Baijens, Commented Aug 9, 2018 at 11:34

kashalo · Accepted Answer · 2018-08-09 11:52:55Z

Here you go you have some typo issue in your code and missing curly brackets

  function setAttributes(elements, attributes) {
      Object.keys(attributes).forEach(function (name) {
        elements.setAttribute(name, attributes[name]);
      })
    }

    var qtpie = document.getElementById("qt");

    function searchFunc() {
      if (document.getElementById("check-minor").checked) {
        setAttributes(qtpie, {
          required: "",
          pattern: "[0-9]{11}",
          placeholder: "Shop Code for Minors"
        })
      } else {
        document.getElementById("qt").placeholder = "Write your Shop Code"
      }
    }

<!DOCTYPE html>
<html>

<body>

  <form role="search" method="get" action="">
    <input type="checkbox" id="check-minor" name="check-minor" onclick="searchFunc()">
    <label for="check-minor">Menor</label>
    <input type="text" name="qt" id="qt" placeholder="Write your Shop Code" required pattern="[0-9A-Za-z]{7,9})" size="30">

    <button type="submit" class="btn btn-default" id="submit-button">Search</button>
  </form>

 

</body>

</html>

Collectives™ on Stack Overflow

How to set change attributes for one Element? using JS not JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related