I'm building a SPA webapp integrating reactjs with jquery, I have a component to control the authentication. It is rendering a modal panel with username and password.
I would like to close the modal panel conditionally only if the authetication has been succesful.
The problem is that if I set data-dismiss="modal" in the Login button, the modal is closed always unconditionally as the onclick event is fired after.
So basically I would like to know how to have the same behaviour of data-dismiss but once I have received the response from the backend and the authentication has been successful.
Here the code.
var LoginModal = React.createClass({
getInitialState: function () {
return {email: "", password: ""}
},
render: function () {
return (<div className="modal fade" id="loginModal" tabIndex="-1" role="dialog" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true"><i
className="fa fa-times"></i>
</button>
<h2>Login or Register</h2>
<p className="large">Use social accounts</p>
<div className="social-login">
<a className="facebook" href="#"><i className="fa fa-facebook-square"></i></a>
<a className="google" href="#"><i className="fa fa-google-plus-square"></i></a>
<a className="twitter" href="#"><i className="fa fa-twitter-square"></i></a>
</div>
</div>
<div className="modal-body">
<form className="login-form">
<div className="form-group group">
<label htmlFor="log-email">Email</label>
<input type="email" value={this.state.email} className="form-control" name="log-email"
id="log-email"
placeholder="Enter your email" required onChange={this.handleChangeEmail}/>
<a className="help-link" href="#">Forgot email?</a>
</div>
<div className="form-group group">
<label htmlFor="log-password">Password</label>
<input type="password" value={this.state.password} className="form-control"
name="log-password" id="log-password"
placeholder="Enter your password" required onChange={this.handleChangePassword}/>
<a className="help-link" href="#">Forgot password?</a>
</div>
<div className="checkbox">
<label><input type="checkbox" name="remember"/> Remember me</label>
</div>
<a className="btn btn-success" value="Login" disabled={!this.state.email || !this.state.password} onClick={this.handleClick}>Login</a>
</form>
</div>
</div>
</div>
</div>);
},
handleClick: function () {
$.ajax({
url: "http://localhost:8080/std/rest/oauth/token",
type: "POST",
headers: {
"Authorization": "Basic " + btoa("clientapp" + ":" + "123456"),
"Accept": "application/json",
},
data: {
grant_type: "password",
password: this.state.password,
username: this.state.email,
scope: "read write",
client_secret: "123456",
client_id: "clientapp"
},
dataType: "json",
statusCode: {
200: function(response) {
auth.login(response.access_token, response.expires_in);
},
400: function() {
alert("Bad credentials. Try again.");
}
}
});
},
handleChangeEmail: function (event) {
this.setState({email: event.target.value});
},
handleChangePassword: function (event) {
this.setState({password: event.target.value});
},
isValidForm: function () {
console.log("valid: " + this.state.userData.email && this.state.userData.password);
return (this.state.userData.email && this.state.userData.password);
}
});
ReactDOM.render(
<LoginModal/>,
document.getElementById('login-modal')
);
You're looking for the following jQuery method to close the modal:
$('#loginModal').modal('hide');
Related
I'm trying to get the sign in part working on my webapp but it's not working properly.
Whenever I press the login button the page either refreshes and the url gets updated with the credentials and stays at the same page OR the router gets pushed and goes to the 'homepage' without logging the user in.
I also followed this guide for reference: https://blog.logrocket.com/vue-firebase-authentication/
What's weird is that the sign up part is working just fine.
SignIn.vue
<div class="card-body">
<form>
<!-- email -->
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input id="email" type="email" class="form-control" name="email" placeholder="e-mail" value required autofocus v-model="form.email" />
</div>
<!-- password -->
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input id="password" type="password" class="form-control" name="password" placeholder="password" required v-model="form.password" />
</div>
<!-- error -->
<div v-if="error" class="alert alert-danger animated shake">{{ error }}</div>
<br />
<!-- login -->
<div class="form-group d-flex justify-content-between">
<div class="row align-items-center remember"><input type="checkbox" v-model="form.rememberMe" />Remember Me</div>
<input type="submit" #click="submit" value="Login" class="btn float-right login_btn" />
</div>
</form>
</div>
Script in SignIn.vue
<script>
import firebase from 'firebase';
export default {
data() {
return {
form: {
email: '',
password: '',
rememberMe: false
},
error: null
};
},
methods: {
submit() {
firebase
.auth()
.signInWithEmailAndPassword(this.form.email, this.form.password)
.catch(err => {
this.error = err.message;
})
.then(data => {
this.$router.push({ name: 'home' });
});
}
}
};
</script>
Store.js
import Vue from 'vue';
import Vuex from 'vuex';
import profile from './modules/profile';
import authenticate from './modules/authenticate';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
profile,
authenticate
}
});
Authenticate.js in store
const state = {
user: {
loggedIn: false,
data: null
}
};
const getters = {
user(state) {
return state.user;
}
};
const mutations = {
SET_LOGGED_IN(state, value) {
state.user.loggedIn = value;
},
SET_USER(state, data) {
state.user.data = data;
}
};
const actions = {
fetchUser({ commit }, user) {
commit('SET_LOGGED_IN', user !== null);
if (user) {
commit('SET_USER', {
displayName: user.displayName,
email: user.email
});
} else {
commit('SET_USER', null);
}
}
};
export default {
state,
mutations,
actions,
getters
};
It is probably because you assign the submit type to your button, your form is submitted before the Firebase method is triggered.
You should change the button code from
<input type="submit" #click="submit" value="Login" class="btn float-right login_btn" />
to
<input type="button" #click="submit" value="Login" class="btn float-right login_btn" />
See the W3 specification for more detail on button types.
I am coding a website from 0 to 100 Now I'm coding the Login section.
This Is My HTML Code :
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-49">
ورود
</span>
<div class="wrap-input100 validate-input m-b-23 text-right">
<span class="label-input100">ایمیل / شماره موبایل</span>
<input class="input100" type="email" id="UserEmailLogin" placeholder="ایمیل / شماره موبایل">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="wrap-input100 validate-input text-right">
<span class="label-input100">رمز عبور</span>
<input class="input100" type="password" id="UserPasswordLogin" placeholder="رمز عبور خود را وارد کنید">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="modal fade" id="MessageModalLogin" tabindex="-1" role="dialog" aria-labelledby="MessageModalLoginLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MessageModalLoginLabel">پیغام سیستمی</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-right">
<p id="ModalMessageBodyLogin"></p>
<p id="EmailSendMessageLogin"></p>
</div>
<div class="modal-footer" id="ModalFooterActiveLogin">
</div>
</div>
</div>
</div>
<div class="text-right p-t-8 p-b-31">
<a href="#">
رمز عبور خود را فراموش کرده اید ؟
</a>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" type="button" onclick="Login()" data-toggle="modal" data-target="#MessageModalLogin">
ورود
</button>
</div>
</div>
<div class="flex-col-c p-t-70">
<span class="txt1 p-b-17">
اکانت ندارید ؟
</span>
<a href="#Url.Action("Register","Home")" class="txt2">
ثبت نام
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="~/Assets/LoginRegister/js/main.js"></script>
<script src="~/Assets/js/Ajax/UserLoginRegister.js"></script>
HTML tags run correctly and there is no problem with this.
I get username and password from the user and check it in the database, Whether this username exists or not?
I've done this with AJAX
This is My JavaScript Code :
Note : Do not pay attention to the Add function , This function is for Registration page
function Add() {
var userEmail = $('#UserEmail').val();
var userMobile = $('#UserMobile').val();
var userPassword = $('#UserPassword').val();
var url = "UserRegister";
$.post(url, { email: userEmail, mobile: userMobile, password: userPassword }, function (data) {
if (data.message != "ثبت نام شما به درستی انجام شد") {
$('#ModalFooterActive').hide();
$('#SmallNote').hide();
}
else {
$('#ModalFooterActive').html('<button class="btn btn-sm btn-primary" type="button" id="btnActiveEmail">ارسال ایمیل فعالسازی</button>');
$('#SmallNote').show();
}
$("#MessageModalAjax").show();
$("#ModalMessageBody").html(data.message);
$("#btnActiveEmail").click(function () {
$(this).css("display", "none");
ActiveEmail(data.userActiveEmail, userEmail);
});
});
function ActiveEmail(userActiveEmail, userEmail) {
if (userActiveEmail == null) {
return false;
}
else {
var url = "VerifyEmail";
$.post(url, { UserEmail: userEmail, UserEmailActiveCode: userActiveEmail }, function (data) {
$("#EmailSendMessage").html(data);
});
}
function Login() {
var userEmailLogin = $("#UserEmailLogin").val();
var userPasswordLogin = $("#UserPasswordLogin").val();
var MyUser = { UserValue: userEmailLogin, UserPassword: userPasswordLogin };
$.ajax({
url: "LoginDetails",
data: JSON.stringify(MyUser),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
if (data.message == "حساب کاربری شما هنوز فعال نشده است") {
$('#ModalFooterActive').html('<button class="btn btn-sm btn-primary" type="button" id="btnActiveEmail">ارسال ایمیل فعالسازی</button>');
$("#MessageModalLogin").show();
$("#ModalMessageBodyLogin").html(data.Message);
$("#btnActiveEmail").click(function () {
$(this).css("display", "none");
ActiveEmail(data.userEmailActiveCode, userEmailLogin);
});
}
else if (data.message == "ورود با موفقیت انجام شد") {
window.setTimeout(function () {
window.location.href = SetURLLogin();
}, 5000);
}
else {
$("#ModalMessageBodyLogin").html(data.Message);
}
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
In these codes, the Add function works correctly, which means JavaScript code is not bad, and Visual Studio executes it correctly.
My problem is so weird!!!
When I run the program by Breakpoint, the program works correctly and receives the information I need from the database But inside the browser console writes: Login is not defined at HTMLButtonElement.onclick.
If it does not find the Login function, how does the database bring information???!!!
Finally: My problem is that Function Login does not run correctly
Thank you
i'm creating a ajax post request that works fine. however to make it more appealing i'm trying to implement so that when the user click on #sign_in it will change the text while request is going on. if it result in error a message will appear. this message will automatically remove after a couple of seconds. however if u click .close it will force close. The issue is however that following does not work:
$(".alert a").click(function(e) {
$('.alert').fadeOut();
});
Nothing happens when i click on .close. in addition to this below does not work either.
$('#sign_in').val('Logger ind...');
Full Code
<form id="sign_in">
<div class="form-group">
<input type="text" name="username" id="username" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control" placeholder="Kodeord">
</div>
<a href="#">
<small>Forgot password?</small>
</a>
<div class="form-group text-center add_top_20">
<input class="btn_1 medium" id="sign_in" type="submit" value="Log ind">
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
<div class="alert alert-error alert-danger" style="display: none;">
<a class="close" href="#">×</a>
Invalid email or password. Try clicking 'Forgot Password' if you're having trouble signing in.
</div>
jquery
$("#sign_in").submit(function (event) {
// Change sign in button text
$('#sign_in').val('Logger ind...');
// post request
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: "/account/login/auth/",
type: "POST",
dataType : 'json',
contentType: 'application/json',
data: {
'username': username,
'password': password
}, success: function (data) {
if (data.success) {
alert('success');
} else {
showAlert()
}
// Change sign in text back
$('#sign_in').val('Log ind');
}, error: function(error){
// Change sign in text back
$('#sign_in').val('Log ind');
}
});
});
function showAlert(){
if(!$('.alert').is(':visible'))
{
$('.alert').fadeIn()
$('.alert').delay(4000).fadeOut()
}
}
$(".alert a").click(function(e) {
$('.alert').fadeOut();
});
and all of this is wrapped in $(document).ready(function () {
Mmm, your event is launching but you need to use clearQueue in order to launch your fadeOut animation again interrupting the previous one.
$(".alert a").click(function(e) {
$('.alert').clearQueue();
$('.alert').fadeOut();
});
Change your form id or submit button id and change :visible to :hidden
function showAlert(){
if($('.alert').is(':hidden'))
{
$('.alert').fadeIn()
$('.alert').delay(4000).fadeOut()
}
}
Here I have change form 'id'
<form id="sign_in_form">
<div class="form-group">
<input type="text" name="username" id="username" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control" placeholder="Kodeord">
</div>
<a href="#">
<small>Forgot password?</small>
</a>
<div class="form-group text-center add_top_20">
<input class="btn_1 medium" id="sign_in" type="submit" value="Log ind">
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
<div class="alert alert-error alert-danger" style="display: none;">
<a class="close" href="#">×</a>
Invalid email or password. Try clicking 'Forgot Password' if you're having trouble signing in.
</div>
jQuery
$("#sign_in_form").submit(function (event) {
// Change sign in button text
$('#sign_in').val('Logger ind...');
// post request
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: "/account/login/auth/",
type: "POST",
dataType : 'json',
contentType: 'application/json',
data: {
'username': username,
'password': password
}, success: function (data) {
if (data.success) {
alert('success');
} else {
showAlert()
}
// Change sign in text back
$('#sign_in').val('Log ind');
}, error: function(error){
// Change sign in text back
$('#sign_in').val('Log ind');
}
});
});
function showAlert(){
if($('.alert').is(':hidden'))
{
$('.alert').fadeIn()
$('.alert').delay(4000).fadeOut()
}
}
$(".alert a").click(function(e) {
$('.alert').clearQueue();
$('.alert').fadeOut();
});
import React, { Component } from 'react';
import { Link } from 'react-router'
class Modals extends Component {
constructor(props){
super(props);
this.state = {inputuuid: '',
inputmajor: '' ,
inputminor: '' ,
inputmanufacturer: ''};
this.handleUuid = this.handleUuid.bind(this);
this.handleMajor = this.handleMajor.bind(this);
this.handleMinor = this.handleMinor.bind(this);
this.handleManufacturer = this.handleManufacturer.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
alert("started");
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
{
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'
},
body: JSON.stringify({
name: "beacon name 1234",
description: "beacon description here for beacon",
uuid: "this.state.inputuuid1",
major: "this.state.inputmajor",
minor: "this.state.inputminor",
manufacturer: "this.state.inputmanufacturer",
beaconType: "type9",
location: "main gate8",
floor: "ist",
zone: "58c29c06d3ec866803040e6e"
})
}).then(function(response){
if(response.ok) {
console.log(response)
return response;
}
throw new Error('Network response was not ok.');
}).then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error);
});
}
handleUuid(event) {
this.setState({inputuuid: event.target.value});
}
handleMajor(event){
this.setState({inputmajor: event.target.value});
}
handleMinor(event){
this.setState({inputminor: event.target.value});
}
handleManufacturer(event){
this.setState({inputmanufacturer: event.target.value});
}
handleSubmit(event) {
alert('Submitted: ' + this.state.inputuuid + this.state.inputmajor + this.state.inputminor + this.state.inputmanufacturer);
event.preventDefault();
}
render() {
return (<div><div>
<div className="animated fadeIn">
<br /><div className="card" style={{ width: 57 + '%' }}>
<div className="card-header">
Beacon Settings
</div>
<div className="card-block">
<div className="input-group mb-1">
<span className="input-group-addon"><i className="icon-user"></i></span>
<input type="text" className="form-control" value={this.state.inputuuid} onChange={this.handleUuid} placeholder="UUID" />
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
<input type="text" className="form-control" value={this.state.inputmajor} onChange={this.handleMajor} placeholder="Major Number"/>
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
<input type="text" className="form-control" value={this.state.inputminor} onChange={this.handleMinor} placeholder="Minor Number"/>
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
<input type="text" className="form-control" value={this.state.inputmanufacturer} onChange={this.handleManufacturer} placeholder="Manufacturer Number"/>
</div><center>
<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" onClick={this.handleSubmit} activeClassName="active">Save</Link>
<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link>
</center>
</div>
</div>
</div></div>
</div>
)
}
}
export default Modals;
i had taken the user inputs now i want to send them to the server using POST request which i can not able to send.
i am only getting the values by the user and those can be seen by the alert i had put in that but can't able to send to the server
Try using following way
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
});
React require stringify post body data
You can create your inputField like this:
<input className="form-control" type="text" value={this.state.userData.firstName} required placeholder="First Name" onChange={this.handleChange.bind(this, 'firstName')} />
In your form component, you can define userData state object in this way:
this.state = {
userData: {
firstName: null,
lastName: null,
...
}
}
And for handleChange(), we can make it to accept dynamic keys for state variables:
handleChange(key, e, value){
let data = this.state.userData;
userData[key] = e.target.value;
this.setState({
userData: data
});
}
All you need to post then is this.state.userData.
I Have a change password form which I have tried to code so that it gets submitted through ajax.
I needed to do validation too.
Below is the code that I've written. Is there anyway so that we can use this js ajax function for multiple modal forms?
Or will we need to create a seperate function for submitting each modal form?
Also I wanted to make the parent page reload after user closes the modal so I have added this code:
$('#edit').on('hidden.bs.modal', function() {
location.reload();
});
but it reloads the page when someone clicks cancel button too. Is there any way to prevent reloading when clicking cancel button and only do reloading only by clicking "x".
Here is the code
index.php file where the modal is
<p data-placement="top" data-toggle="tooltip" title="Edit" data-original-title="Edit">
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-backdrop="static" data-keyboard="false">
<span class="glyphicon glyphicon-pencil"> Edit</span>
</button>
</p>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
<h4 class="modal-title" id="myModalLabel">Edit Your Detail</h4>
</div>
<!--/.modal-header-->
<div class="modal-body">
<form method="post" id="updateForm" action="update-info.php">
<input type="hidden" name="userID" value="<?php echo $_SESSION['user']; ?>" />
<div class="form-group">
<label for="customer_name">Customer Name :</label>
<input class="form-control" type="text" name="customer_name" id="customer_name" value="<?php echo $userRow['fullName']; ?>" />
</div>
<h4><u><strong>Change Password</strong></u></h4>
<div class="form-group" id="currentPass-group">
<label for="current_pass">Current Password :</label>
<input class="form-control" type="password" name="current_pass" id="current_pass">
</div>
<div class="form-group">
<label for="new_pass">New Password :</label>
<input class="form-control" type="password" name="new_pass" id="new_pass">
</div>
<div class="form-group">
<label for="confirm_pass">Confirm Password :</label>
<input class="form-control" type="password" name="confirm_pass" id="confirm_pass">
</div>
<div class="modal-footer">
<!-- <input type="submit" name="submit" class="btn btn-block btn-warning" value="Save changes" /> -->
<button type="submit" name="submit" class="btn btn-success" id="submitForm" value="Save changes">Save Changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/.modal -->
custom.js file:
$('#edit').on('hidden.bs.modal', function() {
location.reload();
});
/* must apply only after HTML has loaded */
$(document).ready(function() {
$("#updateForm").on("submit", function(e) {
$(".error").hide();
var hasError = false;
var currentpass = $("#current_pass").val();
var newpass = $("#new_pass").val();
var cnfpass = $("#confirm_pass").val();
if (currentpass == '') {
$("#current_pass").after('<span class="error text-danger"><em>Please enter your current password.</em></span>');
//$('#currentPass-group').addClass('has-error'); // add the error class to show red input
//$('#current_pass').append('<div class="help-block">Please enter your current password.</div>'); // add the actual error message under our input
hasError = true;
} else if (newpass == '') {
$("#new_pass").after('<span class="error text-danger"><em>Please enter a password.</em></span>');
hasError = true;
} else if (cnfpass == '') {
$("#confirm_pass").after('<span class="error text-danger"><em>Please re-enter your password.</em></span>');
hasError = true;
} else if (newpass != cnfpass) {
$("#confirm_pass").after('<span class="error text-danger"><em>Passwords do not match.</em></span>');
hasError = true;
}
if (hasError == true) {
return false;
}
if (hasError == false) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
$('#edit .modal-header .modal-title').html("Result");
$('#edit .modal-body').html(data);
$("#submitForm").remove();
//document.location.reload();
},
error: function(jqXHR, status, error) {
console.log(status + ": " + error);
}
});
e.preventDefault();
}
});
$("#submitForm").on('click', function() {
$("#updateForm").submit();
});
});
update-info.php
To use this code for multiple form add ajax code in one function and call that function whenever you want to.
To prevent page from reloading when someone click on cancel
Instead of using
$('#edit').on('hidden.bs.modal', function () {
location.reload();
});
Add one click event on cross and then reload page by location.reload();
You can use e.preventDefault(); and instead of submit use click event
$("#submitForm").on("click", function(e) {
e.preventDefault();