0

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

1 Answer 1

2

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.

7
  • thank you for replaying, I Used both methods but there is no change. my input fields are: <select id="reason_id" name="field1"> <option value="R000001">option1</option> <option value="R000002">option1</option> </select> <textarea class="reason_msg" name ="field2" rows="4" cols="50"></textarea> Feb 26, 2020 at 11:31
  • Hello @PraveenNegimani, you are used select & textarea fields, it's not consider as an input field, please check my updated answer. Feb 26, 2020 at 12:12
  • I changed as your answer but its still showing no changes Feb 26, 2020 at 12:27
  • Can you please update or add your whole code? Feb 26, 2020 at 12:30
  • Did you cleaned / flush cache after updated changes in PHTML file? Feb 26, 2020 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.