Question

我有一个关于如何解决这个问题的问题我正在使用客户端JS验证。

这是我建立的在线订购系统，刚刚完成了管理员/经理分割和管理的功能。部分发货。当选择该动作时，我有一些JS在订单中的每个订单项旁边显示一对单选按钮，并且选项为＆＃34;什么都不做＆＃34;或者＆＃34;将此项目拆分为延期交货＆＃34;，然后在系统中创建第二个订单，将任何选定的项目移动到该订单并将其标记为延期交货。

这一切都很完美，但问题是管理员/经理选择＆＃34;拆分＆amp;缺货＆＃34;但要么：
A）选择不分割的项目 B）选择订单上的所有项目进行拆分 C）试图拆分＆amp;只有1个订单项的延期交货和订单（用于验证目的，这与选择所有商品相同）

导致原始订单或拆分订单可能没有附加任何商品。

我想执行一个基本停止PHP帖子的JS验证，如果没有项目的条件或者选择要拆分的所有项目，则显示警告。缺货。

我已经看过使用JS .onclick函数执行此操作并使用带有变量的循环来计算总项目数＆amp;选择和比较的项目，但问题是使这个动态足以使用每个订单，因为表单单选按钮名称随每个订单而变化（由PHP完成）。在PHP中，我只是通过帖子中的循环扩展了数组，但我甚至不知道在客户端JS中从哪里开始。

Answer 1

我真的不知道从哪一个开始，一个朋友提议和我一起看看它，他知道他的方式比我更多。

这是我们最终实施的目标：

function validateAction() {
  var $productRows = $(".product-row");
  var $productsToSplit = [];
  $productRows.each(function(i) {
     var splitChecked = $('input[type=radio][value=1]:checked', $productRows[i]);
     if(splitChecked.length > 0) $productsToSplit.push(splitChecked[0]); 
  });
  //console.log($productsToSplit);

    switch($productsToSplit.length) {
        case 0:
            alert('No products have been selected to split & backorder. Please check your selection and try again.');
            event.preventDefault();
            break;
        case $productRows.length:
            alert('You cannot select all products in an order to split & backorder. Please check your selection and try again.');
            event.preventDefault();
            break;
    }
  //console.log($productsToSplit.length + " : " + $productRows.length);

};

我们最终添加了类＆＃34; productRows＆＃34;到每个产品行的Div，我们就可以抓住选中的单选按钮元素并进行验证。这是涉及的HTML：

<div class="row product-row">
                <!-- Div to show checkbox when Split Order is selected --> 
                <div class= "flat-green splititemchkbox" style="display:none" id="splititemchkbox">
                    <input type="hidden" name="splitbackitem[<?= @$prod['id'];?>][id]" value=<?= @$prod['id'];?>>

                    <input type="radio" style="transform: scale(2)" name="splitbackitem[<?= @$prod['id'];?>][checked]" value="0" checked="checked">
                    <label style="margin: 1%">Do Nothing</label>
                    <input type="radio" style="transform: scale(2)" name="splitbackitem[<?= @$prod['id'];?>][checked]" value="1">
                    <label style="margin-left: 1%">Split Item to Backorder</label>
                </div>

希望这可以帮助其他人寻找类似的解决方案！

干杯

寻找特定的JS方法来确认单选按钮的选择

1 个答案: