Changing divs depending on the selected select, checking the filled field-CodePudding

Can you please tell me how to change the values of divs depending on the select?

And then when the button is clicked, check whether the fields are filled with a certain selected div.

That is, if select is selected with a value of 1, a div with id 1 appears below, and when a button with id btn_save is pressed, it checks whether the field with id user1 is filled.

For select with value 2, a div with id 2 appears below, and when a button with id btn_save is pressed, it checks if the field with id user2 is filled.

Etc.

<select id="selects">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<!-- DIVs -->
<div id="boxes">
  <div id="1">
    <p>1 ...</p>
    <p><input id="user1"></p>
  </div>
  <div id="2">
    <p>4 ...</p>
    <input id="user2">
  </div>
  <div id="3">
    <p>3 ...</p>
    <input id="user3">
  </div>
</div>
<button type="button" id="btn_save">Подтвердить</button>

CodePudding user response：

Here is a version using recommended event listeners

Note I use hidden on each div and I changed the ID from numeric. It is not recommended to have numeric IDs since they cannot be easily accessed by CSS

const divs = document.querySelectorAll("#boxes div");
const save = document.getElementById("btn_save")
document.getElementById("selects").addEventListener("change", function() {
  const val = this.value;
  divs.forEach(box => box.hidden = box.id !== `d${val}`)
})
save.addEventListener("click", () => {
  const visible = [...divs].find(div => !div.hidden);
  if (visible && visible.querySelector("input").value.trim() ==="") {
    alert("Please enter a value")
  }
})

<select id="selects">
<option selected value="">Please select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<!-- DIVs -->
<div id="boxes">
  <div id="d1" hidden>
    <p>1 ...</p>
    <p><input id="user1"></p>
  </div>
  <div id="d2" hidden>
    <p>2 ...</p>
    <input id="user2">
  </div>
  <div id="d3" hidden>
    <p>3 ...</p>
    <input id="user3">
  </div>
</div>
<button type="button" id="btn_save">Подтвердить</button>

CodePudding user response：

<html>
  <head><title>test</title></head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="selects">
      <option selected value="">Please select</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <!-- DIVs -->
    <div id="boxes">
      <div id="d1">
        <p>1 ...</p>
        <p><input id="user1"></p>
      </div>
      <div id="d2">
        <p>2 ...</p>
        <input id="user2">
      </div>
      <div id="d3">
        <p>3 ...</p>
        <input id="user3">
      </div>
    </div>
    <button type="button" id="btn_save">Save</button>
    <script>
      //Hide All Divs
      $('#boxes').find('div').hide();
      $('#btn_save').hide();
      
      //Change div on select
      $('#selects').on('change',function(){
        $('input').removeClass('active');
        $('input').val('');
        $('#boxes').find('div').hide();
        $('#d' $(this).val()).show();
        $('#btn_save').show();
        $('#d' $(this).val() ' ' 'input').addClass('active');
      });
      
      //button check input filed or not
      $('#btn_save').on('click',function(){
      
        if($('#' $('.active').attr('id')).val().trim()=='')
        {
            alert('Please enter a value');
        }
        
      });
      
    </script>
  </body>
</html>