I have implemented an AJAX code to submit my form, but I am facing an issue where the form disappears after submission. Here is my current code:
<script>
$('#reg-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.post('ajaxdmsgsub.php', $(this).serialize() )
.done(function(data){
$('#form-content').fadeOut('slow', function(){
$('#form-content').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
</script>
This is my form:
<div id="form-content">
<form method="post" id="reg-form" autocomplete="off" action="ajaxdmsgsform.php">
<label>Message</label>
<textarea class="txtarea" name="message"></textarea>
<div class="cleared"></div>
<input type="submit" value="Submit Message" class="submitit" onclick="hide('myModal')">
</form>
</div>
After submitting the form, it disappears and I want it to reset so users can keep submitting without a page refresh. I'm aiming for an instant messaging functionality with this form. However, I am unsure how to prevent the form from disappearing.