I have some data that needs to be transferred to an array and then sent to a Google Sheet. The data looks like this: -|PO: 2005 | 12121211212121,| Qty: 45| BIN:110| eBay| 11/6/2017-| PO: 2165 | 333333333,| Qty: 54| BIN:20| google| 11/6/2017-
First, I use JavaScript to transfer the data to an array, then put all the data from the array into a form and click submit.
Here is what the array looks like:
(6) ["PO: 2005 ", " 12121211212121,", " Qty: 45", " BIN:110", " eBay", " 11/6/2017"] index.html:62 (6) [" PO: 2165 ", " 333333333,", " Qty: 54", " BIN:20", " google", " 11/6/2017"]
The form should be submitted multiple times, but only the data for the first entry is showing up on the Google Sheet.
This code snippet below shows my main HTML structure:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
//
$(document).ready(function() {
//
$('#googleSheetInsert').bootstrapValidator({
//submitButtons: '#postForm',
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
var url = ' ';
var redirectUrl = 'index.html';
// show the loading
$('#postForm').prepend($('<span></span>').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate'));
var jqxhr = $.post(url, $form.serialize(), function(data) {
console.log("Success! Data: " + data.statusText);
// $(location).attr('href',redirectUrl); relocation
})
.fail(function(data) {
console.warn("Error! Data: " + data.statusText);
// HACK - check if browser is Safari - and redirect even if fail b/c we know the form submits.
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
//alert("Browser is Safari -- we get an error, but the form still submits -- continue.");
$(location).attr('href',redirectUrl);
}
});
});
});<html>
<head>
<title>Getting Started Extension's Popup</title>
<link href="http://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>
<style type="text/css">
body {
margin: 10px;
white-space: nowrap;
}
h1 {
font-size: 15px;
}
#container {
align-items: center;
display: flex;
justify-content: space-between;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script>
function submitDataToGoogleSheet(){
var dataFromInput = document.getElementById("SOS_POData").value;
// Split by -| and put to array
var filter0 = dataFromInput.split("-|");
// Remove Empty Element
var unitArray =[];
for(var i=0;i<filter0.length;i++){
if(filter0[i]!==""){
unitArray.push(filter0[i].split("|"));
}
}
// insert data to google sheet
for(j=0;j<unitArray.length;j++){
doSubmite(unitArray,j);
}
}
function doSubmite(unitArray,j){
console.log(unitArray[j]);
document.getElementById('PO_Number').value = ((unitArray[j][0]).substring(4)).replace(/(^\s*)|(\s*$)/g,"");
document.getElementById('Part_Number').value = (unitArray[j][1]).replace(/(^\s*)|(\s*$)/g,"");
document.getElementById('Qty').value = ((unitArray[j][2]).substring(5)).replace(/(^\s*)|(\s*$)/g,"");
document.getElementById('BIN').value = (unitArray[j][3]).substring(5);
document.getElementById('Receiver_Name').value = (unitArray[j][4]).replace(/(^\s*)|(\s*$)/g,"");
document.getElementById('Receiver_Data').value = (unitArray[j][5]).replace(/(^\s*)|(\s*$)/g,"");
document.getElementById('postForm').click();
}
</script>
</head>
<body>
<h1>Please copy all information from label in there.</h1>
<div id="container">
<form id="dataFromSOS" action="#" method="post">
<input type="text" name="SOS_POData" id="SOS_POData" required="" placeholder="Please copy all label information in there">
<input type="button" name="submit_form" value="Submit" onclick="submitDataToGoogleSheet()">
</form >
</div>
<div>
<form id="googleSheetInsert">
<label>PO</label>
<input id='PO_Number' name='PO_Number' type='text'>
<label>PartNumber</label>
<input id='Part_Number' name='Part_Number' type='text'>
<label>Qty</label>
<input id='Qty' name='Qty' type='text'>
<label>BIN</label>
<input id='BIN' name='BIN' type='text'>
<label>Receiver_Name</label>
<input id='Receiver_Name' name='Receiver_Name' type='text'>
<label>Receiver_Data</label>
<input id='Receiver_Data' name='Receiver_Data' type='text'>
<input type="submit" name="submit" id="postForm" />
</form>
</div>
<script src="js/sendDataToGoogleSheedAjax.js"></script>
</body>
</html>