I have a simple jQuery script in a WordPress functions.php file that is using a jQuery like this:
add_action( 'woocommerce_review_order_before_payment', 'refresh_payment_methods' );
function refresh_payment_methods(){
global $woocommerce, $product;
?>
<script type="text/javascript">
(function($){
$( 'form.checkout' ).on( 'change', 'input[name^="payment_method"]', function(event) {
var payment_method = $('form.checkout').find('input[name^="payment_method"]:checked').val();
if(payment_method == 'cheque'){
var theText = '<form id="my_form" method="post">';
theText += '<div id="server-results"><!-- For server results --></div> ';
theText += '<table align="center" style="width:40%;text-align:center;margin: 0 auto;"><tbody><tr><td style="text-align:center">';
theText += '<input type="hidden" name="price" value="<?php echo $woocommerce->cart->total; ?>">';
theText += '<label>Period:</label><br/>';
theText += '<select name="Period"><option value="1">1</option><option value="2">2</option><option value="3">3</option> </select>';
theText += '</td></tr><tr><td style="text-align:center">';
theText += '<br/><label>Number</label><br/>';
theText += '<select name="InstallmentCount"><option value="6">6</option><option value="12">12</option><option value="18">18</option><option value="24">24</option></select>';
theText += '</td></tr><tr><td style="text-align:center">';
theText += '<br/><input type="submit" class="button" name="submit" id="submit" value="check it" >';
theText += '</td></tr></tbody></table>';
theText += '</form>';
theText += '<p><a href="index.php?route=information" title="Help" target="_blank">Help</a></p>';
$( "div.payment_method_cheque" ).prepend( theText );
}else{
$('body').trigger('update_checkout');
}
});
})(jQuery);
</script>
<script type="text/javascript">
jQuery(function ($) {
$('#my_form').submit(function(e) {alert ("test!!!");
$('#server-results').html("<b>Loading response...</b>");
e.preventDefault();
$.ajax({
type: "POST",
url: '/form.php',
data: $(this).serialize(),
success: function(response)
{
var jsonData = JSON.parse(response);
// user is logged in successfully in the back-end
// let's redirect
if (jsonData.success == "1")
{
$('#server-results').html(data);
}
else
{
alert('Error!');
}
}
});
return false;
});
});
</script>
<?php
}
After selecting checkout method and submit the form, the page get refreshed and no message (test!!!) will appear. I tried any solution that found in forum, but doesn't work. I don't know why and how correct it.