My form somehow only seems to send the last data entry (user_feel).
It's my first time working with forms and I can't figure out why the other entries aren't sent with the rest of the form:
<!DOCTYPE html>
<head>
<title>How was your day? (So far)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='custom.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2 py-5">
<h1>Activity form</h1>
<p class="lead">Please indicate what you've eaten and which social activities (if any) you've participated in.</p>
<form id="activity-form" method="post" action="form.php">
<div class="messages"></div>
<div class="controls">
<br />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">What is your name? *</label>
<input id="name" type="text" name="user_name" class="form-control" placeholder="Please enter your name *" required="required" data-error="Name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="time">Which part of the day are you reporting on? *</label>
<select id="time" name="current_time" class="form-control" required="required" data-error="Please specify the time of day.">
<option value="">Select the time of day</option>
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="feel">How do you feel? *</label>
<p>Level three is the base level. It's where you don't feel especially good or bad, and consider yourself feeling 'neutral' compared to how you usually feel.</p>
<select id="feel" name="user_feel" class="form-control" required="required" data-error="Please specify how you feel.">
<option value="">Select how you feel</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Save data">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted">
<strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
<script src="form.js"></script>
</body>
</html>
I serialize the form and send it using ajax, the php script echo's out all key:value pairs it gained form the post. This is where i only get the user_feel selection, all other selections from the form seem to be ignored.
This is the JS file:
$(function () {
// init the validator
// validator files are included in the download package
// otherwise download from http://1000hz.github.io/bootstrap-validator
$('#activity-form').validator();
// when the form is submitted
$('#activity-form').on('submit', function (e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "form.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#activity-form').find('.messages').html(alertBox);
// empty the form
$('#activity-form')[0].reset();
}
}
});
return false;
}
})
});
And this is the PHP script:
<?php
$okMessage = 'Your data has been submitted succesfully! Thanks a bunch!';
$errorMessage = 'There was an error while submitting the form. Please try again later';
error_reporting(E_ALL & ~E_NOTICE);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
foreach ($_POST as $key => $value) {
$debug = "";
$debug .= "$key: $value\n";
}
$responseArray = array('type' => 'success', 'message' => $okMessage."\r\n".$debug);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}
It's based on the code from: https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form
Related
I have html page with inputs
<!doctype html>
<html lang="en">
<head>
<title>CLR: PACKING</title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<?!= include("index-css"); ?>
</head>
<body>
<div class="conteiner">
<form novalidate>
<h6 class="title">PACKING</h6>
<div class="dws-input">
<div class="col-md-3"></div>
<div>
<div>
<button id="del" type="button"><RESET</button>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tLogin" name= "username" placeholder= "Логин:" autofocus >
<label for="tLogin">Login:</label>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" novalidate id="tTable" name= "text" placeholder= "Номер стола:" >
<label for="tTable">Table:</label>
</div>
</div>
<div class="form-floating mb-3 mt-3">
<input type="text" novalidate class="form-control" id="tOrder" name= "text" placeholder= "Заказ:" >
<label for="tOrder">Order:</label>
</div>
</div>
</form>
</div>
<?!= include("index-js"); ?>
</body>
</html>f
In include(index-js.html) I wrote this
<script>
var curInpID;
var findData;
function keyPressFunction(ev) {
var inputData = ev.target.value;
if (ev.code !== 'Enter') return;
curInpID = ev.target.id;
google.script.run.withSuccessHandler(onSuccess).searchData(inputData);
console.log(findData); //result onSuccess here
for (const i of formControl) {
if (i.value === '') {
i.nextElementSibling.focus();
break;
}
}
}
function onSuccess(_findData) {
findData = _findData;
}
</script>
onSuccess goes to apps script, check value at input there and return true/false in findData
function searchData(data){
for (let i = 0; i < arrLogins.length; i++){
if(arrLogins[i].indexOf(login)!==-1){
firstValid = true;
return firstValid;
}
}
firstValid = false;
return firstValid;
}
Because of onSuccess is asynchronous, this way works slowly and sometimes returns wrong value to the findData. In the previous topic, a colleague suggested to me to convert it into a promise and do await.
I found some examples with async, await and promise on this site, but I can't understand, what I need to transform here. Please, help me! Thank you!
I have made an web app using google script connected to spreadsheet.
all was running well till i tried to put a functionality of sending email notification when user submits a form information
see error code when run log of user clicked function-
TypeError: Cannot read property 'fn' of undefined userClicked #funcs.gs:8
function-js page is below
'function userClicked(userInfo) {
var ss = SpreadsheetApp.openByUrl(url1);
var ws = ss.getSheetByName("SNAGS");
ws.appendRow([userInfo.fn,
userInfo.contact,
userInfo.email,
userInfo.house,
userInfo.snag,
userInfo.query,
new Date()]);
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.getElementById("btn").addEventListener("click",doStuff);
document.getElementById("house").addEventListener("input",getInfo);
var selectBoxes = document.querySelectorAll('select');
M.FormSelect.init(selectBoxes);
google.script.run.withSuccessHandler(populateHouse).getHouse();
}
);
function populateHouse(hous)
{
var autocomplete = document.getElementById('house');
var instances = M.Autocomplete.init(autocomplete, { data: hous });
}
function doStuff()
{
var isValid = document.getElementById("fn").checkValidity();
if(!isValid)
{
M.toast({html: 'Name Required!'});
}
else
{
addRecord();
}
}
function addRecord ()
{
var userInfo = {};
userInfo.fn = document.getElementById("fn").value;
userInfo.contact = document.getElementById("contact").value;
userInfo.email = document.getElementById("email").value;
userInfo.house = document.getElementById("house").value;
userInfo.snag = document.getElementById("snag").value;
userInfo.query = document.getElementById("query").value;
google.script.run.userClicked(userInfo);
document.getElementById("fn").value ="";
document.getElementById("contact").value ="";
document.getElementById("email").value ="";
document.getElementById("house").value ="";
document.getElementById("snag").value ="";
document.getElementById("query").value ="";
M.updateTextFields();
var myApp = document.getElementById("snag");
myApp.selectedIindex = 0;
M.FormSelect.init(myApp);
}
function getInfo ()
{
var HouseInfo = document.getElementById("house").value;
if(HouseInfo.length === 3)
{
google.script.run.withSucceshandler(updateInfo).getData(HouseInfo);
}
}
function updateInfo (infos)
{
document.getElementById("info").value = infos;
M.updateTextFields();
}
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("page-css"); ?>
</head>
<body>
<div class="container">
<h3>TPM Maintance |Ticketing System</h3>
<br>
<div class="row">
<div class="input-field col s4">
<input placeholder="Your Full Names" id="fn" type="text" class="validate" required >
<label for="fn">Your Name:</label>
</div>
<div class="input-field col s4">
<input id="contact" type="text" class="validate">
<label for="contact"> Your Phone number:</label>
</div>
<div class="input-field col s4">
<input id="email" type="email" class="validate" required>
<label for="email">Email:</label>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<i class="material-icons prefix">home</i>
<input type="text" id="house" class="autocomplete" required>
<label for="house">Location Area/ House Unit# </label>
</div>
<div class="input-field col s4">
<select id="snag" required>
<option disabled selected> Snag Category</option>
<?!= list; ?>
</select>
<label>Snag Type</label>
</div>
<div class="input-field col s4">
<input disabled id="info" type="text" class="validate">
<label for="info">Unit_Info</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="query" class="materialize-textarea"></textarea>
<label for="query">Query Desc:</label>
</div>
</div>
<div class="row">
<button id="btn" class="btn waves-effect waves-light deep-orange darken-2" type="submit" name="action">Send Ticket!
<i class="material-icons right">send</i>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("page-js"); ?>
</body>
</html>
//html part
please see more code from my work thanks. please excuse me im abit a newbie
If you are running the steps from the tutorial video you have tried to run userClicked() function to authorize the Gmail API's. Since Apps Script is thinking that it's a standalone function, userInfo is considered undefined. This is expected behavior.
Excerpt from video:
Here is defined codeigniter4 controller with form validation and view file. How can be reflected on view pages with errors.
Controller code is not reflected on view page . Could anyone clarify the issue of codeigniter4 validation.
Controller
public function register_user(){
helper(['form', 'url']);
$this->validation = \Config\Services::validation();
$validation = $this->validation;
$rules = [
'user_name' => [
'required' => 'All accounts must have usernames provided',
],
];
$this->validation->setRules([
'user_name' => 'required|min_length[2]',
],
$rules
);
if (! $this->validate($rules))
{
$validationErrors = $this->validation->getErrors();
return redirect()->back()->withInput()->with('errors', $validationErrors);
}
}
View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<style type="text/css">
.error{color: red;}
</style>
<span style="background-color:red;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Please do Registration here</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="<?php echo base_url('user/register_user'); ?>">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Please enter Name" name="user_name" type="text" autofocus>
<span class="error"><?php echo $validation->getError('user_name'); ?></span>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Register" name="register" >
</fieldset>
</form>
<center><b>You have Already registered ?</b> <br></b> Please Login</center>
</div>
</div>
</div>
</div>
</div>
</span>
</body>
</html>
Following is the current result:
you can try this controller
public function register_user(){
helper('form');
if (! $this->validate([
'user_name' => 'required|min_length[3]|max_length[255]'
]))
{
echo view('user/login');
}
else{
echo view('user/login_view');
}
}
and this view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<h2></h2>
<style type="text/css">
.error{color: red;}
</style>
<span style="background-color:red;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Please do Registration here</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="<?php echo base_url('user/register_user'); ?>">
<fieldset>
<div class="form-group">
<?= esc($user_name); ?>
<span class="error"><?= \Config\Services::validation()->listErrors(); ?></span>
<input class="form-control" placeholder="Please enter Name" name="user_name" type="text" autofocus>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Register" name="register" >
</fieldset>
</form>
<center><b>You have Already registered ?</b> <br></b> Please Login</center>
</div>
</div>
</div>
</div>
</div>
</span>
</body>
</html>
Dont forget to add route if this use:
$routes->add('/login', 'Login::login');
$routes->add('/user/register_user', 'User::register_user');
This post is not validated but the response of Wandi Tiger is ok for me.
With several rules you can do simply :
$validation = $this->validate([
'user_name' => 'required|min_length[10]|max_length[255]',
'user_pass' => 'required|min_length[10]|max_length[255]'
]);
if($validation)
{
echo view('user/login');
}
else{
echo view('user/login_view');
}
// Keep the old input values upon redirect so they can be used by the old() function
return redirect()->back()->withInput();
// Set a flash message
return redirect()->back()->with('foo', 'message');
You have combined both in your example which will not work
because the variable $validation which you are trying to access in view doesn't contain any data because you have not assigned any data to it
So you have to replace
if (! $this->validate($rules))
{
$validationErrors = $this->validation->getErrors();
return redirect()->back()->withInput()->with('errors', $validationErrors);
}
with this code:
if (! $this->validate($rules))
{
$data['validation'] = $this->validatior;
return view('view-name',$data); //note don't forget to replace view-name.
}
Don't change anything in the view file.
<!Doctype html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl" class="container jumbotron">
<div class="form-group">
<input type="text" class="form-control" ng-model="empName" placeholder="Please Enter Employee Name"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empUserId" placeholder="Please Enter Employee UserName"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empEmailId" placeholder="Please Enter Employee Email ID"/>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="saveData();">Save</button>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="loadData();">Load</button>
</div>
<hr/>
Employee Name : {{empData.empname}}<br/><br/>
Employee User ID : {{empData.empuserid}}<br/><br/>
Employee Email ID : {{empData.emailid}}
</div>
<script>
var app = angular.module("myApp", ['ngStorage']);
app.controller("myCtrl", function($scope, $localStorage){
$scope.saveData = function(){
var empData = {empname:$scope.empName,
empuserid: $scope.empUserId,
emailid : $scope.empEmailId
}
//$localStorage.name = $scope.empName;
//$localStorage.userid = $scope.empUserId;
//$localStorage.emailid = $scope.empEmailId;
$localStorage.empData = empData;
//window.localStorage.set("empData", JSON.stringify(empData));
}
$scope.loadData = function(){
//$scope.name1 = $localStorage.name;
//$scope.userid2 = $localStorage.userid;
//$scope.emailid3 = $localStorage.emailid;
$scope.empData = $localStorage.empData;
//$scope.empData = JSON.parse(window.localStoage.get('empData'));
}
$scope.loadData();
});
</script>
</body>
</html>
Just call $scope.loadData() at the bottom of your controller to fetch the data.
Try the below steps:
Step 1: Write a init() function inside app.controller and set ng-model values.
$scope.init = function () {
$scope.empName = $localStorage.empData.empname;
$scope.empUserId = $localStorage.empData.empuserid;
$scope.empEmailId = $localStorage.empData.emailid;
$scope.empData = $localStorage.empData;
}
Step 2: Call init() function in HTML using ng-init.
<div ng-controller="myCtrl" class="container jumbotron" ng-init="init()">
I am using an ajax script to stringify the values from a controller of an application which is spring rest web service application..problem is when the values in html in form i click a button, this script should work but doesn't get executed..can someone help me what's wrong in the script, is a load problem or something else, and what is the right way of making it executable???
Ajax Script
load$(document).ready(function () {
$("#submit").click(function () {
var url = 'http://localhost:8080/xxx/authenticate';
var jsondata = JSON.stringify({
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
});
postdata(url, jsondata, 1);
});
$('#register-dev').click(function () {
var url = 'http://localhost:8080/xxx/register';
alert(url);
var jsondata = JSON.stringify({
roleTb: {
roleId: parseInt($('#role').val())
},
firstName: $('#firstname').val(),
lastName: $('#lastname').val(),
emailId: $('#email').val(),
username: $('#username').val(),
password: $('#password').val()
});
postdata(url, jsondata, 2);
});
function postdata(url, jsondata, formId) {
var request = $.ajax({
type: "POST",
url: url,
contentType: 'application/json',
data: jsondata
});
request.done(function (msg) {
if (formId == 1) {
if (msg.errorcode == 200 && msg.obj == true) {
alert("Authentication Successful");
} else {
alert("Authentication failed");
}
}
if (formId == 2) {
if (msg.errorcode == 200) {
alert("Registration Successful Your Access Id is " + msg.obj);
} else {
alert("Registration failed");
}
}
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}
});
HTML FORM
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- Title and other stuffs -->
<title>xxxxxx Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-handler.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Favicon -->
</head>
<body>
<!-- Form area -->
<div class="admin-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Widget starts -->
<div class="widget worange">
<!-- Widget head -->
<div class="widget-head"> <i class="fa fa-lock"></i> Login</div>
<div class="widget-content">
<div class="padd">
<!-- Login form -->
<form class="form-horizontal">
<!-- Email -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputEmail">Email</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<!-- Password -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputPassword">Password</label>
<div class="col-lg-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<!-- Remember me checkbox and sign in button -->
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="col-lg-9 col-lg-offset-3">
<button type="button" id="submit" class="btn btn-info btn-sm">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
<br />
</form>
</div>
</div>
<div class="widget-foot">Not Registred? Register here
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You should prevent the default hard form submit if you wish to use asynchronous submission. Otherwise form gets refreshed
$("#submit").click(function (e) {
e.preventDefault();
check whether you really need to stringify the data. Normally, in most cases it's just enough to pass it as an object to jQuery.ajax(), unless the server really needs it as JSON string. jQuery internally does the necessary conversion. (serializes to query string) if it's an object or array.
var jsondata = {
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
};