In my jsp file I generate dynamically multiple input tags, trough a database. I'd like to know the values of each. I've tried doing it in Javascript, but according to some answers in this website this is not possible.
Example:
<input type="number" id="age" class="v">
<input type="text" id="name class="v">
...
And on the jsp side I'd like to get:
"age" => 18
"name" => "Joe"
Any ideas on how to achieve this?
Edit
In case you are wondering, my Javascript is fairly simple, I can get all the values I need simply by doing:
var chars = document.getElementsByClassName("v");
EDIT 2
My (simplified) JSP looks something like this:
<%= session.getAttribute("chars")%>
<form action="hello" method="POST">
<c:forEach items="${chars}" var="ch">
<input type="number" id="${ch}" class="v">
</c:forEach>
<input type="submit">
</form>
"chars" is an array that was created through calls to the database, this array is displayed and created dynamically.
So what I want to do is pass all those values, like ("age" => 18) to another my hello servlet, so I can work on that info. For example if the value of the inputs is something like this:
//ID value
"age" => 18
"name" => "Joe"
On hello I should have access to that.
Using pure JavaScript you can get the field values using querySelector which allows you to retrieve properties from multiple elements with the same class identifier
document.querySelector('.v').value;
You will then have access to both field values via js. To read those values using jsp you the JavaScript will need to be included within the same file. You can do something like:
JSP:
You will need to add the HTML Name="myFieldName" to the input fields.
<%= request.getParameter("myFieldName") %>
If you are in a form, you could use a POST method to submit the datas of the different inputs inside your form.
Here is a previous post on StackOverlow that might help you get the datas you want :
How can I get form data with JavaScript/jQuery?
Related
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.
I have a form with a dynamic name containing fields with dynamic names.
I want to show a visual error feedback using ng-show if the field is invalid.
But since the field is set using a variable, I need to do something like:
ng-show="{{form.name}}.{{form.field.name}}.$dirty && {{form.name}}.{{form.field.name}}.$invalid"
How do I do that?
(The above code is obviously not working)
just do it not using interpolation, ng-show doesn't need it:
HTML form
<form name="testForm">
<input name="testInput" value="123">
</form>
validation ng-show:
ng-show="testForm.testInput.$dirty && testForm.testInput.$invalid"
so, in short just treat the variable name as normal and use it...
I have a text field: <input type="text" class="field blink" name="j-state[]" id="j-state"/>
The data in it will be a comma-separated list of states, e.g. New York,New Jersey.
I am using serialize() to grab the form's data. I want to form an array of these states, and pass the array along with serialized data.
Can any help me to achieve this?
Thanks in advance.
I did not want to have to deal with your name with the dash so I renamed it thus:(you can deal with that issue yourself otherwise if you like)
<form id="myform">
<input type="text" class="field blink" name="jstate[]" id="jstate"/>
</form>
Get some code from this questions answer: Convert form data to JavaScript object with jQuery
then do this:
$('#jstate').val('New Yourk, Fridaay Town,Frenchville');
var jd = $('#myform').serializeObject();
var ms = jd.jstate[0].split(",");
alert(ms[1]);// alerts " Friday Town"
You can then use toJSON() (google that) to properly form that ms object and send it off - I will leave that exercise to you.
And, last off, a fiddle for you to play with: http://jsfiddle.net/MHVeC/
How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
I updated the default angular example to display the situation - the todo text is in hidden field.
http://jsfiddle.net/tomasfejfar/yFrze/
If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS
If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} read more
</li>
</ul>
Then in your JS code, you can get the ID like this:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.
You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
$scope.processForm = function() {alert("processForm() called.");
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("form").name;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
};
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.
Simpler:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!
Use ng-binding="{{employee.data}}". It will work properly.
I have to correct (improve) myself:
You can do it more elegantly:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
So you can have as many hidden fields as you like.
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.