Question

我有一个非常奇怪的问题，这让我很烦。我有两个表单，一旦单击它以禁止表单发送重复值，将禁用提交按钮。

示例一（工作）

 <script>
                  $('#addposition').submit(function(){
                      $('#SavePosition').val('Saving...');
                      $('input[type=submit]', this).attr('disabled', 'disabled');
                  });
            </script> 
             <script>
                  $('#addposition').submit(function(){
                      $('#saveandedit').val('Saving...');
                      $('input[type=submit]', this).attr('disabled', 'disabled');
                  });
            </script>

以下是此职位表格中使用的提交按钮。

<input type="submit" id="SavePosition" class="btn btn-primary" value="Submit & Add Position">
<input type="submit" id="saveandedit" class="btn btn-info" name="SaveAndEdit" value="Submit & Edit New Position">

屏幕上有2个按钮，具体取决于用户点击的内容，将确定运行的代码以及接下来显示的页面。

当执行此操作时，如果我将用户发送到保存和编辑页面，我可以确定是否存在#saveandedit。表单提交的页面将处理表单变量。如果不存在#saveandedit，则会转到保存并添加页面。

示例二（不工作）

                <script>
              $('#addcandidate').submit(function(){
                  $('#saveandedit').val('Submitting...');
                  $('input[type=submit]', this).attr('disabled', 'disabled');
              });
            </script>
             <script>
              $('#addcandidate').submit(function(){
                  $('#saveandadd').val('Submitting...');
                  $('input[type=submit]', this).attr('disabled', 'disabled');
              });
            </script>

以下是此候选表格的按钮

<input type="submit" class="btn btn-info" id="saveandedit" name="saveandedit" value="Submit & Edit New Candidate">
<input type="submit" class="btn btn-primary" id="saveandadd" name="saveandadd" value="Submit & Add New Candidate">

这里也应如此。如果处理页面上存在#saveandedit，那么我们会向用户发送保存和编辑页面。但是，没有#saveandedit变量期。我可以查看整个变量范围，并且该值不存在。

我查看了发布到处理页面的URL和候选页面，没有保存和编辑的值。

但是，在位置页面上，我可以清楚地看到保存和编辑的值，并且该页面正常工作。

有没有理由使用这个简单的jQuery代码片段来杀死那个按钮？

Answer 1

未提交已停用的表单元素，这是HTML standard。

的一部分

作为一种变通方法，您可以添加隐藏的输入字段并为其指定值，具体取决于单击的按钮。

适用于我的示例：

<form method="post" id="addcandidate">
    <input type="submit" class="btn btn-info" id="saveandedit" name="saveandedit" value="Submit & Edit New Candidate">
    <input type="submit" class="btn btn-primary" id="saveandadd" name="saveandadd" value="Submit & Add New Candidate">
    <input type="hidden" id="action" name="action" value=""/>
</form>

JS：

$('#saveandedit').click(function(){
    $('#action').val('saveandedit');
});

$('#saveandadd').click(function(){
    $('#action').val('saveandadd');
});

$('#addcandidate').submit(function(){
    $('#addcandidate input[type=submit]').prop('disabled', true).val('Submitting...');
});

Fiddle (similar)

Answer 2

对于第二个示例，您的提交按钮ID与jquery不同，因此它不起作用。

Answer 3

用于显示禁用按钮的CSS和javascript preventDefault（）应该可以解决问题。

使用jQuery在提交后禁用按钮不会传递按钮的值

3 个答案: