当有人确认时，让 jQuery 单击按钮（对话框）

Question

I have a wordpress auction site and wanted to add a confirm dialog with jquery when someone clicks on the "bid" button. I can achieve this with the default system dialog but I want a more custom dialog box with jQuery. How can I make it click the bid button once the end user has confirmed the bid?

Here is the code example:

            <button type="submit" class="bid_button button alt"><?php echo wp_kses_post( apply_filters( 'bid_text', esc_html__( 'Bid', 'auctions-for-woocommerce' ), $product ) ); ?></button>
            <script>
                jQuery('button').confirm({
                    title: 'titletext',
                    content: 'content text"',
                    type: 'red',
                    buttons: {   
                        ok: {
                            text: "OK",
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: function(){
                                 console.log('Brukeren bekreftet "OK"');
                            }
                        },
                        No: function(){
                                text: "No",
                                jQuery.alert('Kansellert!');
                                console.log('the user clicked cancel');
                        }
                    }
                });
            </script>

Answer 1

it seems like this libary is not created for submitting forms via button, more like using it for <a> tags, source - https://github.com/craftpip/jquery-confirm/issues/229

I thought i will give you still a way to solve your problem. now i am preventing the default behavior from the button when its not confirmed and trigger it again when its confirmed, but this time the button can submit the form. Also added the id submitButton to your button for making it individual.

<button type="submit" id="submitButton" class="bid_button button alt"></button>

<script>
   var confirmed = false;
   $('#submitButton').on('click', function() {
     if (!confirmed) {
       event.preventDefault();
       $.confirm({
         title: 'titletext ',
         content: 'content text"',
         type: 'red',
         buttons: {
           ok: {
             text: "OK",
             btnClass: 'btn-primary',
             keys: ['enter'],
             action: function() {
               confirmed = true;
               $('#submitButton').click()
               console.log('Brukeren bekreftet "OK"');
             }
           },
           No: function() {
             text: "No",
             jQuery.alert('Kansellert!');
             console.log('the user clicked cancel');
           }
         }
       })
     } else {
       confirmed = false
     }
   })
</script>

hope I could help you. :)