Magento2 - How to clear data from jQuery modal popup after closing modal?

Question

Here am using jQuery popup in my .phtml file on the first run it sending data properly, on send time it fetching old data as-swell as new data. So how to prevent this condition. Code:

    <div class="popUpDiv" id="popup-modal">
                      <select id="reason_id" name="field1">
                        <option value="R000001">Order Created by Mistake</option>
                        <option value="R000002">Items would not arrive on time</option>
                        <option value="R000003">Shipping cost is too high</option>
                        <option value="R000004">Item price is too high</option>
                        <option value="R000005">Need to change order details or payment method</option>
                        <option value="R000006">Others</option>
                      </select>
                        <textarea class="reason_msg" name ="field2" rows="4" cols="50"></textarea></br>
                      <div class="submit_btn_div">
                        <button  name="submit" id="submit">Submit</button>
                      </div>
                    </div>
<?php foreach ($_orders as $_order): ?>

    <button class="cancel_order gray-btn" value="<?php echo $_order->getId(); ?>"><a href="javascript:void(0)"><?php /* @escapeNotVerified */ echo __('Cancel') ?></a></button>

 <?php endforeach; ?>

Here is my jQuery for modal popup:

require(['jquery', 'jquery/ui'],function($){
        // $(".popUpDiv").hide();
      $('.reason_msg').hide();
      $(".cancel_order").click(function(){
        console.log("here 1");
         var reason_msg = '';
          var order_id = $(this).val();
           console.log(order_id);

            // $(".popUpDiv").show();
             $("#reason_id").change(function(){
                if($('#reason_id').val() == 'R000006'){
                    $('.reason_msg').show();
                 }else{
                    $('.reason_msg').hide();
                 }
              });

             $("#submit").click(function(){
                console.log("here");
$("#popup-modal").modal('closeModal');
                    $('#reason_id').prop('selectedIndex',0);
                    $("textarea[name='field2']").val('');

             });
      });
});

---

require(
[
    'jquery',
    'Magento_Ui/js/modal/modal'
],
function($,modal
) {
    $(document).ready(function() {
    $('#popup-modal').on('hidden.bs.modal', function (e) {
          $('#reason_id').prop('selectedIndex',0);
         //For reset textarea
    $("textarea[name='field2']").val('');
        });
    });

$('#popup-modal').on('modalclosed', function() {
           //For reset Select field
    $('#reason_id').prop('selectedIndex',0);
         //For reset textarea
    $("textarea[name='field2']").val('');

});

      $(".cancel_order").click(function(){
         $("#popup-modal").modal('openModal');
      });
        var options = {
        type: 'popup',
        responsive: true,
        innerScroll: true,
        cache: false,
        title: 'Select a Reason to Cancel',
        modalClass: 'custom-modal',
        buttons: [{
            text: $.mage.__('Continue'),
            class: 'module_pop',
            click: function () {
                    $('#reason_id').prop('selectedIndex',0);
                             //For reset textarea
                    $("textarea[name='field2']").val('');
                this.closeModal();

            }
        }]

    };
    var popup = modal(options, $('#popup-modal'));
    return false;
  }
);

Where am I doing wrong? can I get help?

Thanks in advance

Answer 1

If you are using form tag in your modal popup then you can simply reset that form when modal popup close or set all field value with blank.

------
click: function () 
{
    $('#form_id').trigger("reset");
              //OR
    $("input[name='field1']").val('');
    $("input[name='field2']").val('');
    $("input[name='field3']").val('');
         //For reset Select field
    $('#reason_id').prop('selectedIndex',0);
         //For reset textarea
    $("textarea[name='field2']").val('');

    this.closeModal();
}

OR

$('#popup-modal').on('modalclosed', function() {
    $('#form_id').trigger("reset");
               //OR
    $("input[name='field1']").val('');
    $("input[name='field2']").val('');
    $("input[name='field3']").val('');
         //For reset Select field
    $('#reason_id').prop('selectedIndex',0);
         //For reset textarea
    $("textarea[name='field2']").val('');
 });

You can try below code:

<div class="popUpDiv" id="popup-modal">
    <form name="customform" id="customform" method="POST" data-mage-init='{"validation":{}}' data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>" >
        <select id="reason_id" name="field1">
            <option value="R000001">Order Created by Mistake</option>
            <option value="R000002">Items would not arrive on time</option>
            <option value="R000003">Shipping cost is too high</option>
            <option value="R000004">Item price is too high</option>
            <option value="R000005">Need to change order details or payment method</option>
            <option value="R000006">Others</option>
        </select>
        <textarea class="reason_msg" name ="field2" rows="4" cols="50"></textarea></br>
        <div class="submit_btn_div">
            <button name="submit" id="data_submit">Submit</button>
        </div>
    </form>
</div>

<script>
    require([
    'jquery',
    'Magento_Ui/js/modal/modal'
    ],
    function(
    $,
    modal
    ) {
        var options = {
        type: 'popup',
        responsive: true,
        innerScroll: true,
        buttons:false
        };
        var popup = modal(options, $('#popup-modal'));
        $("#button").on("click", function(){
                $('#popup-modal').modal('openModal');
        });
    });
</script>
<script>
    require(['jquery','mage/validation'],function($){
        $("#data_submit").on("click",function(event){
            var customform =$('#popup-modal form[id=customform]');
            event.stopPropagation();
            event.preventDefault();
            if(customform.validation() && !customform.validation('isValid')) {
                return false;
            }
            var url = "<?php echo $block->getUrl('custom/index/send') ?>";
            jQuery.ajax({
                url: url,
                type: "POST",
                data: customform.serialize(),
                showLoader: true,
                cache: false,
                success: function(response){
                    $('#popup-modal').on('modalclosed', function() {
                        $('#reason_id').prop('selectedIndex',0);
                        $("textarea[name='field2']").val('');
                    });
                }
            });
        });
        $("#btn-cancel").on("click",function(){
            $("#popup-modal").modal("closeModal");
        });
        $('#popup-modal').on('modalclosed', function() {
            //For reset Select field
            $('#reason_id').prop('selectedIndex',0);
            //For reset textarea
            $("textarea[name='field2']").val('');
        });
    });
</script>

I hope it will helpful for you.