CODEWITHSUNDEEP
jquery
Adam G
Adam G

Reputation: 1188

jQuery - Updating Select Fields After Form Reset

I am using the following code to reset my HTML form with jQuery after a select field has been changed.

My problem is that, while the selected option seems to be resetting (I can click into the select field and the original value is now checked), the front-end select display isn't changing at all.

Here is the the HTML which sets the value of the select field on page load.

 <form class="form" id="product-details-form">
      <select class="form-control" id="supplier" name="productsupplier" disabled>
           <?php foreach($allSuppliers as $supplier) { ?>
                <option value="<?php echo $supplier['supplier_id']; ?>" <?php if ($productResult['product_supplier'] == $supplier['supplier_id']) { ?>selected <?php } ?>><?php echo $supplier['supplier_name']; ?></option>
           <?php } ?>
      </select>
 </form>

 <a href="javascript:;" id="product-vitals-edit"><i class="la la-edit"></i></a>
 <button id="product-details-footer-cancel">Cancel</button>

Clicking the Edit button unlocked the select field:

$("#product-vitals-edit").click(function(){

    $("#product-details-form :input").prop("disabled", false);

});

And clicking cancel resets the form and goes back to disabled.

$("#product-details-footer-cancel").click(function(e){

    e.preventDefault();

    $('#product-details-form').trigger("reset");
    $("#supplier").trigger("change");
    $("#product-details-form :input").prop("disabled", true);

});

Again. The original value of #supplier IS being 'selected' on reset, but it doesn't show that on the front end.

Upvotes: 3

Views: 672

Answers (3)

Midhun
Midhun

Reputation: 1167

This code have no issue, check your select option, whether it have more than one selected attribute.

$("#product-vitals-edit").click(function(){

    $("#product-details-form :input").prop("disabled", false);

});
$("#product-details-footer-cancel").click(function(e){

    e.preventDefault();

    $('#product-details-form').trigger("reset");
    $("#supplier").trigger("change");
    $("#product-details-form :input").prop("disabled", true);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" id="product-details-form">
      <select class="form-control" id="supplier" name="productsupplier" disabled>
      <option value="">None</option>
         <option value=“0”>Supplier 1</option>
         <option value=“1” selected>Supplier 2</option>
         <option value=“2”>Supplier 3</option>
         <option value=“3”>Supplier 4</option>
     </select>
     <a href="javascript:;" id="product-vitals-edit">Edit</a>
 <button id="product-details-footer-cancel">Cancel</button>
 </form>

Upvotes: 0

turivishal
turivishal

Reputation: 36144

You can reset using $(selector).get(0).reset(), your example html is working in snippet.

$(document).ready(function(){
   $("#resetButton").on("click", function(){
      $("#product-details-form").get(0).reset()
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" id="product-details-form">
      <select class="form-control" id="supplier" name="productsupplier">
         <option value=“0”>Supplier 1</option>
         <option value=“1”>Supplier 2</option>
         <option value=“2”>Supplier 3</option>
         <option value=“3”>Supplier 4</option>
     </select>
 </form>
 <button id="resetButton">Reset</button>

Upvotes: 0

Sibashrit Pattnaik
Sibashrit Pattnaik

Reputation: 325

This will do the trick

$("#supplier")[0].selectedIndex = $("#supplier")[0].selectedIndex;

Keep it just after your reset code

 $('#product-details-form').trigger("reset");

Upvotes: 3

Related Questions