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!
Related
i want something like this
Image form bootstrap
but i get this instead
Image on my localhost
And this is my code:
<input
type="password"
class="form-control"
placeholder="contraseña"
id="password-input"
aria-label="password input"
aria-describedby="password-input"
/>
<span class="input-group-text" id="password-input">#</span>
All the examples that i see in internet are the same, looks nice but i put the code in my proyect and don't work :(
Wrap your input and span tag with this way
<div class="input-group flex-nowrap">
<input type="password" class="form-control" placeholder="contraseña" id="password-input" aria-label="password input" aria-describedby="password-input" />
<span class="input-group-text" id="password-input">#</span>
</div>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
i {
cursor: pointer;
}
</style>
<body>
<div>
<!-- Password field -->
<label for="Password">Password:
<input type="password" class="border border-0" value="" id="myInput">
<!-- An element to toggle between password visibility -->
<i class="fa fa-eye" style="font-size:24px" onclick="myFunction()"></i>
</label>
</div>
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
I'm trying to go like author in youtube here
https://www.youtube.com/watch?v=yiPnkBEHqf0&list=PLRmEk9smitaVGAAhgU0Pdc2sEs7yxDrEk&index=2
the task to send data to google spreadsheet from html to spreadsheet
this script I wrote from js with fetch:
const url = "https://script.google.com/macros/s/AKfycbzPNAtqRkYrkbJ8SuDu5mLrtn8A3syzkU7CwzXHUEHXTxJbSLKn/exec";
var loginText = document.getElementById("tLogin");
var tableText = document.getElementById("tTable");
var orderText = document.getElementById("tOrder");
function testGS(){
var userInfo = {
login: loginText.value,
table: tableText.value,
order: orderText.value,
tdate: new Date().toLocaleDateString(),
//komm: kommText.value,
};
fetch(url, {
method: 'POST',
body: JSON.stringify(userInfo)
})
.then((res) => res.text())
.then((res) => console.log(res));
}
document.getElementById("del").addEventListener("click", testGS);
This I wrote in Apps script:
<!-- begin snippet: js hide: false console: true babel: false -->
The html-page is here.
<!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 rel="stylesheet" href="CSS/main_page_style.css">
<link rel="icon" href="Image/favicon.png" type="png">
<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">
</head>
<body>
<div class="conteiner">
<form novalidate>
<h6 class="title">PACKING</h6>
<img src="Image/mainImg.jpg" class="img-fluid" alt="...">
<div class="dws-input">
<div class="col-md-3"></div>
<div>
<div>
<button id="del" type="button"><======СБРОС</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">Логин:</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">Номер стола:</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="type3">Заказ:</label>
</div>
</div>
</form>
</div>
<script src="JS/fetchNew.js"></script>
</body>
</html>
Js-script with fetch must be start by clicking button "del" and data must go to spreadsheet. But I take some errors. I have broke my brain, I tryed to reinstall node.js, clasp, tried to login again, prn init, republished my project, but mistake is the same
Can you help me what I forgot? Thank you for help!
The path with spreadsheet is here https://drive.google.com/drive/folders/1JwWgndNrcM2hgxyE3CBF0SKOxZarwCCf?usp=sharing
I need help!
I need open html form from another html form by button PUTAWAY START.
At html code I have this button, but I cant understand how to write script to command for button.
I don't know where to start. Thank you for help!
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn1" style="width: 100%">PUTAWAY START</button>
</div>
</div>
I know that it must be by function doGet(e) but how?
Thanks to help from Ron I add his script to my project.
Main form:
<!doctype html>
<html lang="en">
<head>
<base target="_top">
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KOP#CK-M#IN-MENU</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<?!= include("main-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<link id="favicon" rel="shortcut icon" type="image/png" href="https://drive.google.com/file/d/14GrCbJYe3RExAKL_6yuF3kH1EO0L7zge/view?usp=sharing" />
<h6 style="color:blue;"><em>KOP#CK M#IN MENU:</em></h6>
<img src="https://drive.google.com/uc?export=download&id=14GDoNMZxgHlfTKMHmtamXmu93y2jaDy6" class="img-fluid" alt="...">
<form>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<input type="button" class="btn btn-primary" value="PUT#WAY ST#RT" style="width: 100%" onclick="Link1()"/>
</div>
</div>
<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn2" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn3" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<?!= include("main-js"); ?>
</body>
</html>
and script in include-main:
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById("PreLoaderBar").style.display = "none";
}
}
function Link1(){
var url = document.getElementById("url").value;
console.log(url);
var link = document.createElement('a');
console.log(link);
link.href = url + "&page=Link1";
link.id = 'linkURL';
console.log(link);
document.body.appendChild(link);
document.getElementById('linkURL').click();
}
Script in "doGet":
function doGet(e){
var params = JSON.stringify(e);
console.log(params);
console.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("PUTAWAY_TO").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
}
You can use the doGet(e) event parameters as your condition to determine which html form you will create
Sample Code:
Code.gs
function doGet(e){
var params = JSON.stringify(e);
Logger.log(params);
Logger.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("Form1").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
}
Main.html
<body>
<h1>Welcome to Main Form</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Link 1" onclick="link1()" />
</body>
<script>
function link1()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Link1";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
Form1.html
<body>
<h1>Welcome to Form 1</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Back to Main" onclick="main()" />
</body>
<script>
function main()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Main";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
What it does?
Creates a href link in your html page, the href link contains an event parameter "page". link.href = url+"?page=Link1";
When doGet(e) was called, It will check the page parameter in the event object. Then select the form you want to use based on the page parameter provided.
Additional References:
Create Views (Pages) in Web App - Google Apps Script Web App Tutorial - Part 7
Link HTML Pages using Google Apps Script Web App
I want to send all the input data acquired from a html form and show them (as a preview) in another html form.
My first html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form id="details" method="POST">
Full name: <input type="text" id="name" size=25 "><br><br>
Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()">ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
E-mail: <input type="email" id="email" size=25><br><br>
Upload ID Card: <input type="file" accept=".jpeg , .png" id="img"><br><br>
</form>
<button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
</body>
</html>
The javascript (back_end.js)
var btn=document.getElementById("button");
function submit(){
var file = document.getElementById("img").files[0];
const reader = new FileReader();
reader.addEventListener("load", (event) => {
localStorage.setItem("Image", event.target.result);
const dForm = document.getElementById('details');
dForm.addEventListener('submit', function(e) {
e.preventDefault();
fetch("preview.html", {
method: 'post',
mode: 'cors',
headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, HEAD, OPTIONS'},
body: JSON.stringify({
full_name: document.getElementById("name").value,
mobile: document.getElementById("ph_number").value,
Email: document.getElementById("email").value,
image: localStorage.getItem('Image'),
id: document.getElementById("org_number").value
})
}).then(function (response){
return response.text();
}).then(function (text){
console.log(text);
}).catch(function (error){
console.error(error);
})
});
window.location.href = "preview.html";
});
reader.readAsDataURL(file);
}
My second html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="preview_back_end.js"async></script>
<link rel="stylesheet" href="preview_styles.css">
</head>
<body>
<h2>Please finalize your details</h2>
<form id="details" method="post" class="form">
Full name: <strong name="name_1" value=""></strong><br><br>
ID No:<strong name="org_number_1" value=""></strong><br><br>
Mobile No:<strong name="ph_number_1" value=""></strong><br><br>
E-mail: <strong name="email_1"></strong><br><br>
ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>
<button id="go" style="background-color: whitesmoke">It's correct</button>
</form>
<button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
<p id="response"></p>
</body>
</html>
Now I want to fetch those values and write them in this new html form, how do I do that? Also, from the second html page I want to post the data into my php script.
Oh, This is the front end.
But you need backend.
You can use "PHP" implement form upload.
Only using javascript can not achieve form upload.
***.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form id="details" method="POST" action="demo.php">
Full name: <input type="text" id="name" size=25 " name="fullname"><br><br>
Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()" name="org">ID no: <input type="number" id="org_number" style="visibility: hidden" name="id"><br><br>
<input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required name="mobile"></div><br><br>
E-mail: <input type="email" id="email" size=25 name="email"><br><br>
Upload ID Card: <input type="file" accept=".jpeg , .png" id="img" name="idcard"><br><br>
</form>
<button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
</body>
</html>
demo.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="preview_back_end.js"async></script>
<link rel="stylesheet" href="preview_styles.css">
</head>
<body>
<h2>Please finalize your details</h2>
<form id="details" method="post" class="form">
Full name: <strong name="name_1" value=""><?php echo $_POST["fullname"]; ?></strong><br><br>
ID No:<strong name="org_number_1" value=""><?php echo $_POST["id"] ?></strong><br><br>
Mobile No:<strong name="ph_number_1" value=""><?php echo $_POST["mobile"] ?></strong><br><br>
E-mail: <strong name="email_1"><?php echo $_POST["email"]; ?></strong><br><br>
ID Card: <img src="<?php echo $_POST["idcard"]; ?>" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>
<button id="go" style="background-color: whitesmoke">It's correct</button>
</form>
<button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
<p id="response"></p>
</body>
</html>
You also need to specify whether to get or post.
You can ask me any questions.
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()
};