We Keep Coding

Have an issue accessing hidden field array value

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.

Different placeholder via Javascript on same input ID

I guess this is pretty basic yet I don't know how to solve this puzzle. What I have is two inputs generated by a plugin in Wordpress. What I want to do is to change the placeholders in the fields.
The problem is that the fields ID (which I use to call the inputs via Javascript) is the same, resulting in that only the first inputs placeholder changes.
The auto-generated HTML:
<input type="password" placeholder="Lösenord" name="swpm-19" id="swpm-19" value="" class="swpm-text swpm-large required ">
<input type="password" placeholder="Retype password Here" name="swpm-19_re" id="swpm-19" value="" class="swpm-text swpm-large required ">
The Javascript:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#swpm-19').attr("placeholder","Lösenord");
});
</script>
I have no idea how to call the second input since the ID's are the same. What I did notice is that the names of the inputs is different. The second inputs name is "swmp-19_re". Would it be possible to fetch the input in the Javascript via the name instead of the ID?

You cannot have duplicate id, this is invalid document.
You can use the attribute value selector to select the elements by using name attribute value.
$('input[name="swpm-19"], input[name="swpm-19_re"]').attr('placeholder', 'Lösenord');
You can also use starts with as
$('input[name^="swpm-19"]').attr('placeholder', 'Lösenord');
For more information on the type of CSS (attribute) selectors that jQuery supports check this page.

global attributes storing text data

I commonly use id or class to pass some parameters to a javascript function. For example:
<input type="text" id="myInput" onclick="callInput(this.id)">
However, in some cases, elements already have id and class, so I'm gonna need another attribute to store parameters.
Which attributes are appropriate for this purpose?

You can use data attribute
<input type="text" id="myInput" onclick="callInput(this.id)" data-id="someid" >
You can use anything along with data-
Example data-anything="something"
Read more about data attribute from here
To read the data attribute through jquery you can use
$('#myInput').on("click",function(){
alert($(this).attr("data-id"));
});
or
$('#myInput').on("click",function(){
alert($(this).data("id"));
});

GetElementById in Javascript

I want to getElementById of a certain form but it displays the error
Uncaught TypeError: Object # has no method 'getElementById'
here is my code
varForm = document.forms['newform'].getElementById("yellow");

an ID is unique -
so there is no difference (you get what you want), calling it directly(/correctly):
var Form = document.getElementById("yellow");

As others have pointed out, as far as Id is unique we have getElementById in document:
varForm = document.getElementById("yellow");
But if you still insist on finding a node based on a specific dom node, you can try:
varForm = document.forms['newform'].querySelector("#yellow");

Use following way to get input values from another form e.g.
Forms
<form id="form1">
<input id="txt1" type="text" value="111"/>
</form>
<form id="form2">
<input id="txt1" type="text" value="222"/>
</form>
Js
//get input value from current form i.e. form 1
alert(document.getElementById("txt1").value) //111
//get input value from other form i.e. form2
alert(document.forms["form2"].txt1.value) //222

Unlike some other element-lookup methods such as
Document.querySelector() and Document.querySelectorAll(),
getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM.
Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.
So Keep in Your mind about this method:
it is called on the document object
it returns a single item

var Form = document.getElementById("yellow");
this will get your form.

Consider this form:
<form id="myform"><input id="lala" type="text" value="123"/></form>
There are several ways to get the value of the "lala" input:
console.log(document.getElementById("lala").value)
console.log(document.forms[0].lala.value)
console.log(document.forms["myform"].lala.value)
console.log(document.forms.myform.lala.value)
Here is the Fiddle to play with.

Setting the value of multiple inputs with the same id using jQuery?

Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.

id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});

Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.