Develop Reference

Check required inputs with javascript

I have 4 inputs on my page, and on a button onClick, i want to check, that all the inputs are filled with text.
<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">
What i want : Store all the required inputs ID in an array, and on click, check, that is there any input, that is empty.
How can i do this at the simplest way?

Use required tag instead as given below
<input type="text" value="" id="input1" required>

you can also try adding REGEX for more strict checking
// using Plain JavaScript
var input1= document.getElementById('input1').value;
if(input1 == "" ){
alert("Input 1 is Empty");
return false;
}
var input2 = document.getElementById('input2').value;
if(input12 == "" ){
alert("Input 2 is Empty");
return false;
}
var input3 = document.getElementById('input3').value;
if(input3 == "" ){
alert("Input 3 is Empty");
return false;
}
var input4 = document.getElementById('input4').value;
if(input4 == "" ){
alert("Input 4 is Empty");
return false;
}

just incase the required attribute fails.. you can do this..
add a validate function to the blur event, that is when the user leaves the field..
<input type="text" onblur="validate(this)" value="" id="input1">
<input type="text" onblur="validate(this)" value="" id="input2">
<input type="text" onblur="validate(this)" value="" id="input3">
<input type="text" onblur="validate(this)" value="" id="input4">
<button> ... </button>
and using jquery you can do this..
function validate(obj){
if($(obj).val() == ''){
alert('this Field cannot be empty');
$(obj).focus(); //send focus back to the object...
}
}

<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">
jQuery(function($){
var arr = [];
// number of input elements
var count = $("input").length;
// store list of input ids
$("buttonName").on('click', function(event) {
$("input").each(function(i){
var currId = $(this).attr('id');
arr.push(currId);
if ($(this).val()=="") {
alert(currId+": has no input");
}
});
});
});

How to send data from HTML form to Google Spreadsheet using JavaScript?

I'm trying to build a webapp that records datas from a form in a Google Spreadsheet. To do this, I have to use JavaScript (JSON or AJAX requests will work as well), but I cannot use Google Apps Script because I need the user to keep using my pages and GAS doesn't allow it.
I'm not so much versed in JSON requests but I tried to make an append one: no surprise, it's not working and no surprise, I don't know why.
I'm not sure the URL I used to make the request and the code are correct, but not knowing very well how to proceed, it's quite difficult to know what's wrong in my code.
That's my form:
<form name="reqForm" id="reqForm" method="post" action="" accept-charset="UTF-8" enctype="application/json">
<input type="hidden" name="area" id="area" readonly/>
<input type="hidden" name="idN" id="idN" readonly/>
<input type="hidden" name="dataReq" id="dataReq" readonly />
<label for="nome">* Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Il tuo nome" />
<label for="cognome">* Cognome:</label>
<input type="text" id="cognome" name="cognome" placeholder="Il tuo cognome" />
<label for="mat">* Matricola:</label>
<input type="text" id="mat" name="mat" placeholder="La tua matricola" />
<label for="mail">* E-mail:</label>
<input type="text" id="mail" name="mail" placeholder="La tua e-mail" />
<label for="testo">* Richiesta:</label>
<textarea id="testo" name="testo" placeholder="Che cosa vuoi chiedere?"></textarea>
<button type="button" value="Invia" onClick="check()">Invia</button>
</form>`
The hidden values are set to provide an ID Number and the user's path.
The check() function will check the form and (should) make the request and write in the GSpreadSheet
function check() {
document.getElementById('errorForm').innerHTML = "";
var a = document.getElementById('area').value;
var idN = document.getElementById('idN').value;
var n = document.getElementById('nome').value;
var c = document.getElementById('cognome').value;
var m = document.getElementById('mat').value;
var em= document.getElementById('mail').value;
var t = document.getElementById('testo').value;
// check the possible errors and set error messages.
// if msg is not empty, writes the messages in my page.
} else if(msg == "") {
var xhr = new XMLHttpRequest();
var key = mySheetKey, sName = mySheetName, url = "https://sheets.googleapis.com/v4/spreadsheets/"+key+"/values/"+ sName + ":append?valueInputOption=USER_ENTERED";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
}
// Here I should create the object made of my variables I read
// from my form at the beginning of the code and send the request that
// should append my datas to my Spreadsheet
xhr.send();
}
}
As I said before, my code look similar to several ones I found online but it's not working and I don't know how to understand what's wrong.
Could you please kindly give me some tips or advice or some example that could help me appending data to a Google Spreadsheet?

A simple spreadsheet contained web app example
$(function() {
$('#btn1').click(validate);
$('#txt4').val('');
$('#txt3').val('');
$('#txt2').val('');
$('#txt1').val('')
});
function validate()
{
var txt1 = document.getElementById('txt1').value || ' ';
var txt2 = document.getElementById('txt2').value || ' ';
var txt3 = document.getElementById('txt3').value || ' ';
var txt4 = document.getElementById('txt4').value || ' ';
var a = [txt1,txt2,txt3,txt4];
if(txt1 && txt2 && txt3 && txt4)
{
google.script.run
.withSuccessHandler(setResponse)
.getData(a);
return true;
}
else
{
alert('All fields must be completed.');
}
}
The entire example:
The HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="data">
<br />Text 1<input type="text" size="15" id="txt1" />
<br />Text 2<input type="text" size="15" id="txt2" />
<br />Text 3<input type="text" size="15" id="txt3" />
<br />Text 4<input type="text" size="15" id="txt4" />
<br /><input type="button" value="submit" id="btn1" />
</div>
<div id="resp" style="display:none;">
<h1>Response</h1>
<p>Your data has been received.</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click(validate);
$('#txt4').val('');
$('#txt3').val('');
$('#txt2').val('');
$('#txt1').val('')
});
function setResponse(a)
{
if(a)
{
$('#data').css('display','none');
$('#resp').css('display','block');
}
}
function validate()
{
var txt1 = document.getElementById('txt1').value || ' ';
var txt2 = document.getElementById('txt2').value || ' ';
var txt3 = document.getElementById('txt3').value || ' ';
var txt4 = document.getElementById('txt4').value || ' ';
var a = [txt1,txt2,txt3,txt4];
if(txt1 && txt2 && txt3 && txt4)
{
google.script.run
.withSuccessHandler(setResponse)
.getData(a);
return true;
}
else
{
alert('All fields must be completed.');
}
}
function loadTxt(from,to)
{
document.getElementById(to).value = document.getElementById(from).value;
}
console.log('My Code');
</script>
</body>
</html>
The Apps Script:
function getData(a)
{
var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss");
a.push(ts);
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Login').appendRow(a);
return true;
}
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
My simple spreadsheet:
The good news is that you're probably a lot better at using the Google Chrome debugger now than before you started.

Sending a JSON object to a server using AJAX

I'm working on an app that needs to serialize form data to JSON objects and send them to a server using AJAX asynchronously(as the server accepts only JSON objects). There are two forms to consider:
frontend.html
<div class="login">
<h>Login</h>
<form id="login_form_id" onsubmit="sign_in_client()">
<label>Email: </label><input id="email0" type="email" name="l_email" required>
<br>
<label>Password: </label><input id="password0" type="password" name="l_password" required>
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="signup">
<h>Signup</h>
<form id="signup_form_id" onsubmit="sign_up_client()">
<label>First Name: </label><input id="fname1" type="text" name="s_fname" required>
<br>
<label> Last Name: </label><input id="lname1" type="text" name="s_lname" required>
<br>
<label> City: </label><input id="city1" type="text" name="s_city" required>
<br>
<label> Country: </label><input id="country1" type="text" name="s_country" required>
<br>
<label> Male: </label><input id="gender1" type="radio" name="sex" value="male" required>
<br>
<label> Female: </label><input type="radio" name="sex" value="female" required>
<br>
<label> Email: </label><input id="email1" type="email" name="s_email" required>
<br>
<label> Password: </label><input id="password1" type="password" name="s_password" required>
<br>
<label> Repeat Pas: </label><input id="password2" type="password" name="s_rpassword" required>
<br>
<label> </label><input type="submit" value="Submit">
</form>
</div>
The code that handles form input parsing is bellow:
frontend.js
function sign_up_client()
{
var xmlhttp;
var fields = {};
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("frontEnd").innerHTML=xmlhttp.responseText;
}
}
// Open connection to server asynchronously to the sign_up route function
xmlhttp.open("POST", "sign_up", true);
// Set the content type to JSON objects
xmlhttp.setRequestHeader("Content-type","application/json");
// Send the form parameters needed for a sign-up operation
// Serialize them into a JSON object first
$("signup_form_id").find("input, textarea, select").each(function() {
var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
}
xmlhttp.send(inputType);
});
}
The code for parsing the form data has been copied from this question. It's not very clear to me how the JSON object is being constructed. Are buttons and submit types included or not in the above example? Is the form whose inputs need to be parsed correctly picked(by id)?
At the end of the function is inputType a proper JSON object ready to be sent as is?
Edit #1:
frontend.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="client.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="client.js"></script>
<script type="text/javascript" src="serverstub.js"></script>
</head>
<body>
<div class="welcome">
<img src="wimage.png" alt="Twidder Icon;" >
<div class="login">
<h>Login</h>
<form id="signin_form_id" onsubmit="sign_in_client()">
<label>Email: </label><input type="email" name="l_email" required>
<br>
<label>Password: </label><input id="password0" type="password" name="l_password" required>
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="signup">
<h>Signup</h>
<form onsubmit="sign_up_client()">
<label>First Name: </label><input id="fname1" type="text" name="s_fname" required>
<br>
<label> Last Name: </label><input id="lname1" type="text" name="s_lname" required>
<br>
<label> City: </label><input id="city1" type="text" name="s_city" required>
<br>
<label> Country: </label><input id="country1" type="text" name="s_country" required>
<br>
<label> Male: </label><input id="gender1" type="radio" name="sex" value="male" required>
<br>
<label> Female: </label><input type="radio" name="sex" value="female" required>
<br>
<label> Email: </label><input id="email1" type="email" name="s_email" required>
<br>
<label> Password: </label><input id="password1" type="password" name="s_password" required>
<br>
<label> Repeat Pas: </label><input id="password2" type="password" name="s_rpassword" required>
<br>
<label> </label><input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
frontend.js
function sign_up_client()
{
var xmlhttp;
var jsonObject = {};
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
// Open connection to server asynchronously towards the sign_up route function
xmlhttp.open("POST", "sign_in", true);
// Set the content type to JSON objects
xmlhttp.setRequestHeader("Content-type","application/json");
// Send the form parameters needed for a sign-up operation
// Serialize them into a JSON object first
$("form").on("submit", function() {
var jsonObject = {};
$(".signup").find("input, textarea, select").map(function(index, elem) {
//Ingore types such as button, submit and radio
elem.type.match(/button|submit|radio/i) === null &&
(jsonObject[elem["name"]] = elem.value || "")
//If type = radio, grab the selected radio's value
elem.type.match(/radio/i) !== null &&
elem.checked && (jsonObject[elem["name"]] = elem.value || "")
});
alert (JSON.stringify(jsonObject, null, 4));
return false;
});
alert (JSON.stringify(jsonObject, null, 4));
// Send the JSON object
xmlhttp.send(jsonObject);
}
function sign_in_client()
{
var xmlhttp;
var jsonObject = {};
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
// Open connection to server asynchronously towards the sign_up route function
xmlhttp.open("POST", "sign_in", true);
// Set the content type to JSON objects
xmlhttp.setRequestHeader("Content-type","application/json");
// Send the form parameters needed for a sign-up operation
// Serialize them into a JSON object first
$("form").on("submit", function() {
var jsonObject = {};
$(".login").find("input, textarea, select").map(function(index, elem) {
//Ingore types such as button, submit and radio
elem.type.match(/button|submit|radio/i) === null &&
(jsonObject[elem["name"]] = elem.value || "")
//If type = radio, grab the selected radio's value
elem.type.match(/radio/i) !== null &&
elem.checked && (jsonObject[elem["name"]] = elem.value || "")
});
alert (JSON.stringify(jsonObject, null, 4));
return false;
});
alert (JSON.stringify(jsonObject, null, 4));
// Send the JSON object
xmlhttp.send(jsonObject);
}

Here is a quick way of constructing a JSON object from form fields for your specific case.
var o = {};
$(".signup").find("input, textarea, select").map(function(index, elem) {
//Ingore types such as button, submit and radio
elem.type.match(/button|submit|radio/i) === null &&
(o[elem["name"]] = elem.value || "")
//If type = radio, grab the selected radio's value
elem.type.match(/radio/i) !== null &&
elem.checked && (o[elem["name"]] = elem.value || "")
});
Now, you can send o as your JSON object.
Here is a demo for the same.

Try this example:
In below code, jQuery ajax syntax is used as it appear more simplified to me. To fetch the values from form fields, serialize method is used.
$('form').on('submit', sign_up_client);
function sign_up_client(e) {
e.preventDefault();
var formJson = [];
$(this).find(':input').each(function (index, elem) {
var inputType = this.tagName.toUpperCase() === "INPUT" &&
var formObj = {};
if (inputType === "RADIO") {
if ($(elem).is(":checked")) {
formObj[$(elem).attr('name')] = $(elem).val();
formJson.push(formObj);
}
}
else if (inputType !== "BUTTON" && inputType !== "SUBMIT")
formObj[$(elem).attr('name')] = $(elem).val();
formJson.push(formObj);
}
});
$.ajax({
type: "POST",
url: "test.php",
data: formJson,
dataType: "json",
success: function (data) {
},
error: function () {
alert('error handing here');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
<h>Login</h>
<form id="login_form_id" method="post">
<label>Email:</label>
<input id="email0" type="email" name="l_email" required>
<br>
<label>Password:</label>
<input id="password0" type="password" name="l_password" required>
<br>
<br>
<input type="submit" value="Submit">
</form>
</div>
<div class="signup">
<h>Signup</h>
<form id="signup_form_id" method="post">
<label>First Name:</label>
<input id="fname1" type="text" name="s_fname" required>
<br>
<label>Last Name:</label>
<input id="lname1" type="text" name="s_lname" required>
<br>
<label>City:</label>
<input id="city1" type="text" name="s_city" required>
<br>
<label>Country:</label>
<input id="country1" type="text" name="s_country" required>
<br>
<label>Male:</label>
<input id="gender1" type="radio" name="sex" value="male" required>
<br>
<label>Female:</label>
<input type="radio" name="sex" value="female" required>
<br>
<label>Email:</label>
<input id="email1" type="email" name="s_email" required>
<br>
<label>Password:</label>
<input id="password1" type="password" name="s_password" required>
<br>
<label>Repeat Pas:</label>
<input id="password2" type="password" name="s_rpassword" required>
<br>
<label></label>
<input type="submit" value="Submit">
</form>
</div>

Show hidden element when form validation is successful

I'm trying to show a div if all fields of a HTML form are filled with at least one character.
<input name="name" id="name" value="" required placeholder="Name"></input>
<input name="surname" id="surname" value="" required placeholder="Surname"></input>
<input name="email" id="email" value="" required placeholder="Email"></input>
<textarea name="comments" value="" required placeholder="Comments"></textarea>
<div id="test" style="display:none;">test</div>
and I've got this script
<script type="text/javascript">
if(document.getElementById('name').value!='' &&
document.getElementById('surname').value!='' &&
document.getElementById('email').value!='' &&
document.getElementById('message').value!=''){
document.getElementById('test').style.display = 'block';
}
</script>
but it doesn't work. Why? I tried to move the script from top to the bottom of the file but the div 'test' is always hidden. what is wrong with my sciript?

You have two errors, first you have not assigned any ID to your textarea which you are using in your script. Second, the function must be called upon everytime the user makes any change, so you need to bind the onchange event.
So, it should be:
HTML:
<input name="name" id="name" value="" required placeholder="Name" onchange="myUpdateFunction()"></input>
<input name="surname" id="surname" value="" required placeholder="Surname" onchange="myUpdateFunction()"></input>
<input name="email" id="email" value="" required placeholder="Email" onchange="myUpdateFunction()"></input>
<textarea name="comments" id="message" value="" required placeholder="Comments" onchange="myUpdateFunction()"></textarea>
<div id="test" style="display:none;">test</div>
JavaScript:
<script type="text/javascript">
function myUpdateFunction() {
if(document.getElementById('name').value!='' &&
document.getElementById('surname').value!='' &&
document.getElementById('email').value!='' &&
document.getElementById('message').value!='') {
document.getElementById('test').style.display = 'block';
}
}
</script>

You need to call that script every time a field is changed.
For instance:
<input name="name" id="name" value="" required placeholder="Name" onchange="myFunction()"></input>
etc.
<script type="text/javascript">
function myFunction() {
if(document.getElementById('name').value!='' &&
document.getElementById('surname').value!='' &&
document.getElementById('email').value!='' &&
document.getElementById('message').value!=''){
document.getElementById('test').style.display = 'block';
}
}
</script>

I see you linked jquery. Why not use it if you have it?
$('input').on('change', function(){
if($('#name').val() != '' && $('#surname').val() != '' && $('#email').val() != '' && $('#comments').val() != ''){
$('#test').show();
}else{
//This part is optional
$('#test').hide();
}
});
You should also add id="comments" in your textarea

The first issue is when the script is running. As coded it will run as soon as the page renders the script, and never again.
You will probably want to wire it up to the on change event of each text box so you can know when to show the hidden field.
Second, where is the "message" element? Is that supposed to be comments? If so, comments is missing an Id (has a name but no Id)

http://jsfiddle.net/7hafkwhj/1/
First of all it could be a good idea to wrap your elements inside an html tag form:
<form id="form">
<input name="name" type="text" placeholder="Name" required></input>
<input name="surname" type="text" placeholder="Surname" required></input>
<input name="email" type="email" placeholder="Email" required></input>
<textarea name="comment" placeholder="Comments" required></textarea>
</form>
<div id="message">Ok, roger</div>
Also, I don't understand why you should use jQuery for this kind of stuff. You can make the same thing using native Javascript:
(function() {
var form = document.getElementById('form'),
message = document.getElementById('message');
function makeCheck()
{
i = 0;
while(i < form.elements.length) {
if(form.elements[i].value === '')
{
return false;
}
i++;
}
return true;
}
function displayMessage()
{
if(makeCheck())
{
message.style.display = 'block';
}
else
{
message.style.display = 'hide';
}
}
for(i = 0; i < form.elements.length; i++)
{
form.elements[i].onkeyup = function () {
displayMessage();
};
}
})();

$_REQUEST['url'] is getting wrong url

I have a form defined like this:
<table>
<form id="myForm" method="post">
<tr><td> Item Name: </td><td><input type="text" name="itemname" id="itemname"/></td></tr>
<tr><td> Description:</td><td> <input type="text" name="description" id="description"/></td></tr>
<tr><td> Sell Time:</td><td> <input type="test" name="selltime" id="selltime"/></td></tr>
<tr><td> Price:</td><td> <input type="test" name="price" id="price"/></td></tr>
<tr><td> Image URL:</td><td> <input type="test" name="url" id="url"/></td></tr>
<tr><td><input type="submit" value="Post" name="info" onclick="return post();"></td></tr>
</form>
</table>
As you can see, onclick it calls the function post(). Which in turn reads the file post.php and sends it the required parameters (itemname,description,selltime,price,url). And finally they get inserted to some table in a database.
Here's the beginning of the file post.php:
<?php
session_start();
mysql_connect("localhost","root","password") or die("couldnt connect");
mysql_select_db("mynewdb") or die("couladnt find");
$output = '';
if(isset($_REQUEST['itemname']) && isset($_REQUEST['description'])
&& isset($_REQUEST['selltime']) && isset($_REQUEST['price']) &&
isset($_REQUEST['url'])){
$url = $_REQUEST['url'];
...
?>
Problem is url is sometimes got wrong. For example if i enter this url: coca cola
http://www.comax.co.il/Max2000Upload/1443/Prt_Pic%5C1%5C864.jpg
I get this inserted instead:
http://www.comax.co.il/Max2000Upload/1443/Prt_Pic1864.jpg
Why is that?
edit:
As requested, following is the post() function:
<script>
function post()
{
var itemname = document.getElementById('itemname').value;
var description = document.getElementById('description').value;
var selltime = document.getElementById('selltime').value;
var price = document.getElementById('price').value;
var url = document.getElementById('url').value;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("posted").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("POST","post.php?itemname="+itemname+ "&description="+description+ "&selltime="+selltime
+"&price="+price+"&url="+url,true);
xmlhttp.send();
return false;
}
</script>

The "%5C" stands for a "\" and it might be escaping the following numbers, try to replace them with a "\\", this should keep the backslash in the url.