We Keep Coding

Is there any way to create a POST HTTP request using window.location?

I have a web app built using node and express, and there is a form I want to submit in an ejs file, but I cannot use form.submit() because I want to pass parameters in the URL.
The form's id is "update" and the submit buttons id is "btnsubmit", I am currently trying to send the post request as follows:
var form = document.getElementById("update");
document.getElementById("btnsubmit").addEventListener("click", function () {
var lp = "1";
window.location = ("/dbinsertupdateditem?loadpage="+encodeURIComponent(lp));
});
On button click I get the error: Cannot GET /dbinsertupdateditem, because the express route is expecting a POST request. Is it possible to make a POST request with window.location or do I need to go about a different way of solving this?

You can not change how window.location.href works. As a result, you need post a form if the router expects it to be a post. If you have a form on the page you can just set the action
var form = document.getElementById("update");
form.action = "/dbinsertupdateditem?loadpage="+encodeURIComponent(lp);
form.submit();
If you do not have a form, create one
var form = document.createElement("form");
form.method = "POST";
form.action = "/dbinsertupdateditem?loadpage="+encodeURIComponent(lp);
document.body.append(form);
form.submit();
Or probably the best answer, change your backend to allow GET

What is different about a form submit action versus an AJAX request?

We have a form on a webpage that submits to an external URL and returns "1" on that webpage if it went through correctly.
We are trying to check against that response on our webpage so that we can redirect to a "Thanks for submitting" type page after we know the form went through. The issue I am running into is how to check against that value.
My first idea was to try and make the form submission through AJAX. I ran into CORS exceptions. That made me wonder: What is the difference between a form submitting to a URL and an HTTP request that I make via AJAX? Is there any way I can make my AJAX request essentially the same as what my HTML form is doing?
I have also tried loading the form response into an Iframe using the target attribute. I thought I would be able to just grab the response from the page with JavaScript, but I can't do that either because of CORS.

Taken from : Send POST data using XMLHttpRequest
Works like a charm - no CORS issues, no AJAX required
Create an iframe called transframe...
You can hide it in a hidden div if you like...
<script>
var my_params='a=b&c=d';
var Target_LINK='https://yourscript.php';
parsed_params={};
my_params.split("&").forEach(function(item) {
var s = item.split("="), k=s[0], v=s[1];
parsed_params[k] = v;});
post(Target_LINK, parsed_params);
}
function post(path, params) {
var xForm= document.createElement("form");
xForm.setAttribute("method", "post");
xForm.setAttribute("action", path);
xForm.setAttribute("target", "transFrame");
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("type", 'hidden');
hiddenField.setAttribute("value", params[key]);
xForm.appendChild(hiddenField);
}
}
document.body.appendChild(xForm);
xForm.submit();
xForm.remove();
}

Sending Data from a JS page to an HTML page without Form or URL

I want to send a variable from JavaScript to another HTML page and be redirected to that page, but I can't use forms because the first page is purely in JavaScript and a .js file so I can't declare a form. I also can't use the URL as my data is too big. What are other options? Every tutorial I've found uses either forms or the URL. Is there an alternative?
Based on this answer, I used the following code:
function post(array) {
var method = "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", "helloworld.html");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "array");
hiddenField.setAttribute("value", array);
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
}
and I call post(parameter) in another method.
It successfully redirects to helloworld.html, but how can I get the variable that I passed?

You can save the data in the localStorage and if the second page is in the same domain. The data has to be string.
Page One:
function sendData(){
localStorage.setItem("data", data);
location.href = "helloworld.html";
}
Save the data.
Page Two:
function onLoad(){
var data = storage.getItem("data");
}
Read the data.
Optional:
You could also create a JSON Object and save it with the function JSON.stringify

You can make an HTTP request from JavaScript:
// jQuery
$.get("demo_test.asp", function(data, status){
// do something
});
jQuery documentation is located here

You can use jQuery ajax API and send the data through POST request. See more:
here
or here
Edit: oops, I didn't notice that you don't have any server side handler enabled. In that case, if you do not want to use forms you can handle get/url parameters with jQuery.param() or use some routing enabling library.

How to make form.submit in Javascript quote delimit names and values of post data

I need to submit a programmatically created form using plain Javascript (no JQuery).
Everything works, except the post data arrives on the server without quotes (which the C# JsonConvert.DeserializeObject() method can't parse).
It arrives as token:a987a87f9k
But I want the data to arrive as 'token':'a987a87f9k'
What should I change in this code?
var form = document.createElement("form");
form.setAttribute("id", "noid");
form.setAttribute("method", "post");
form.setAttribute("action", url);
form.setAttribute("target", tabName);
form.setAttribute("style", "display: none;");
var field = document.createElement("input");
field.setAttribute("name", 'token');
field.setAttribute("value", AccountService.GetAuthenticationToken());
form.appendChild(field);
document.body.appendChild(form);
window.open('about:blank', tabName);
form.submit();
Read server-side:
//content = "token:a987a87f9k";
var content = request.Content.ReadAsStringAsync().Result;

The form post is sending the data to the server in a "form encoded format" while the server is expecting JSON. Either you change the settings on the server or you uses some technique like this one on the client: Convert form data to JavaScript object with jQuery

Could this cause a rails to detect a CSRF?

Ok, so in my rails app on one of the pages I needed to pass a Javascript variable so that it was available to rails. Now one runs server side and one runs client side so I know this is very difficult. I looked to the internet and found a solution that involved dynamically creating a form in a function included in my external javascript page.
Basically, a form with a hidden field was made using document.createElement statements and the hidden field was given the value of what I wanted to pass to rails and then form.submit() is called so that the form is submitted. the form was given a method of post and it was given a path to go to. So when submit it called the page redirects to another page with the hidden field now in the params hash and accessible by rails with params[:param].
This worked great for a while, until we started using session to keep track of a logged in user. After clicking the button to be redirected with that dynamic form the session gets cleared. The only thing I found online about sessions being cleared is when rails detects a CSRF it clears the session.
So could what I'm doing cause rails to detect a CSRF and thus clear my session? is there any other reason the session might be cleared that anybody knows of? Also, without ajax (because I'm just not up to screwing with that, it doesnt play nicely.) is there another good way im missing to pass a javascript variable (it has to be javascript, I'm using a javascript function to get the users current location) so that it is available to rails? (I'm thinking rather than javascripting the form, I might just make a hidden form right on my page, although this is a little less elegant because anybody looking at the source can see it and wonder why its there and screw with it)
if anybody is interested, below is the code for my dynamic form function.
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default, if not specified.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path); //page to go redirect to when form submitted
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
//after form is submitted params is available by params[:location]
hiddenField.setAttribute("name", 'location');
hiddenField.setAttribute("value", params )
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
}

In any form requests, and ajax the CSRF token must be passed through. You need to create a hidden field in the form with the name authenticity_token. Then you need to grab the value from the meta tag:
<meta content="some_token_value" name="csrf-token" />
Like so:
var token = "";
var tags = document.getElementsByTagName("meta");
for(var i = 0; i < tags.length; i++) {
if(tags[i].name == "csrf-param") {
token = tags[i].content;
}
}
Then simply drop that in the value of the hidden tag, much like you did for the location value.

you can add an erb line in your javascript file:
var csrf_token = '<%= form_authenticity_token %>';
then in your requests, add 'authenticity_token' : csrf_token in the post-data.