Accessing form values using javascript in Ruby on Rails - javascript

Let's say I have an input box, on the client-side, I want to access the value of this input box and check if it exists as a record in a model. If so, I want the data to be shown. However, I want this to be done without clicking a submit button/reloading the page.
Can someone show me some sample code?

Sample code is very much frowned upon in these parts, I can give you an outline of what you could do. Use jquery to get the value of the input box, and submit this using an ajax request to some url. Map that url to a controller action that checks to see if that record exists in the db, and return some json that indicates whether it does or not. Then in your javascript, when the data is returned, you can display that to the user.

Related

Model null on submit in asp mvc.net form if using ajax to request data

I would like to know how to do it right or circumvent a problem I have.
I have an ASP MVC.NET 5 page with a model. On the [HttpGet]Index() I prepare the model and pass it to the view. The view contains #Html.EditorFor and #Html.DropdownFor input fields for the model properties. At the end is a singular submit button to send/POST the form to the controller and its [httppost]Index(MyModel model) controller method, which accepts the model as an input parameter. All dandy, all fine.
Now I want to dynamically change contents of dropdowns when the user selects the topmost dropdown, selects an entry then other dropdowns shall change as well.
The way I found to do it was to use javascript and .onchange(function(){.$.ajax(postdata)}) to generate a POST-request, this request is sent to a controller method, the controller generates a json-reply with new string lists, and then these strings are put into the other dropdowns. This works fine. I can click on the dropdowns, select values, and other dropdowns dynamically change content, and so forth. All dandy, all fine.
The view contains a few other fields, for the name of the user, or a phone number field, and so forth.
When the user fills in the data, selects dropdowns, and finally submits the form the controller method receives and empty/null model! Why is the controller receiving a null model?
I think I found the answer. Only the first POST inside a FORM wins with all the information available, following POSTS dont have all of them anymore.
The browser receives the page, and inside the page is the form tag. Inside this form-body an element is clicked/changed - the dropdown - and using javascript generates a POST-request to the server. Once this POST is done - the small reply is used to update other dropdowns inside the form-body - all further "data" in the browsers "memory" seem to be lost. When the user clicks the last submit button and generates a POST to the server, the browser sends .. nothing. Therefore the model being passed to the controller is null.
So: How can I update dynamically controls using javascript/ajax/jquery with bits of information from the controller while being inside an ASP MVC.NET 5 form, without using a POST request which seems to break the form processing?
Or: How can I send my model data on the final submit button to the controller, using javascript/ajax/jquery, and receive a new View as reply?
The problem was I named a property of the model 'Model' and that broke the processing. Once I renamed it the page final submit started to work. Sometimes things are as simple as that, yet with unseen consequences - at first.

Value of hidden field is lost after loading the page in html

I want a scenario in which I will set some value of a hidden field in a particular page.
Then that page is submitted on server (form submit). Now, i redirect on another page and there I again try to retrieve the value which I set previously. But I am not getting there the value which was set, instead i get the default value which I provided in html page itself. (Hidden field is in header page which is common for all the pages in my web app).
i tried a dummy application in which i am getting the value of hidden field even after loading/refreshing the page once i set it.
When you redirected your user to another page, it became reloaded. Unless you chose to set a value to your form (by javascript for instance), the value of the form is the default one.
The value you "set previously" wasn't definitely associated to the input because everytime you reload the page, your server will generate again the HTML and the default values and your browser will display this HTML.
This behavior is normal.
Besides, if you want to keep the values of the form while submitting it, you can use AJAX submitting.
The other answers here are factually correct (that HTML doesn't normally do what you're asking it to do), but there are a few things you can do to make it work.
First, how things usually work: In order for the second page to get the proper value of the hidden field, you would process it in the server-side component. It sounds like you are redirecting to a new page in the server-side handler. The best way to make this work is to have that server-side handler process the value and attach it to the redirect as a parameter (likely attached to the querystring). Then have some server-side code generate the second page, which would process the querystring parameter.
Here's the work-around for pure-HTML/javascript implementation:
If you can't or won't have a server-side process to generate the second page, you could pull it out of the querystring using Javascript (just search for 'getting querystring variables in javascript').
If you use javascript, it could be feasible (though probably not advisable) to have the first form go directly to the second page by setting it as the form's action with a method of 'GET'. It's definitely better to include a server-side handler though.
What your trying to do is impossible through regular HTML since HTML is stateless. What you want is to put your values in a session or in a cookie and this way you can plant it on every page that is loaded.This cannot be done by default.
You're mis-understanding how HTTP works - it is stateless.
This means that every single page you request is completely separate to previous pages. Which is the reason your hidden textbox is being set back to default.
You have to explicitly set the value server side prior to it being sent to the client.

how to assign javascript variables to jsp or jstl

Can anybody tell me how to assign javascript variables to jsp request or to jsp session.
I am doing something like this
Here deletedRows is a hidden field.
var del=45;
document.getElementById("deletedRows").value=del
alert(document.getElementById("deletedRows").value);
<%String del_values = request.getParameter("deletedRows");%>
<%request.getSession().setAttribute("del_rows", del_values);%>
I don't get the value of del in my servlet.
JSP gets compiled on the server. All the client gets is the "output" of the JSP: the HTML, CSS and Javascript.
The Javascript gets executed after this. Meaning everything in the JSP has become HTML et all when the javascript executes. You way want to think this as the Java/JSP part has "completed" and now the HTML/Javascript part takes over.
Now you want to pass on some value calculated/manipulated via Javascript back to the server. (I think this is what you mean when you say "assingn javascript variables to jsp request or to jsp session"
For this you have to submit the page to the server, and these values should be part of the form that is being submitted.
You may already have these values in some HTML elements (like a <input> or <select>), if not you can create hidden elements and populate these with the values before submitting the <form>.
In the code you have provided, you are populating the hidden field correctly, but you have to retrieve the value in the servlet, not in the JSP itself. Also, make sure that the hidden field in in a <form> and that form is submitted.
Once the form is submitted (to a servlet) the values can be retrieved in the servlet via request.getParameter.
There are few other mechanisms to send a value to the server, using a URL parameter or via Asynchronous (AJAX) requests, but I am not sure whether you are looking at these also.
Any form fields, including hidden fields, that are submitted from the browser will be accessible in your JSP using request.getParameter("fieldname");. Query-string parameters may be accessed the same way.
Make sure that your form fields have a name attribute specified because it is that name (not the id attribute) that becomes the parameter name in your server-side code.
What you've already done in the little bit of code shown in your question, i.e., set the hidden form field to have the value of a JavaScript variable, should allow that value to be submitted and then accessed in the server-side code. But it's hard to see why it is not working without seeing at least some of your form HTML, particularly the definition of the hidden field. It would also help to see how that is being submitted. (I'm assuming it is being submitted: if you are trying to make all of that code run just on the server it won't work, because the JavaScript is treated as document content by the server, it isn't executed. Again, I can't really tell how you're using that code without seeing more of the surrounding JSP.)
UPDATE: I see that your code has been formatted since I started typing my answer. You aren't expecting all five lines to run on the server are you? The JavaScript code only runs on the client browser after the page is rendered. The Java code in between <% %> is executed on the server before the page gets to the browser and so can't access JavaScript at all. Anything not in the <% %> tags is simply sent to the browser as is - the servlet doesn't interact with it as such.

Can Resteasy fill in a multipart form?

I know that I can submit form information from a web page by using the #MultipartForm annotation to bind a POJO to a form. (See How do I do a multipart/form file upload with jax-rs?).
What I would like to do, however, is make a Restful call that returns a POJO containing values, and have those values fill in the appropriate form values, which can then be edited and submitted by the user. I know I'd probably need to use JavaScript to first make the rest call, but at that point, is there a way I can use the result to fill in the form?
I could have my rest call return JSON representing the form and use those values to fill in the form with JavaScript, but it would be cool if this could happen automatically, similar to form posting.
Thanks!

Check ASP.NET MVC values (roles) from client (jQuery)

I have an MVC app that is basically one page with a bunch of AJAX calls that parse returned JSON and then using jQuery will populate the page. So, for example, if I call /API/Users/List it will return some JSON and then I'll parse that and dynamically create an li element for each user. Then, I put an edit link next to each user name and hook it up to do the necessary editing (jQuery with another AJAX call).
What I'm curious about is how I would go about showing/hiding the edit link based upon role. I have a strongly typed view and can populate hidden fields with user info (<input type=hidden name=UserID value=jsmith /> <input type=hidden name=Role value=Admin />), and of course, can always validate the user in the Controller that the edit action posts to, but, I'd like to know if there is a way to ON THE CLIENT verify that the hidden field hasnt been tampered with so that someone doesn't save the file offline, change the hidden field for Role and then now they can see the edit links when they are not supposed to.
In this contrived example, not much harm comes from being able to see the edit links if they cannot do anything, but there are some calls where I pass the role to an API call and it returns data that is flagged as "private" in the database that shouldn't be seen without the correct privileges.
So, basically, the question becomes "is there any way to exchange data between the ASPX page and the JavaScript that then calls the API without it being just stored in a hidden field that could be tampered with?"
Thanks,
You should not pass the role as a parameter of an ajax call.
The action method itself should determine the role of the user.

Categories