Menu
I'm using HTML & JavaScript at the client side, and NodeJs as the server side.
I have a form which contains several radio buttons. When the client click on submit button, I want to send (post) the results to the server.
<html>
<head>
<script type="text/javascript" >
var questionCounter = 0;
var questionId = 0;
var ans = [];
function check(id, result) {
ans[id.substring(1)] = result;
}
function printQueue(question) {
questionId++;
questionCounter++;
var radioName="Q"+questionCounter;
var id = "Q" + questionCounter;
document.write("<p> <b> " + question + " </b> </p>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.id, this.value)\" value=\"5\">Very Good<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.id, this.value)\" value=\"4\">Good<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.id, this.value)\" value=\"3\">OK<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.id, this.value)\" value=\"2\">Bad<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.id, this.value)\" value=\"1\">Vary Bad<br>");
}
function onSubmit() {
// check we answered all the Questions
for (var i = 1; i <= questionCounter; i++)
{
if (ans[i] == undefined)
{
window.alert("You forgot to answer Q:" + i);
return false;
}
}
return true;
}
</script>
</head>
<body>
<form action="http://127.0.0.1:8081/process_post" method="POST">
<script type="text/javascript" >
printQueue("1. XXX ? ");
printQueue("2. YYY ? ");
printQueue("3. ZZZ ? ");
printQueue("4. TTT ? ");
</script>
<br>
<input type="submit" value="Submit" onclick="return onSubmit()">
<br>
</form>
</body>
</html>
what is the right way to send (post) the results to the server:
a. send an array with the results (array of numbers)
b. send a structure or class with the result
c. any other way ?
How can I post the result to the server ?
Now I'm getting [Object, Object] results at the server side:
app.post('/process_post', urlencodedParser, function (req, res) {
console.log("Got request: (post-res) " + res);
})
So how can I post the client results to the server ?
Please provide solution in Javascript/Html without Jquery use.
Thanks
I generally use $.ajax for this purpose but since you have asked not to use jquery, so in that case you need to make XHR Request to the endpoint specified in you node application.
Client Side
var xmlhttp;
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 == XMLHttpRequest.DONE ) {
if(xmlhttp.status == 200){
console.log('request successfull : ', xmlhttp.responseText);
}
else if(xmlhttp.status == 400) {
alert('There was an error 400')
}
else {
alert('something else other than 200 was returned')
}
}
}
xmlhttp.open("post", "~/process_post", true);
xmlhttp.send(JSON.stringify(..........)); //your custom data
Server Side Node
app.post('/process_post', urlencodedParser, function (req, res) {
console.log("Got request: " + res.body);
});
Just looking for some another question already asked on Stackoverflow, I find this useful for you.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
