-1

From JavaScript I'm trying to pass some variables to the backend. My code is as follows.

My requirement:

I am hoping to send the name, email and description of the user which will definitely come to more that 300 characters and will not comply with a GET request. Therefore, how can I send a POST request with these parameters. Can someone help me out.

Note: My backend is in C#

window.location.href = "/Account/New?fullname=". $data.fullName;
Illep
  • 14,274
  • 40
  • 148
  • 258
  • `"/Account/New?fullname="+$data.fullName;` use `+` instead of `.` to concate. – Zakaria Acharki Dec 14 '16 at 11:35
  • 1
    Reason for the downvote ? – Illep Dec 14 '16 at 11:36
  • get request is actually 'a bit' more then 300 characters, unless you are trying to be safe vs. network boxes. then your limit is 255. Anyways, depending on the library/framework of choice, the answer will be different. In vanilla javascript you can read here: [http://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest]. Btw, for 4+k rep your question is somewhat poorly researched. – Vladimir M Dec 14 '16 at 11:40
  • I believe the reason for downvote is that googling this issue will produce tons of results – Alexey Zimarev Dec 14 '16 at 15:22

2 Answers2

2

By using window.location you are sending the parameters by the URL - which means they are sent by a GET method and not by POST.

To send data to the server using POST method, you'll have to either send it by a form which is defined with method="post" or, if you don't want to create a form element, by an AJAX XMLHttpRequest request.

I would suggest, for learning and simplicity, to start with a simple form, such as:

<form action="your-page-after-submittion.html" method="post">
   <p>Your full name: <input type="text" name="fullname" /><br />
   E-mail: <input type="text" name="email" /></p>

   <p>Your message:<br />
   <textarea name="message" rows="10" cols="40"></textarea></p>

   <p><input type="submit" value="Send the from"></p>
</form>

Or if you want an AJAX request, you can use the following:

//prepare your data values to be sent in the request
var fullname = document.getElementById("fullname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;

//create an XMLHttpRequest                  
var xmlhttp;

if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//submit the request to your desired page (user will not be redirected, as this is AJAX request                             
xmlhttp.open("POST","your-page-after-submittion.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fullname="+fullname+"&email="+email+"&message="+message);
Alon Adler
  • 3,628
  • 4
  • 28
  • 42
  • It gives me a server 500 error and the view doesn't get redirected. – Illep Dec 14 '16 at 12:09
  • Exact error `Failed to load resource: the server responded with a status of 500 (Internal Server Error)`. Error occurs at `xmlhttp.send(...)` – Illep Dec 14 '16 at 12:22
  • 1
    HTTP error 500 means you have some sort of an error on the server side. It is not an error generated in the client. Read more about it [here](https://www.lifewire.com/500-internal-server-error-explained-2622938). Try debugging the server side code, check the data from the request arrives to the server. – Alon Adler Dec 14 '16 at 13:59
-1

You can create a form and submit it via JavaScript by doing the following:

function submitFullName(fullName, destination)
{

    var form = document.createElement("form");
    var input1 = document.createElement("input"); 

    form.method = "POST";
    form.action = destination;   

    input1.value=fullName;
    input1.name="fullname";
    form.appendChild(input1);  

    document.body.appendChild(form);

    form.submit();
}

@VladimirM made a good point, you could use a direct XMLHttpRequest to do a POST instead of creating a form object:

function submitFullName(fullName, destination)
{

    var xhr = new XMLHttpRequest();
    xhr.open("POST", destination, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send("fullname="+fullName);

}
gmiley
  • 6,181
  • 1
  • 8
  • 22