i built contact form on site "send" button turn "sending..." when click on it. used bootstrap js that.
it reset when
- fields blank
- the email address provided not valid
- something went wrong server
- the form sent
i have div above form alerts/warnings appear. however, resets when form sent. button stays @ "sending..." other 3 situations.
i thought because button.('reset') wasn't called, put button.('loading') button.('reset') supposed , worked (removed original button.('loading') work).
i use js first 3 situations , ajax last one. couldn't locate error here, have suspicion because js (for alert/warning appear) loaded faster jquery (for button reset). form takes few seconds send , when does, button resets diligently. if there error, warning message pops immediately, faster triggering "sending..." button.
i've tried looking @ timeline tab in dev tools section, don't understand i'm looking @ (which box refers action?)
now use settimeout function reset button , works, wish reset "proper" way (button resets after warning appears).
can guide me through this? thank much!
sorry, here relevant codes:
// 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">×</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) 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 not 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">×</span></button> </div> <div class="modal-body"> <div id="response-box" onchange="resetbutton()"></div> <h3>report bug</h3><br> <form method="post"> <div class="form-group"> <textarea type="text" class="form-control bugsfield" placeholder="what seems 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>
with out coding,it not identify error.
but check these error
- whether other 3 event after finished going coding part changing button name.
- any name changed in other 3 events.
- as have changed name of button id or class[i assuming here] worked ,check different name time same name in other coding part or other js file make code not work.
- finally keep alert message box or console message or exception handing see error or whether coding getting executed .
i have seen code try placing $("#bugbutton").button('reset'); @ start of alertgen() function , try.if not working please tell me see.
