将 meta_box 添加到 WordPress。取消表单提交

Question

我向 WordPress 添加了一个新的 meta_box。

我有一个按钮，当按下它时，它会将一个字符串复制到计算机的内存中。

问题是代码可能在表格中，因为我看到以下行：

<form id = 'adv-settings' method = 'post'>

发生的情况是，当您单击该按钮时，它会发送表单并刷新页面。我要取消这个选项就不发送了

这是我添加到主题中 functions.php 文件的代码：

add_action( 'add_meta_boxes', 'add_meta_boxes' );

function add_meta_boxes()
{
    add_meta_box( 
        'woocommerce-order-my-custom', 
        __( 'COPY' ), 
        'order_my_custom', 
        'shop_order', 
        'side', 
        'default' 
    );
}
function order_my_custom()
{
?>
</form>
<button onclick="copyToClipboard()">Copy to clipboard</button>
<button onclick="copyToClipboard('I want to get copied into my clipboard')">Copy to clipboard</button>


<script>
function copyToClipboard() {
    let textToCopy      = "I want to get copied into my clipboard",
        urlInput = document.createElement( "input" );
    document.body.appendChild( urlInput );
    urlInput.setAttribute( "value", textToCopy );
    if ( navigator.userAgent.match( /ipad|ipod|iphone/i ) ) {
        let contentEditable      = urlInput.contentEditable,
            readOnly             = urlInput.readOnly,
            range                = document.createRange(),
            windowSelection      = window.getSelection();
        urlInput.contentEditable = !0;
        urlInput.readOnly        = !1;
        range.selectNodeContents( urlInput );
        windowSelection.removeAllRanges();
        windowSelection.addRange( range );
        urlInput.setSelectionRange( 0, 999999 );
        urlInput.contentEditable = contentEditable;
        urlInput.readOnly        = readOnly
    } else urlInput.select();
    document.execCommand( "copy" );
    document.body.removeChild( urlInput );
    alert( "Successfully copied to clipboard" );
}
</script>
<?php
}

谁能帮帮我？谢谢

Answer 1

试试这个代码。添加 type='button' 属性。

function order_my_custom(){
    ?>
    </form>
    <button type="button" onclick="copyToClipboard()">Copy to clipboard</button>
    <button type="button"  onclick="copyToClipboard('I want to get copied into my clipboard')">Copy to clipboard</button>


    <script>
    function copyToClipboard() {
        let textToCopy      = "I want to get copied into my clipboard",
            urlInput = document.createElement( "input" );
        document.body.appendChild( urlInput );
        urlInput.setAttribute( "value", textToCopy );
        if ( navigator.userAgent.match( /ipad|ipod|iphone/i ) ) {
            let contentEditable      = urlInput.contentEditable,
                readOnly             = urlInput.readOnly,
                range                = document.createRange(),
                windowSelection      = window.getSelection();
            urlInput.contentEditable = !0;
            urlInput.readOnly        = !1;
            range.selectNodeContents( urlInput );
            windowSelection.removeAllRanges();
            windowSelection.addRange( range );
            urlInput.setSelectionRange( 0, 999999 );
            urlInput.contentEditable = contentEditable;
            urlInput.readOnly        = readOnly
        } else urlInput.select();
        document.execCommand( "copy" );
        document.body.removeChild( urlInput );
        alert( "Successfully copied to clipboard" );
    }
    </script>
    <?php
}

将 meta_box 添加到 WordPress。取消表单提交

Adding meta_box to WordPress. Cancel form submission

wordpress

wordpress-theming

custom-wordpress-pages

woocommerce