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

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.

| improve this answer | |
  • 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> – Praveen Negimani Feb 26 at 11:31
  • Hello @PraveenNegimani, you are used select & textarea fields, it's not consider as an input field, please check my updated answer. – Rohit Feb 26 at 12:12
  • I changed as your answer but its still showing no changes – Praveen Negimani Feb 26 at 12:27
  • Can you please update or add your whole code? – Rohit Feb 26 at 12:30
  • Did you cleaned / flush cache after updated changes in PHTML file? – Rohit Feb 26 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.