Как исправить мою форму входа в jjery ajax, которая перенаправляет на страницу действий?

Question

Я надеюсь, что кто-то может помочь мне понять, что я делаю неправильно. Я пытаюсь войти в систему, используя простую форму jquery.Когда я нажимаю на кнопку отправить, форма перенаправляется на страницу действия

Я пытался найти простые шаблоны jquery, но меня всегда перенаправляют на страницу действия.Я использовал event.preventDefault (), но это не помогает

//HTML

 <div id ="login" class="container">
        <div class="md-5" id="loginContainer" style="margin-top:100px;content-alignment:center;">
          <form id="loginForm" class="form" action="mylogin.php" method="post" style="background: lightskyblue;margin: 5%;border: 2px;border-style: ridge;padding: 10%;">
            <label for="userName" >User Name</label>
            <input id="userName" type="text" name="userName" required=""><br><br>
            <label for="passWord">Password</label>
            <input id="passWord" type="password" name="passWord" required=""></br>
            <input type="submit" id="loginSubmit" value="Login">
          </form>
        <div id="upload-progress"><div class="progress-bar"></div></div> <!-- Progress bar added -->
        </div>

//script

$("#loginForm").submit(function(event){
  event.preventDefault(); //prevent default action 
    var userName=document.getElementById('userName');
    var password=document.getElementById('passWord');
    var form_data = {myformdatawithusernameandpassword}
}

    $.ajax({
        url : "mylogin.php",
        type: "post",
        data : form_data,
        contentType: false,
        processData:false,
        xhr: function(){
        //upload Progress
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function(event) {
                var percent = 0;
                var position = event.loaded || event.position;
                var total = event.total;
                if (event.lengthComputable) {
                    percent = Math.ceil(position / total * 100);
                }
                //update progressbar
                $("#upload-progress .progress-bar").css("width", + percent +"%");
            }, true);
        }
        return xhr;
    }
    }).done(function(response){ //
        $("#mainDashboard").html(response);
    });
});

Я должен получить ответ без перенаправления или даже обновления страницы

Answer 1

Адаптируйте обратный вызов отправки к обработчику клика для кнопки.

Ваш event.preventDefault () должен затем успешно предотвратить действие формы.

Answer 2

Удалите действие формы, а также измените <input type="submit '> на простую кнопку, потому что тип отправки отправляет форму и выполняет действие, указанное в теге формы.