Insert data to Google sheets in javascript - javascript

I'm trying to save a post request data to a google spreadsheet. However, the data is saved as undefined.
The original post uses a form and uses jquery. See the link below. But I'm trying to pass an array also without the use of jquery.
I'm using the following app script without using jquery - https://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/
I'm posting the code here.
function sendData(data) {
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "spreadsheeturl";
xmlhttp.open("post", theUrl);
//xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(JSON.stringify(data))
}

I found the answer, you have to uncomment a block in the app script if you are passing JSON data.

Related

Android send data to JavaScript methods

How do I send data to JavaScript methods/functions?
I saw toast examples with javascriptInterface, but I am unable to relate it to my scenario.
My JavaScript function:
function printInfo() {
var request = new AudioFileRequest('1.wav');
request.send();
}
I want to record the sound in mobile and send that sound file to the method "AudioFileRequest".
I assume that you already loaded a file with the printInfo function to a web view.
To execute some JavaScript code from the Java side you may load a JavaScript function, for example:
String data = "1.wav";
webview.loadUrl("javascript:printInfo('" + data + "')");
And your JavaScript function is:
function printInfo(fileName) {
var request = new AudioFileRequest(fileName);
request.send();
}

FormData object always empty

I am trying to create form data to send within a post request (to a PHP script) with FormData.
However, the FormData object is always empty:
var oReq = new XMLHttpRequest();
var url = "http://www.test.com/test.php";
oReq.open("POST", url, true);
oReq.setRequestHeader("Content-Type","multipart/form-data");
var myFormData = new FormData();
myFormData.append("formType","PDF");
myFormData.append("pdf", pdf.output(),"thisPDF.pdf");
oReq.send(myFormData);
the 'pdf' variable is a jsPDF object (I've checked that it is a valid object and I have tried to remove that line and only have the "test" form data element sent. Yet, myFormData is always an empty object. Hoping I'm just missing something simple here.
In addition, when I try to check for the existence of the form elements in the PHP script, it shows no $_POST and no $_FILE elements at all.
ADDITIONAL INFO:
When I try this code:
var oReq = new XMLHttpRequest();
var url = "http://www.test.com/test.php";
oReq.open("POST", url, true);
oReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var myFormData = new FormData();
myFormData.append("formType","PDF");
alert(JSON.stringify(myFormData));
oReq.send(myFormData);
I can then access the "formType" $_POST variable in the php script. But if I add in the File append statement to the myFormData object (and keep the same 'Content-Type', the PHP script errors returning a "not allowed access" error.
However, the $_POST is set according to isset($_POST) in both cases and with the file inserted the $_FILE variable is set according to isset($_FILE).
Remove the oReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); from the code. Browser automatically set multipart/form-data header, if you add file in FormData.

Set AJAX Content Type with plain JavaScript (No JQuery)

I'm working on form submission with AJAX but using plain JavaScript, no external libraries.
I've been having a problem when it comes to parsing the form as the PHP doesn't seem to be parsing the data correctly.
From some research on the internet, I've seen people set the content type to "false". The problem is however, they are are using JQuery to do this and I'm not sure how I do this in plain JavaScript.
I am only submitting a file and my PHP processes forms uploaded the traditional way perfectly.
The AJAX also seems to work flawlessly and I see no fault in the code. Here is my upload function.
var fd = new FormData();
fd.append("upload-file", document.getElementById('upload-file').files[0]);
var xhr = new XMLHttpRequest();
/* I add some event listeners here for progress, load, error, and abort */
xhr.open("POST", "upload.php");
xhr.send(fd);
In order to set the content type you need to modify the request header.
I don't know which content type you'd like to set, so I've defaulted to json.
Here's how you can set it:
var fd = new FormData();
fd.append("upload-file", document.getElementById('upload-file').files[0]);
var xhr = new XMLHttpRequest();
/* I add some event listeners here for progress, load, error, and abort */
xhr.open("POST", "upload.php");
xhr.setRequestHeader("Content-type","application/json");
xhr.send(fd);
EDIT: Setting HTTP request headers from MDN

Get JSON in a Google Chrome Extension

I would like to make a google chrome extension, however I have been rubbing my head on a problem all night. I have the following code giving me a problem:
var xhr = new XMLHttpRequest();
var resp;
xhr.open("GET", "http://www.roblox.com/catalog/json?Subcategory=16&SortType=3&ResultsPerPage=10", true);
xhr.onload = function () {
resp = JSON.parse(xhr.responseText);
}
xhr.send();
I'm attempting to obtain some JSON data. If I replace this section of code with var resp = //(The actual JSON data itself), then the extension works just fine.
How can I fetch this JSON data correctly, and still have it compactable with anyone who downloads my extension?
Sorry if there's an obvious answer, I'm still new to Javascript.
Thanks!
Try setting the content type. Not all browsers use the same default.
xhr.setRequestHeader("Content-Type", "*/*");

Blank $_POST var in PHP using AJAX

All I'm trying to do is send a string, in html, to a script written in PHP. I've tried several solutions, including making an html element and putting it in a form and then passing the form (didn't work). I don't know the basics of AJAX or PHP, everything is just kind of being pieced together via what I can google. Here's one way I trying to remedy the situation: (The regexp replaces the first line of the file, which I works. I tried foreach loops with assigning a variable to $_POST[$key], I tried sending just the string with html hoping that would work. I believe the problem lies in the HTML, or in the AJAX call, because I can make the form submit() to the .php file and then it works, however, that would change the browser location to that file and obviously with AJAX, that's not what I want. Anyone have any ideas (other than JQuery syntax)?
HTML
<form>
<input type="hidden" name="test" id="test" value="testString">
</form>
JavaScript AJAX call
function sendString()
{
var data = document.getElementById("test");
var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open('POST', 'testing.php', true);
xhr.send(data);
}
PHP File
<?php
$line = $_POST['data'];
$file = 'test.txt';
file_put_contents($file,preg_replace('/^.+/',$line,file_get_contents($file),1));
?>
EDIT: Thanks for the responses, but non have worked. I tried:
document.getElementById("test");
document.getElementById("test").value;
and
xhr.send(data.value);
None of these worked. Still Blank lines. I also tried the extended solution.
Your problem is here:
var data = document.getElementById("test");
You're creating a reference to your html element. You need to reference the value property of your element.
var data = document.getElementById("test").value;
Also, you are only sending the value and not a key value pair to the server. So xhr.send(data); will only send the value. Your PHP script won't know that $_POST['data'] is what you mean. You need to format var data as
var data = "data=" + document.getElementById("test").value;
EDIT
To send form data via POST, you may need to add some header information.
xhr.open('POST', 'testing.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
// change your function
function sendString()
{
var data = "data="+document.getElementById("test").value;
var xhr= new XMLHttpRequest();
xhr.open('POST', 'testing.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
In testing.php you can call them via $_POST:
echo $_POST['data'];
Example here: http://www.openjs.com/scripts/examples/ajax_using_post.php

Categories