name='AdjustmentBuyerPrice' 的无效表单控件不可聚焦

Posted 2023-05-09

【中文标题】name=\'AdjustmentBuyerPrice\' 的无效表单控件不可聚焦

【英文标题】：An invalid form control with name='AdjustmentBuyerPrice' is not focusablename='AdjustmentBuyerPrice' 的无效表单控件不可聚焦

【发布时间】：2021-05-24 17:56:52

【问题描述】：

Below is the html and the javascript being used to display the dropdown only if one of the options from the preceding dropdown is selected.当我选择链接以下下拉列表的选项时，它可以工作，而当我选择未链接到以下下拉列表的第二个选项并单击提交时，它会抛出错误“名称为'AdjustmentBuyerPrice'的无效表单控件不可聚焦”。请指出我在代码中犯的错误。

`include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'

literal
<style type="text/css">
#loading-icon 
    position: absolute; 
    top: 75px; 
    right: 250px; width: 
    32px; height: 32px;
    display: none; 
    background: url('/images/lightbox/loading.gif');

</style>
/literal

if isset($tpl_error_msg) 
    <div id="message">$tpl_error_msg</div>
/if

include file='view_order_snippet.tpl'

<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id=$id&$search_params">
        <div class="row">
            <fieldset>
            <legend>Order Line Items</legend>
                <table id="table2" style="position: relative; float: left;">
                    <tr valign="top">
                        <th ></th>
                        <th >SKU</th>
                        <th >Item</th>
                        <th >Qty</th>
                        <th >Status</th>
                        <th >Ship Mode</th>
                        <th >Tracking#</th>
                    </tr>
                    if !($update_shipping_info_flag)
                        <tr>
                            <td colspan="7" align="center">No Items to display</td>
                        </tr>
                    else
                        section name=lineitems loop=$tpl_order_list
                            <tr id=row1 valign="top">
                                <td><input type="radio" name="check[]" value="$tpl_order_list[lineitems].id">
                                <input type="hidden" name="vendor_id_array[]" value="$tpl_order_list[lineitems].vendor_fk">
                                </td>
                                <td>$tpl_order_list[lineitems].sku
                                <td>$tpl_order_list[lineitems].item_description</td>
                                <td>$tpl_order_list[lineitems].quantity</td>
                                <td>$tpl_order_list[lineitems].item_status</td>
                                <td>$tpl_order_list[lineitems].shipping_mode</td>
                                if $tpl_order_list[lineitems].shipping_tracking_no == ""
                                <td>N/A</td>
                                else
                                <td>$tpl_order_list[lineitems].shipping_tracking_no</td>
                                /if
                            </tr>
                        /section
                    /if
                    <tr>
                        <td align="right" colspan="3">Action Type</td>
                        <td align="left" colspan="4">
                            <select id="action_type" name="action_type" required>   
                                <option value="">Select Action</option>
                                html_options options=$tpl_action_type
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" colspan="3">Enter Refund Amount</td>
                        <td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
                    </tr>
                    <tr>
                        <td align="right" colspan="3">Adjustment Reason</td>
                        <td align="left" colspan="4">
                            <select id="AdjustmentReason" name="AdjustmentReason" required> 
                                <option value="" selected="selected">Select Adjustment Reason</option>
                                html_options options=$tpl_adjustment_reason                           
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" colspan="3">Adjustment Type</td>
                        <td align="left" colspan="4">
                            <select id="adjustment_type" name="adjustment_type" required>   
                                <option value="" selected="selected">Select Adjustment Type</option>
                                html_options options=$tpl_adjustment_type                             
                            </select>
                        </td>
                    </tr>
                    <tr id="adjustment_buyer_price">
                        <td align="right" colspan="3">Adjustment Buyer Price Type</td>
                        <td align="left" colspan="4">
                            <select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice" required> 
                                <option value="">Select Adjustment Buyer Price Type</option>
                                html_options options=$tpl_adjustment_buyer_price
                            </select>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div class="row">
            <input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="$tpl_grand_total">
            <input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="$tpl_tax">
            <input type="submit" id="save_button" name="submit_action" value="refund" class="button">
            <input type="submit" id="cancel_button" name="cancel_action" value="Cancel" class="button">
        </div>
    </div>
</form>
literal
<script type="text/javascript">
    $(document).ready(function() 
        $('#adjustment_buyer_price').hide(); 
        $("#adjustment_type").change(function () 
            var cur_option_val = $(this).val(); 
            if (cur_option_val == "ItemPriceAdjustments") 
                $('#adjustment_buyer_price').show(); 
                $('#AdjustmentBuyerPrice').attr("required", "required") //add required
             else 
                $('#adjustment_buyer_price').hide();
                $('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
            
        );
    ); 
</script>
/literal
include file="footer.tpl"

【参考方案1】：

发生这种情况是因为您将AdjustmentBuyerPrice 设置为required，因此当您没有选择值ItemPriceAdjustments 时，它是隐藏的，当您单击提交按钮时会显示错误。相反，您可以在选择时删除required 属性盒子被隐藏，否则添加必需的属性。

演示代码：

$(document).ready(function() 
  $('#adjustment_buyer_price').hide();
  $("#adjustment_type").change(function() 
    var cur_option_val = $(this).val();
    if (cur_option_val == "ItemPriceAdjustments") 
      $('#adjustment_buyer_price').show();
      $('#AdjustmentBuyerPrice').attr("required", "required") //add required
     else 
      $('#adjustment_buyer_price').hide();
      $('#AdjustmentBuyerPrice').removeAttr("required") //remove
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id=$id&$search_params">
  <div class="row">
    <fieldset>
      <legend>Order Line Items</legend>
      <table id="table2" style="position: relative; float: left;">
        <tr valign="top">
          <th ></th>
          <th >SKU</th>
          <th >Item</th>
          <th >Qty</th>
          <th >Status</th>
          <th >Ship Mode</th>
          <th >Tracking#</th>
        </tr>
        <tr>
          <td colspan="7" align="center">No Items to display</td>
        </tr>
        <tr id=row1 valign="top">
          <td><input type="radio" name="check[]" value="1">
            <input type="hidden" name="vendor_id_array[]" value="2">
          </td>
          <td>A
            <td>B</td>
            <td>5</td>
            <td>ok</td>
            <td>htm</td>
            <td>N/A</td>


        </tr>

        <tr>
          <td align="right" colspan="3">Action Type</td>
          <td align="left" colspan="4">
            <select id="action_type" name="action_type" required>
              <option value="">Select Action</option>
              <option value="">A</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right" colspan="3">Enter Refund Amount</td>
          <td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
        </tr>
        <tr>
          <td align="right" colspan="3">Adjustment Reason</td>
          <td align="left" colspan="4">
            <select id="AdjustmentReason" name="AdjustmentReason" required>
              <option value="" selected="selected">Select Adjustment Reason</option>
              <option value="">A</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right" colspan="3">Adjustment Type</td>
          <td align="left" colspan="4">
            <select id="adjustment_type" name="adjustment_type" required>
              <option value="" selected="selected">Select Adjustment Type</option>
              <option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
              <option value="ItemPriceAdjustments1">5</option>

            </select>
          </td>
        </tr>
        <tr id="adjustment_buyer_price">
          <td align="right" colspan="3">Adjustment Buyer Price Type</td>
          <td align="left" colspan="4">
            <!--remove required from here-->
            <select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
              <option value="">Select Adjustment Buyer Price Type</option>
              <option value="">A</option>

            </select>
          </td>
        </tr>
      </table>
    </fieldset>
  </div>
  <input type="submit" id="save_button" name="submit_action" value="refund" class="button">

</form>

【讨论】：

为什么这行需要两次$('#AdjustmentBuyerPrice').attr("required", "required") //add required

您需要在 attr 中设置 attributename 和 value，因此 required 是 attributename 和 required 是 value，它将显示如下：required=required。还有其他方法可以设置 attr check this out 。

现在单击取消按钮时，我收到相同的控制台错误An invalid form control with name='AdjustmentBuyerPrice' is not focusable。现在让我把完整的代码过去给你看看。

因为您的 name='AdjustmentBuyerPrice' 具有 required 属性，默认情况下也将其从 html 中删除。

删除了该属性。现在取消按钮只有在我选择每个下拉菜单时才有效，否则它不起作用。它抛出必填字段错误消息。