It's probably something simple but I have tried really hard and changed things around but the form always submits twice, when I'm in the index directory it submits and the second process as js gives me a rollback in the console and everything works, but when I change into a different page(category of index) the second process as JS goes through and I get form field cannot be empty after it submitted the first one as text(which worked)

My js

$('#myform').submit(function(e) { e.preventDefault(); $('#statusbutton').attr('disabled', 'disabled'); if ($(this).find('textarea').val() == "") { $('#validate').show('blind').delay(5000).hide('blind'); $(this).find('textarea').focus(); $('#statusbutton').removeAttr('disabled'); return; } var valuesToSubmit = $(this).serialize(); $(this).find('textarea').addClass('uneditable-input').attr('disabled', 'disabled'); $.ajax({ url: $(this).attr('action'), //sumbits it to the given url of the form data: valuesToSubmit, type: "POST", dataType: "text", beforeSend: function() { $('#statusbutton').html('<i class="fa fa-spinner fa-spin"></i>'); $('#jellylogo').html('<div style="color: #3399ff; margin-left: 5px; margin-top: -1px;"> <i class="fa fa-refresh fa-spin fa-lg"></i></div>'); }, success: function(response, data, xhr, event) { $('#indexstream').prepend(response).slideDown("slow"); }, complete: function(data) { $("#userlink").hide().slideDown("slow").effect('highlight', { color: 'rgb(255, 251, 204);' }, 3000); $('#jellylogo').html('<div id="square"></div>'); $('#statusbutton').removeAttr('disabled'); $('#statusbutton').html('<i class="fa fa-check"></i>'); $("#disabletext").removeClass('uneditable-input').removeAttr('disabled', 'disabled').val(''); } }); });