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
Best Answer
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.
You can try below code:
I hope it will helpful for you.