Question

我在我的网站上建立了一个联系表单，其中包含一个“发送”按钮，当您单击它时将变为“发送...”。我使用了Bootstrap JS。

时会重置

字段为空白
提供的电子邮件地址无效
服务器出了问题
表单已发送

我在警告/警告出现的表格上方有一个div。但是，它仅在发送表单时重置。对于其他3种情况，按钮保持在“正在发送...”。

我认为这是因为按钮。（'reset'）甚至没有被调用，但我把按钮。（'loading'）按钮。（'reset'）应该是，并且它工作（删除了原始按钮。（'loading'）工作）。

我在前三种情况下使用JS，在最后一种情况下使用AJAX。我无法在这里找到错误，所以我怀疑它可能是因为JS（用于出现警报/警告）比jQuery（用于按钮重置）加载得更快。表单需要几秒钟才能发送，当它发出时，按钮会重新进行重置。如果出现错误，则立即弹出警告消息，几乎比触发“发送...”按钮快。

我已经尝试查看开发工具部分中的时间线选项卡，但我真的不明白我在看什么（哪个框指的是哪个动作？）

现在我使用setTimeout函数来重置按钮并且它可以正常工作，但我希望以“正确”的方式重置它（按钮仅在警告出现后重置）。

有人可以指导我完成这件事吗？非常感谢你！

对不起，以下是相关代码：

// scripts.js

$("#bugButton").on('click', function() {
    $("#bugButton").button('loading');  
})

function bugReport(bugsField, emailField) {
    if (bugsField.value != '' && emailField.value != '') {
        if (validateEmail(emailField.value) == true) {
            params = "bugsField=" + bugsField.value + "&emailField=" + emailField.value
            request = new ajaxRequest()
            request.open('POST', 'mail.php', true)
            request.setRequestHeader('Content-type','application/x-www-form-urlencoded')

            request.onreadystatechange = function() {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        if (this.responseText != null) {
                            alertGen(this.responseText)
            } } } } 
            request.send(params) 
        } else
            alertGen('errmail');
    } else
        alertGen('errblank');
}

function alertGen(message) {
    msg1 = '<div class="alert alert-'
    msg2 = ' alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'

    if (message == 'success') 
        document.getElementById('response-box').innerHTML = msg1 + 'success' + msg2 + 'Bug report sent!</div>'
    else if (message == 'errblank')
        document.getElementById('response-box').innerHTML = msg1 + 'info' + msg2 + 'Field(s) are blank.</div>'
    else if (message == 'errsend')
        document.getElementById('response-box').innerHTML = msg1 + 'danger' + msg2 + 'Something went wrong. :-(</div>'
    else if (message == 'errmail') 
        document.getElementById('response-box').innerHTML = msg1 + 'danger' + msg2 + 'That is not a valid email address.</div>'
    else 
        document.getElementById('response-box').innerHTML = msg1 + 'info' + msg2 + message + '</div>';

    setTimeout(function () {
        $("#bugButton").button('reset');
    }, 10);
}





// index.html

<div class="modal fade" id="bugsModal" tabindex="-1" role="dialog" aria-labelledby="bugsModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div id="response-box" onchange="resetButton()"></div>
        <h3>Report a bug</h3><br>
        <form method="POST">
            <div class="form-group">
                <textarea type="text" class="form-control bugsField" placeholder="What seems to be the problem?" rows="5" maxlength="1000" aria-describedby="bugsField" name="bugsField" value="<?php echo isset($_POST['bugs']) ? $_POST['bugs'] : '' ?>"></textarea>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Email" maxlength="75" aria-describedby="emailField" name="emailField" value="<?php echo isset($_POST['email']) ? $_POST['email'] : '' ?>">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="bugButton" data-loading-text="<i class='fa fa-refresh fa-spin'></i>" onClick="bugReport(bugsField, emailField)" autocomplete="off">Send</button>
              </div>
        </form>

      </div>
    </div>
  </div>
</div>

Answer 1

没有编码，我们无法识别错误。

但检查这些错误

完成编码部分之后是否还有其他三个事件这是更改按钮名称。
其他三个事件中的任何名称都已更改。
由于你已经改变了按钮id或类[我在这里假设]的名称，所以检查不同的名称以及在其他编码部分或其他js文件中的某个时间相同的名称将使代码不起作用
最后保留警告消息框或控制台消息或异常处理，以查看是否有任何错误或是否正在执行编码。

我看到代码尝试放置$（＆＃34; #butButton＆＃34;）按钮（＆＃39; reset＆＃39;）;在alertGen（）函数的开头，try.if不工作，请告诉我，我会看到。

我的jQuery函数加载得太慢了吗？

1 个答案: