Question 36891 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Changing divs depending on the selected select, checking the filled field – Jquery

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    //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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search