使用用户输入更改或更新复选框值 [英] Change or update checkbox values using user inputs

问题描述

我目前正在开发一个WordPress项目，在那里我有一个使用WooCommerce构建的网站，作为一个练习项目，我决定为客户提供退款系统，他们可以在那里发送退款请求。网站管理员接受或拒绝。

I am currently working on a WordPress project where I have a webstore made up using WooCommerce, and as a practice project I've decided to make refund system for customers to use, where they can send a "Refund request" for the site admins to either accept or deny.

退款标签分为3个不同的页面，客户在第一页上输入她的姓名，PostCode确认他/她的订单和订单号，在第二页，客户可以通过输入数字选择他们想要订购的产品和数量，并检查产品的复选框和第三页只是一个确认页面，客户也可以发送消息和然后他们按下发送请求按钮。按下按钮后，请求选项卡中的信息将插入到名为wp_refundrequests的自定义表中，该表用于显示管理页面上的所有请求。

The refund tab is split into 3 different pages where on the first page the customer confirms his/her order by inputting her Name, PostCode and the order number, on the second page the customer can choose the products they want to order and their quantity by inputting the number, and checking the product's checkbox and the third page is just a confirmation page where the customer can also send a message and then they press the "Send request button". And after the button is pressed the information from the request tab is inserted to a custom table called wp_refundrequests, which is used to show all the requests on the admin page.

My问题是在第二页上，客户应该选择他们想要退款的某些产品的数量，总是在我的代码中显示最大数量，而我无法理解如何使其工作因此，它只需要用户输入的金额。

My problem is that on the second page, where the customer is supposed to select to amount of certain products they want a refund for, always shows the maximum amount in my code, and I can't wrap my head around on how to make it work so, that it would only take the user inputted amount.

这是第二页的代码，问题是：

Here is the code for the second page, where the problem is:

<div class="Etusivu">
    <form action="" method="post" style="border:0px solid #ccc">
<legend><b>Product refund</b></legend>
          <div class="step">
        <legend>Step 2/3</legend>
      </div>
      <br />
          <p class="important">Order information</p>
          <br />
          <div class="valitse">

        <p class="important">Choose all of the products you want to refund.</p>
      </div>
        <hr>

        <script>
        //function for making a checkbox to check all checkboxes
        function toggle(source) {
          checkboxes = document.getElementsByName('productinfo[]');
          for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
          }
        }
        </script>
          <input type='checkbox' onClick='toggle(this)' />

        <p class="selectall">Select all products</p>

        <label>The order:</p>
        <br />
        <?php
        //Gets and displays data based on certain variables from the database, connects quantity and product name into one string in
        $order = wc_get_order( $ordernumber );

        foreach ($order->get_items() as $item ){

          $unitprice = $item->get_total() / $item->get_quantity();
  // This is the part that currently gets the quantity value for the next page/the refund request
          echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";
          echo '<p>';
          echo __('Product name: ' ) . $item->get_name() . '<br>';
          if($item->get_quantity() > 1) {
            echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
          }
          else {
          echo __('Quantity: ' ) . $item->get_quantity() . '<br>';
        }
        if ($item->get_quantity() > 1) {

          echo __('Product price: ') . $unitprice . '€' . '<br/>';
        }
          echo __('Products total: ' )  . wc_price($item->get_total()) . '</p>' . '<br/>';
       }
        echo '<p>'. __('Order total: ') . $order->get_total() . '</p>';
        ?>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


        <input type="submit" id='check' value="Next"/>
        <script>
        //Checks if any checkboxes have been checked, if not, displays an error
        function checkBoxCheck() {
          if($('input[name="productinfo[]"]:checked').length) {
            console.log("at least one checked");
            return true;
          }
          else {
            alert("Select at least 1 product.");
            return false;
          }
        }
        //runs the script for checking the checkboxes
        $('#check').on('click', checkBoxCheck);
      </script>
        </label>
          <input type="hidden" name="page" value="2">
    </form>
    <br />
</div>
</body>
</html>
<?php

编辑：所以为了更清楚，这里的问题是我正在制作一个客户可以用来返回某些产品的系统，在第2/3页，我目前遇到问题，用户可以看到他的订单包含的所有产品，所有产品都有自己的复选框这样用户就可以选择要退款的产品。现在，当用户选择产品并按下一步时，所选信息显示在下一页3/3上。该页面上显示的值是产品名称，产品价格和产品QUANTITY。但是，QUANTITY始终与客户订购的数量相同，并且在2/3页面上（用户选择要退款的产品），我希望能够输入我想要的产品数量退款，并在复选框数组上显示此值。

So to make this more clear, the problem here is that I'm making a system that customers can use to return some products, on the page 2/3, that I am currently having problems on, the user can see all the products that his order includes, and all products have their own checkboxes so the user can choose which products they want to refund. Right now when the user chooses a product(s), and presses "next", the chosen information is shown on the next page, 3/3. The values shown on that page are the Product name, product price and the product QUANTITY. However, the QUANTITY is always the same amount as the customer has ordered them, and on the 2/3 page (Where user chooses which products he wants to refund), I want to be able to input how many of some products I want to refund, and have this value on the checkbox array.

例如。我已经购买了5根电缆，但我想只返回其中的两根，所以我输入2输入到我输入的字段。

Eg. I have bought 5 cables, but I want to return only 2 of them, so I input 2 in to the input field I have.

推荐答案

首先，您必须更改以下内容：

First, you have to change the following :

      echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

到

      echo "<input type='checkbox' class='" . $item->get_id() . "checkBox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

这个：

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
      }

到此：

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' class='" . $item->get_id() . "' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' onchange='changeCheckBoxValue(this.className)'> " . "<br/>";
      }

如果项目上没有get_id（），请使用任何唯一标识符。

If you don't have a get_id() on item use any unique identifier.

下面这段代码负责触发更改复选框
onchange ='changeCheckBoxValue（的值）的事件。 this.className）

This following piece of the code is responsible for triggering the event that changes the value of the checkbox onchange='changeCheckBoxValue(this.className)

最后将以下函数添加到您的代码中：

And finally add the following function to your code:

function changeCheckBoxValue(className) {

    var checkBox = document.getElementsByClassName(className + 'checkBox')[0];
    var currentValue = checkBox.value;
    var wantedAmount = document.getElementsByClassName(className)[0].value;
    checkBox.value = currentValue .replace(new RegExp('[0-9]* QTY'),wantedAmount + ' QTY');
}

这将更新复选框的值

祝你好运

这篇关于使用用户输入更改或更新复选框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！