I have been attempting to display an alert on a form once the submission action is completed.
Here is my JavaScript function:
function submitForm(){
// Initialize Variables With Form Content
var nomeCompleto = $("#nomeCompleto").val();
var email = $("#email").val();
var telefono = $("#telefono").val();
var username = $("#username").val();
var password = $("#password").val();
var parametros = {
"nomeCompleto" : name,
"email" : email
};
$.ajax({
type: "POST",
url: "adminRegistro.php",
data: parametros,
async:false,
success: function(result){
var parsedData = JSON.parse(result);
$("#ajax-alert").addClass("alert alert-danger").text(parsedData.msg);
$("#ajax-alert").alert();
$("#ajax-alert").fadeTo(5000, 5000).slideUp(5000, function(){
});
}
});
}
The alert is triggered upon success, but it only shows for a brief moment (as if the page was reloaded). What am I doing wrong with my ajax call?
EDIT:
After some trial and error, I updated my HTML button code from:
<input class="btn btn-success submit-button" value="Submit" onclick="myFunction()"/></input>
<input class="btn btn-success submit-button" value="Submit" id= "btnSubmit"/></input>
and adjusted the JavaScript:
$(document).ready(function (){
$("#btnSubmit").click(function(){
....
This change resolved the issue. It appears that using
$("#btnSubmit").click(function(e){ e.preventDefault();