I am having an issue accessing a hidden field value in Node JS. I am trying to pass an array as hidden field value on submit of a form in ejs and then i am trying to access that array in a NodeJS POST method which is called on form submit.
this is how my array 'itm_mdf' looks like
[{"name":"COKE ZERO","id":"1048647"}].
I am passing the array as hidden field value as below
<form class="ui form" action="/items" method="POST">
<input type="hidden" name="modifiers" value=<%=JSON.stringify(itm_mdf)%>
<button class="btn btn-primary" type="submit">REORDER</button>
</form>
And i am accessing the array in Node JS post method like
app.post("/items",function(req,res){
console.log('itm_mdf *******'+req.body.modifiers);
}
But i see the array value is printed in Post method as below
itm_mdf *******[{"name":"COKE
and when i do a JSON.parse(req.body.modifiers) in the Post Method i get an error as SyntaxError: Unexpected end of JSON input.
Could you please let me know what am i doing wrong here and what i need to do to fix this.
The value is unquoted:
<input type="hidden" name="modifiers" value=<%=JSON.stringify(itm_mdf)%>
So it should be rendered like this:
<input type="hidden" name="modifiers" value=[{"name":"COKE ZERO","id":"1048647"}]>
And that makes the value='[{"name":"COKE '
You need to quote it, but since JSON uses double quotes you must use singe quotes, and hope that you don't have single quotes in your data:
<input type="hidden" name="modifiers" value='<%=JSON.stringify(itm_mdf)%'>
The optimal solution is to make sure that you encode the value so that you don't have any quotes in the rendered data.
Related
Below is my Javascript code where k and m are Javascript variables.
function javascriptfunction() {
document.forms[formname].action="gotopage.php?parameter1="+k+"¶meter2="+m;
document.forms[formname].submit();
}
The above code executes correctly when my HTML form has a POST method. Below is my HTML page:
<form name="formname" action=# method=POST>
<input type=text name="data1" value="one">
<input type=text name="data1" value="two">
<input type=button name="button1" value="send" onclick="javascritfunction();">
</form>
But when I give a GET method in my HTML form, then the HTML form data is submitted i.e
gotopage.php?data1=one&data2=two is submitting not Javascript action value i.e
gotopage.php?parameter1="+k+"¶meter2="+m
So how to submit the form with Javascript parameter when the method is GET in the HTML form?
Submitting a GET form will replace the query string in the action with the form data.
Put the data in hidden inputs instead.
In a GET request the form data has nowhere to 'go' other than in the query parameter string. So as Quentin points out, the query string gets automatically swapped out with the form field key value pairs. So you must use hidden fields to include extra data.
In a POST request you've also got the query parameter string available, if you want to use it, but the form data gets inserted into the request payload (which a GET request does not have), so does not interfere with the query string. That's why you can customise the action url with whatever query string you like.
Below is my Javascript code where k and m are Javascript variables.
function javascriptfunction() {
document.forms[formname].action="gotopage.php?parameter1="+k+"¶meter2="+m;
document.forms[formname].submit();
}
The above code executes correctly when my HTML form has a POST method. Below is my HTML page:
<form name="formname" action=# method=POST>
<input type=text name="data1" value="one">
<input type=text name="data1" value="two">
<input type=button name="button1" value="send" onclick="javascritfunction();">
</form>
But when I give a GET method in my HTML form, then the HTML form data is submitted i.e
gotopage.php?data1=one&data2=two is submitting not Javascript action value i.e
gotopage.php?parameter1="+k+"¶meter2="+m
So how to submit the form with Javascript parameter when the method is GET in the HTML form?
Submitting a GET form will replace the query string in the action with the form data.
Put the data in hidden inputs instead.
In a GET request the form data has nowhere to 'go' other than in the query parameter string. So as Quentin points out, the query string gets automatically swapped out with the form field key value pairs. So you must use hidden fields to include extra data.
In a POST request you've also got the query parameter string available, if you want to use it, but the form data gets inserted into the request payload (which a GET request does not have), so does not interfere with the query string. That's why you can customise the action url with whatever query string you like.
I want to send a value while submitting a form using javascript. Due to some programming limitations I can't use functions. so can I give two values in a single argument like this?
<form name="editDelete" ...>
<input type="hidden" name="theParam"/>
...
Test
Or is there any way to submit the form sending a value using single command in <a href> tag itself?
Try this final solution;
<form id="editDelete" ...>
<input type="hidden" id="theParam" name="theParam"/>
Test
Can you use GET method in the form?
here is an example
<A HREF="../form.html?value1=West&value2=East>2 values</A>
I have a simple form as
<form method="post" action="target.php">
<input class="button" type="submit" value="Submit" />
</form>
I want to read checkboxes from atable. Thus, checkbox input is outside the <form> as
<input type="checkbox" name="tick[]" value="'.$value.'" />
What is the simplest jQuery action to read the values checked and send them via POST by the form?
P.S. Since I have form for each row in the table, I cannot put the entire table within <form> tag.
Try this - I didn't test it though.
$("input[name^=tick]:checked").each(function() {
$(this).val() // this line should contain the value of each checked checkbox, you can use it as you want
});
You can get the entire for in a single object / array by using jQuery serialize() or serializeArray() method :
alert($('#<idOfForm>').serialize()); // will alert all form values in key / value string
or to submit the form using $.post() :
$.post("target.php", $("#<idOfForm>").serialize());
I've got an assignment to pass data between 2 .htm pages, in a manner which the source gets copied to the destination.
sourcePage.htm contains a form. (it contains more controls this is just a sample)
<form id="myform" action="destPage.htm" method="get" >
<input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
and destPage.htm is blank.
Using JavaScript I am required to parse the data from the url, that part isn't the problem
, the problem is that I am also required that destPage would be an exact duplicate of sourcePage.
My question is, if there's a way to pass the form as an object or some way to pass the control types and their properties along side the data.
You specified in the answer of ek_ny, that you want to dynamically build the form, based on it's input.
You can do this, in fact, with the JavaScript DOM:
var i = document.createElement('input');
i.setAttribute('type', "text");
i.setAttribute('name', "user");
var f = document.createElement('form');
f.setAttribute('action', "destpage.html");
// etc.
f.appendChild(i);
document.getElementById('container').appendChild(f);
The form will be added as a child in the <div id="container"> container.
Now you can use hidden input elements, which give, for instance, the specifics of the form:
<form>
<input type="hidden" name="x_type" value="input-text" />
<input name="x" type="text" />
<input type="hidden" name="y_type" value="select:[...]" />
<select name="y">
...
</select>
</form>
As far as I know, you won't be able to do a post between two pages. At least when I've attempted that you get an error-- it really doesn't make sense to have a post from one static page to the other (right?). What you can do is serialize the data you want to pass, put it on the url string to the next page and then deserialize that data and populate the controls on the destination page. If the html between the two pages is identical, then it should be pretty straightforward, if not it will be a little tricker. If you used jQuery it would be pretty easy, because you could serialize an entire form. If you need to come up with a generic solution (and you should, because it will help you learn) that's one thing, if you need to just get it working for this assignment and there are only a couple of form fields, you'll just need to encode the values you want to pass and pass them on a URL string with a get request.