Question

我想删除表单提交上的按钮，让用户知道“它正在处理...”。我写了一些javascript来做这项工作以及一个python函数来设置服务器端。这是一个结果html示例：

<html>
  <head>
    <script type="text/javascript">
function proceed_validate() {
    return true;
}
function form_button_reenable(span) {
    "use strict";
    var att = Object.create(null);

    att.id = span.getAttribute('data-id');
    att.value = span.getAttribute('data-value');
    att.style = span.getAttribute('data-style');

    span.innerHTML = "<input type=submit class=form_button onclick=\\"form_button_disable(this);\\" id=\\"" + att.id + "\\" value=\\"" + att.value + "\\" style=\\"" + att.style + "\\" />";
    return;
}
function form_button_disable(button) {
    "use strict";
    var span = button.parentElement,
        form = button.form;

    if (span.id !== "span_" + button.id) {
        alert("HTML not formatted as expected.");
        return;
    }

    if (span.getAttribute('data-buttonreplace') === "true") {
        span.innerHTML = "<em>" + span.getAttribute('data-changetext') + "</em>";
    } else {
        button.disabled = true;
        button.value = span.getAttribute('data-changetext');
    }

    // Run the form's onsubmit event if there is one.
    // The onSubmit event doesn't do a submission, just validation.
    if (form.onsubmit !== null) {
        // The onSubmit event may do validation, if it failed, revert
        if (!form.onsubmit()) {
            // Some forms don't want to be reverted
            if (span.getAttribute('data-autorevert') == "true") {
                // Use the attributes in the span tag to recreate the <input> tag.
                form_button_reenable(span);
            }
            return;
        }
    }
    form.submit();
}
    </script>
  </head>
  <body>
    <FORM ACTION="order-review.cgi" METHOD=post onsubmit="return proceed_validate();"> 
      First name: <input type="text" name="fname">
      <span id="span_place_order" data-id="place_order" data-value="Place Order" data-style="line-height:17px;" data-buttonreplace="true" data-changetext="<b>Verifying order ...</b>" data-autorevert="true">
         <input type=submit id="place_order" class=form_button style="line-height:17px;" value="Place Order" onclick="return form_button_disable(this);"/>
      </span>
    </FORM>
  </body>
</html>

这在我的测试服务器上工作得很好，但是大约有20-30％的网站用户遇到了永不提交的表单。

对于我的启发，是否有更便携的方式来执行此操作，不涉及jquery？（这是网站政策）

修改事实证明这个问题与Firefox隔绝了。至少Firefox v26和v27。除此之外，我没有费心去测试。

编辑II <{1}}函数被调用时会发生一些事情（而不是什么）。

Answer 1

我根据cookiemonster留下的评论解决了这个问题，他发现提交事件在innerHtml字符串中消失了。

现在，我在<em>中添加了<span>标记，但将<em>标记的显示样式类型设置为“无”。这种显示按钮的方式是翻转按钮<input>和<em>标签样式显示属性。只要它们不同相，就只会出现其中一个元素。这正是我想要的。

// enabling button
em.style.display = 'none';
button.style.display = ''; 

// disabling button
em.style.display = '';
button.style.display = 'none';

为什么提交表单的javascript代码在Firefox中不起作用？

1 个答案: