i'm trying to display update button in for loop form with bootstrap-selectpicker.

i have a for loop, inside each loop i have a form with more than one select with selectpicker and a button (setted in display: none) to save the value of the all select in this form.

so at the end i will have n form and for each form x select and a button (setted in display: none) to update the value for the form.

with this code from selectpicker documentation

<script>
    $('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        $('.button_update').show();
    });
</script>

i can show all update button, but i want to show only the update button inside the form where i change the value in the select.

START of LOOP

<form id="skill_form">
<div >
    <div >
        <select name="skill_1" id="skill_1"
                
                data-live-search="true"
                data-size="10"
                data-width="fit"
                title="name">
            <option value="value">name</option>
        </select>
    </div>
</div>

<div >
    <div >
        <select name="skill_2" id="skill_2"
                
                data-live-search="true"
                data-size="10"
                data-width="fit"
                title="name">
            <option value="value">name</option>
        </select>
    </div>
</div>

<div  style="margin:0; display:none;">
    <!-- Update skills -->
    <div  style="padding: 0; text-align: center;">
        <button type="submit"
                form="skill_form"
                
                style="display: none; font-size: 1em;">Update</button>
    </div>
</div>
</form>

END OF LOOP

<script>
    $('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        $('.button_update').show();
    });
</script>

i tried to passing parameter but i don't know how and i can't put the jquery inside the loop passing the id of element that i looping.

Someone can help?

CodePudding user response：

I'm not perfectly sure to correctly address the problem.

Anyway here you have a demo that on document ready will create a number of forms (5 in this case) cloning a given template #skill_form having one select and one button inside a form. All the elements inside the template have no id so when it will be cloned to be appended to the document, the unique id requirement won't be violated.

After the forms will be appended, the select elements will be initialized with .selectpicker() and a change event handler will be added to all of them.

Such handler will rely on the event value (coming from e) to determine which element fired the event and what's its parent form that needs its own submit button to be showed.

I simplified the scenario using one select only per form and cloning them all the same just for the sake of having a demo with multiple form instances.

Each one might be populated with a different action or better differentiated in their structure.

Since the select elements showed had only one option, I added an empty option to have the chance for the change event to trigger somehow.

//creates n forms inside the target #formContainer (cloning the template #skill_form)
function createForms(n){
  const templateForm = document.getElementById('skill_form');  
  const formContainer = document.getElementById('formContainer');
  for(let i=1; i<=n; i  ){    
    const newForm = templateForm.content.cloneNode(true);    
    formContainer.appendChild(newForm);    
  }
}

//on document ready
$(document).ready(()=>{
  
  //create the forms (5)
  createForms(5);

  //inits the .selectpicker(s)
  $('.selectpicker').selectpicker();
  
  //add change event handlers to all selects
  $('.selectpicker').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
    //this is the element firing the change event
    const changedSelect = e.target;
    console.log(changedSelect);  
    //this is the parent form relative to the select firing the event
    const parentForm = changedSelect.closest('form');
    console.log(parentForm);    
    //show the child button update
    $(parentForm.querySelector('.button_update')).show();
  });
});

form {
  border: solid 1px darkgray;
  margin: 1rem 1rem;
  padding: 1rem
}

<!-- Bootstrap 4.0 required assets -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<!-- bootstrap-select required assets -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<div id="formContainer"></div>

<template id="skill_form">
  <form>
    <div >
      <div >
        <select
          name="skill"          
          
          data-live-search="true"
          data-size="10"
          data-width="fit"
          title="name">
          <option value=""></option>
          <option value="value">name</option>
        </select>
      </div>
    </div> 

    <div  style="margin:0;">
      <!-- Update skills -->
      <div  style="padding: 0; text-align: center;">
        <button
          type="submit"          
          
          style="display: none; font-size: 1em;">Update</button>
      </div>
    </div>
  </form>
</template>