0

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.

Brian Tompsett - 汤莱恩
  • 5,195
  • 62
  • 50
  • 120
Omid
  • 19
  • 7
  • I think you are missing the preventDefault function: ``` $('#my_form').submit(function(e) {e.preventDefault; alert ("test!!!"); ... ``` – Antax May 12 '20 at 15:44
  • Have you tried chaining the event to the button first to see if it works there? `$('#submit').submit(function(e) e.preventDefault(); {alert ("test!!!"); /* data handing code goes here */` – Villy Devlioti May 12 '20 at 15:46
  • missing e.preventDefault() AND `name="submit"` - BOTH are bad - any error in the code will submit the form – mplungjan May 12 '20 at 15:46
  • 1
    @VillyDevlioti - no - always use the submit event. There are many reasons to not use the click event - and there is no submit event on a button AND there is Absoleutely no submit event on a form that has anything called submit in it – mplungjan May 12 '20 at 15:47

0 Answers0