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

我向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
}

谁能帮我 ？谢谢

#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
}