【问题标题】:Enable submit button for Cancel even if required fields are empty即使必填字段为空,也为取消启用提交按钮
【发布时间】:2021-05-25 21:05:38
【问题描述】:

我有 2 个提交按钮,一个用于提交表单,另一个用于取消提交和重定向。当单击取消提交按钮时,它不会简单地取消并返回到处理 PHP 脚本。它需要填写必填字段才能使取消按钮起作用。我不明白这有什么问题。请检查我下面的代码并提出可能的解决方案。

{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 width="10%"></th>
                        <th width="10%">SKU</th>
                        <th width="30%">Item</th>
                        <th width="5%">Qty</th>
                        <th width="10%">Status</th>
                        <th width="15%">Ship Mode</th>
                        <th width="20%">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">  
                                <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="button" id="cancel_button" name="submit_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.
        }
    });
    $(function() {
        $('#cancel_button').click(function() {
            $("#amazon_order_adjustment").submit();
        });
    });     
}); 
</script>
{/literal}
{include file="footer.tpl"}

【问题讨论】:

  • 我有 2 个提交按钮,一个用于提交表单,另一个用于取消提交和重定向。
  • 提交和取消按钮的代码为&lt;input type="submit" id="save_button" name="submit_action" value="refund" class="button"&gt; &lt;input type="button" id="cancel_button" name="submit_action" value="Cancel" class="button"&gt; 我需要这两个按钮来提交表单,以便我可以在服务器端脚本中对其进行验证。
  • 您将取消按钮的代码显示为input type="submit" id="cancel_button",而不是input type="button" id="cancel_button"。如果您的目标是不提交,为什么要取消按钮来提交和验证?
  • 现在在 VS 代码中进行了更改。我想要一个取消按钮来提交表单并将页面重定向到其他内容,因为提交值=取消。
  • 这不是你应该做的,因为提交按钮会触发表单验证。只需使用常规按钮,然后在该按钮的click 事件处理程序中,执行您需要的任何操作。您仍然可以重定向,但这将允许您绕过验证。

标签: javascript php html forms frontend


【解决方案1】:

使用&lt;input type="button" ...&gt; 代替&lt;input type="submit" ...&gt; 代替cancel 按钮

【讨论】:

  • 这是一个问题,而不是一个答案,应该是一个评论,就像我已经发布的评论一样。
  • 这样比较好,但是因为这是一个基本的问题,再次评论真的是最合适的。这将属于 IMO 的“问题是拼写错误”类别。
  • 看到你的评论后我写了这个答案
  • 你可以直接删除答案。
  • 好的,下次我会评论而不是回答。
【解决方案2】:

单击取消按钮后,您可以从所有输入中删除required 属性,然后以这种方式提交您的表单$_POST 输入数据也将发送到服务器。

演示代码

$(function() {
  $('#cancel_button').click(function() {
    $("input , select ").removeAttr("required") //remove required attr 
    $("#amazon_order_adjustment").append("<input type='hidden' name='submit_action' value='Cancel'>") //add this to know which button click
    $("#amazon_order_adjustment").submit(); //submit
  });
});
<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 width="10%"></th>
          <th width="10%">SKU</th>
          <th width="30%">Item</th>
          <th width="5%">Qty</th>
          <th width="10%">Status</th>
          <th width="15%">Ship Mode</th>
          <th width="20%">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>
  <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="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
  </div>

</form>

【讨论】:

  • 我需要在此页面中使用 JavaScript 添加一个简单的“感谢您提交”警报packedwithpurpose.gifts/client-landing-page-request 由于此页面使用嵌入式表单,我发现添加它很困难。你能看一下并提出一些建议吗?
  • 嗨,this 之类的?
  • 没错。谢谢,但我们决定放弃这个,因为在当前项目上使用自定义 JS 由于一些冲突是不可取的。感谢您一直在那里帮助他人。斯瓦蒂人周末快乐。
  • 希望你做得很好。我永远记得你的帮助。尽管在 IT 领域工作了 2 年,但我仍然是 JavaScript 的初学者。有一个只涉及 JS 代码的任务,我试图首先在登台服务器上完成。它是订单管理系统的一部分。我恳请您花几分钟的宝贵时间来指出问题的原因,以便我从那里着手。这个问题似乎很难用语言表达。如果您觉得方便,我会分享访问凭据,以便您查看并指导我。请分享您的 Skype。
猜你喜欢
  • 2013-06-14
  • 2013-06-29
  • 2015-04-30
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多