Reset select in choices.js

[gruawati]

Hello.
I have a close problem with choices.js and form.reset.
I change values in a mysql database and i am using ajax for it. Everything is fine an works. But some values have to be values from a list, so a select is the correct way for me, but the select list ist very long, so i need a "search" in this too. I tried choices.js and it work very fine in a modal (select2 or selcetize works in a modal not).
But my problem is, if i press the button "add" or "change" to add or edit something, then i have to reset my form with form.reset, cause if not, then the values from before are still in the field. I know, it sounds complicated but i hope somebody can understand me. But if i reset my form, then the values of my choices select are empty and i can choose nothing. Can somebody help me how i can fix that? And by the "change value" i need the value, who is saved in database.
Maybe somebody have a little jsfiddle or something where i see how to use "setchoices" and that it not crash when i reset with form.reset().
Btw, i know my english is not the best, sorry if somebody can't understand me.

[mtriff]

It's tough to say without seeing an example of your code. I think you want to use the removeActiveItems(excludedId) method instead of form.reset().

If you need further assistance, please provide all relevant code (HTML and JavaScript) so that we can give better advice.

[gruawati]

Hi, yeah i think too, that i need this. Have you an example in a jsfiddle maybe?
Code i can show later when i am by my computer again.
Thx

[gruawati]

thats the select:

<label>Betriebsmittelgruppe</label>  
                          <select name="betriebsmittelgruppe" id="betriebsmittelgruppe" class="form-control">
                          <option value="0">This is a placeholder</option>
                          <?php
                               for($y=0;$y<$v;$y++)
						{
						echo'<option value="'.$id_betriebsmittelgruppe[$y].'">'.$name_betriebsmittelgruppe[$y].'</option> '; 
						}
				?> 
				</select> 

thats the script to "start" the choices:

const betri = document.querySelector('#betriebsmittelgruppe');
		new Choices(betri);

and thats the script where i add or update values in the database via ajax and then i reset the form:

 $(document).ready(function(){  
      

	  $('#add').click(function(){  
	     
		 
             $('#insert').val("hinzufügen"); 
		   	  
           $('#insert_form')[0].reset(); 
		     $('#employee_id').val(''); 
		
		   
		   
		  
		   
      });  
      $(document).on('click', '.edit_data', function(){  
	  	    
		
	  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"betriebsmittel/ajax-betriebsmittel/fetch.php",  
                method:"POST",  
                data:{employee_id:employee_id},  
                dataType:"json",  
                success:function(data){ 
					 $('#scan_code').val(data.scan_code);  
                     $('#alternativ_code').val(data.alternativ_code);  
                     $('#seriennummer').val(data.seriennummer);  
                     $('#hersteller').val(data.hersteller);  
                     $('#modell').val(data.modell);  
                     $('#kurzbezeichnung').val(data.kurzbezeichnung);
					 $('#betriebsmittelgruppe').val(data.betriebsmittelgruppe);
					 $('#status').val(data.status);
					 $('#hauptstandort').val(data.hauptstandort);
					 $('#kaufdatum').val(data.kaufdatum); 
					 $('#lieferant').val(data.lieferant); 
					 $('#garantie').val(data.garantie);  
					 $('#service').val(data.service); 
                     $('#employee_id').val(data.id);  
                     $('#insert').val("Update");  
                     $('#add_data_Modal').modal('show');  
                }  
           });  
      });
	  
	   
      $('#insert_form').on("submit", function(event){  
           event.preventDefault();  
           if(($('#scan_code').val() == "") && ($('#alternativ_code').val() == ""))  
           {  
                alert("Scan-Code und/oder Alternativ-Code angeben.");  
           }  
           else if($('#seriennummer').val() == '')  

           {  
                alert("Seriennummer angeben.");  
           }
		   else if($('#hersteller').val() == '')  
           {  
                alert("Hersteller angeben.");  
           } 
		   else if($('#modell').val() == '')  
           {  
                alert("Modell angeben.");  
           }
		   else if($('#kurzbezeichnung').val() == '')  
           {  
                alert("Kurzbezeichnung angeben.");  
           } 
		   else if($('#betriebsmittelgruppe').val() == '')  
           {  
                alert("Betriebsmittelgruppe angeben.");  
           }
		   else if($('#status').val() == '')  
           {  
                alert("Status angeben.");  
           }
		   else if($('#hauptstandort').val() == '')  
           {  
                alert("Hauptstandort angeben.");  
           }
		  
		   else if($('#kaufdatum').val() == '')  
           {  
                alert("Kaufdatum angeben.");  
           }
		   else if($('#lieferant').val() == '')  
           {  
                alert("Lieferant angeben.");  
           }
		   else if($('#garantie').val() == '')  
           {  
                alert("Garantie angeben.");  
           }
		   else if($('#service').val() == '')  
           {  
                alert("Service angeben.");  
           }
		   
           
           else  
           {  
		   
                $.ajax({  
                     url:"betriebsmittel/ajax-betriebsmittel/insert.php",  
                     method:"POST",  
                     data:$('#insert_form').serialize(),  
                     beforeSend:function(){  
                          $('#insert').val("Aktualisierung");
						    
                     },  
                     success:function(data){  
                          $('#insert_form')[0].reset();  
                          $('#add_data_Modal').modal('hide');  
                          $('#employee_table').html(data); 
						  $('#employee_id').val('');
						  
						  
						  
                     }  
                });
				 
           }  
      });  

i dont know how to use removeActiveItems or something :(

[mtriff]

Here's a simplified example:

<form id="insert_form">
  <label>Name</label>
  <input id="name" type="text"/>
  <br>
  <label>Betriebsmittelgruppe</label>
  <select name="betriebsmittelgruppe" id="betriebsmittelgruppe" class="form-control">
    <option value="0">This is a placeholder</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
  </select>
  <button id="submitBtn" type="submit">
    Submit
  </button>
</form>

const betri = document.querySelector('#betriebsmittelgruppe');
const betriChoices = new Choices(betri, { allowHTML: false });

$("#insert_form").on("submit", function(event) {
  event.preventDefault();
  $("#name").val("");
  betriChoices.removeActiveItems();
  betriChoices.setChoiceByValue("0");  // Reset to placeholder (optional)
});

You need to store the Choices instance you instantiate in order to call those methods. You should be able to replace all of your calls to $('#insert_form')[0].reset() with the removeActiveItems call. You'll also need to clear any other fields in the form individually now.

[gruawati]

Thank you so much. It works absolutly so, how i wished it. Really really big thanks. It looks you are a super pro by choices.js

Maybe you know sonething too? I would need the option, to add a option, if it is not in the single select options. In short, if the user type sonething, what doesnt exist in the single select, then he should have the option to type a new value in the select and can add it. Like it would be then a input field. I found smth with addItems, but found no example. Maybe you know this too?
And thank you again so much for your help :)

[mtriff]

Glad to hear it! 😃

This is a common feature request. You can try using PR #856. This code hasn't been fully reviewed and tested yet, but some people appear to be using it in production. I hope to get this merged in a future release.

Marking this issue as closed since your original problem has been resolved.