html 表单提交按钮没有在按钮内发送负载

Question

当我单击其中一个绿色按钮时，应该发送对表单的 post 请求，它的有效负载中应该有一个 order_status: wc-accepted，但它丢失了，这就是我的内容点击获取：

这是代码，它会在单击按钮时发送请求，但缺少 order_status：

<form id="dokan-order-status-form" style="display: flex; flex-direction:column;" action="" method="post">

        <?php
        $counter = 0;
        $prefix = "status_";
        foreach ( $statuses as $status => $label ) {
            $counter++;
        echo '<button type="submit" name="order_status" value="' . esc_attr( $status ) . '" style="margin: 5px 0;" onfocus="this.classList.toggle(\'dokan-btn-default\');" class="dokan-btn dokan-btn-success" ' . selected( $status, 'wc-' . dokan_get_prop( $order, 'status' ), false ) . '>' . esc_html__( $label, 'dokan-lite' ) . '</button>';
        }?
        ?>

    <input type="hidden" name="order_id" value="<?php echo esc_attr( dokan_get_prop( $order, 'id' ) ); ?>">
    <input type="hidden" name="action" value="dokan_change_status">
    <input type="hidden" name="_wpnonce" value="<?php echo esc_attr( wp_create_nonce( 'dokan_change_status' ) ); ?>">

</form>

如果我用硬编码值替换具有 echo 的行，同样的问题，order_status 不会在有效负载中发送。:

echo '<button type="submit" name="order_status" value="wc-accepted" style="margin: 5px 0;" onfocus="this.classList.toggle(\'dokan-btn-default\');" class="dokan-btn dokan-btn-success" ' . selected( $status, 'wc-' . dokan_get_prop( $order, 'status' ), false ) . '>' . esc_html__( $label, 'dokan-lite' ) . '</button>';

我从插件中修改的原始代码工作得很好并且在有效负载中有 order_status 但选项在我不想要的下拉菜单中，我必须单击一个单独的更新按钮.我想要一个在点击时提交的按钮的下拉菜单。原代码如下：

<form id="dokan-order-status-form" action="" method="post">

    <select id="order_status" name="order_status" class="form-control">
        <?php
        foreach ( $statuses as $status => $label ) {
            echo '<option value="' . esc_attr( $status ) . '" ' . selected( $status, 'wc-' . dokan_get_prop( $order, 'status' ), false ) . '>' . esc_html__( $label, 'dokan-lite' ) . '</option>';
        }
        ?>
    </select>

    <input type="hidden" name="order_id" value="<?php echo esc_attr( dokan_get_prop( $order, 'id' ) ); ?>">
    <input type="hidden" name="action" value="dokan_change_status">
    <input type="hidden" name="_wpnonce" value="<?php echo esc_attr( wp_create_nonce( 'dokan_change_status' ) ); ?>">
    <input type="submit" class="dokan-btn dokan-btn-success dokan-btn-sm" name="dokan_change_status" value="<?php esc_attr_e( 'Update', 'dokan-lite' ); ?>">

    <a href="#" class="dokan-btn dokan-btn-default dokan-btn-sm dokan-cancel-status"><?php esc_html_e( 'Cancel', 'dokan-lite' ) ?></a>
</form>

是否可以仅通过更改 html + php 将 order_status 添加到负载中，还是我需要使用 jquery？

Answer 1

所以我不得不使用jquery。基本上在上面的表格中，我在关闭表格之前添加了这个元素：

<input type="hidden" id="order_status"name="order_status" value="test">

并且在 echo 的行中，我用这个替换了它，我添加了一个名为“status-click”的 class + 不相关的 CSS.

echo '<button type="button" id="' . esc_attr( $label) . '" value="' . esc_attr( $status ) . '" style="margin: 5px 0; height: 4rem;" onfocus="this.classList.toggle(\'dokan-btn-default\');" class="status-click dokan-btn dokan-btn-success" ' . selected( $status, 'wc-' . dokan_get_prop( $order, 'status' ), false ) . '>' . esc_html__( $label, 'dokan-lite' ) . '</button>';

因此，对于 jquery，我添加了一个函数，以便单击带有“status-click”的 class 的任何按钮时，它会获取该按钮的值，并输入我在开始时添加的隐藏元素的值。此元素将发送保留“order_status”参数的有效负载。然后我用 post 请求提交表单，然后它隐藏状态按钮，显示新状态，然后再次显示所有状态按钮。

这是我的 jquery 函数。有一点html在我原来的post中没有显示出来，但是表格被包含在一个

元素中，并且有一个“dokan-hide”class隐藏了应用时的列表元素：

$('.status-click').on('click', function(e) {
        var form = $(this).closest('form');
        var self = $(this).closest('li');
        var li = self.closest('li');
        var select = $(this);
        
        $('#order_status').prop('value', select.attr("value"));
            
        li.block({ message: null, overlayCSS: { background: '#fff url(' + dokan.ajax_loader + ') no-repeat center', opacity: 0.6 } });

        $.post( dokan.ajaxurl, form.serialize(), function(response) {
            li.unblock();

            if ( response.success ) {
                var prev_li = li.prev();

                li.addClass('dokan-hide');
                prev_li.find('label').replaceWith(response.data);
                li.removeClass('dokan-hide');
            } else {
                dokan_sweetalert( response.data, { 
                    icon: 'success',
                } );
            }
        });
    });

Answer 2

按钮数组名称的定义必须是order_status[].

echo '<button type="submit" name="order_status[]" value="' . esc_attr( $status ) . '" style="margin: 5px 0;" onfocus="this.classList.toggle(\'dokan-btn-default\');" class="dokan-btn dokan-btn-success" ' . selected( $status, 'wc-' . dokan_get_prop( $order, 'status' ), false ) . '>' . esc_html__( $label, 'dokan-lite' ) . '</button>';

服务器以这种方式将其解释并作为数组处理。

对于服务器端处理，这段遍历按钮数组的代码将找到值为 :

的按钮

$arr_buttons = $_POST['order_status'];

foreach($arr_buttons as $key =>$item){
    
    if (isset($item)){
        echo $item;     
    }
}

参考：Using Multiple Submit Buttons With A Single Form

html 表单提交按钮没有在按钮内发送负载

html form submit button not sending payload inside button

html

php

wordpress