Question

I am using Spring MVC with Hibernate.
My page has a button that creates a new table row (via jQuery), which is made up of inputs to allow the user to select the new data that will be inserted into the database. Some of these inputs are combo boxes. My combo boxes look like this:

<form:select path="ProductName">
  <form:option>some list<form:option>
</form:select>

There may be 4 to 5 different boxes in a single table row and I can add multiple input rows by clicking the button multiple times. Once I click Save, all the items in the rows should get inserted into database table.

Since the user can send more than one row at a time I am confused about the path attribute since we give path to every single spring tag in JSP. Here I want to insert in one column and multiple rows and rows can be in any number so how should I go about it?

Please help me with this; I’m really stuck.

Answer 1

Updated Answer

Check out this answer: Spring MVC: processing values from timesheet – multiple objects

The basic idea is that your form-backing object is a List of objects, not just a single object. This would work for you if you were only letting them edit existing objects. Since you are letting users create as many rows as they want, you’ll have to do something special.

Let’s say you change your form-backing object to a List called products and each Product object has the property productName. Your JSP code would change to this:

<c:forEach items="${products}" varStatus="row">
  <form:select path="products[${row.index}].productName">
    <form:option>some list<form:option>
  </form:select>
</c:forEach>

When your HTML is rendered, you would see HTML like this:

<select path="products[0].productName">
  <option>some list<option>
</select>
<select path="products[1].productName">
  <option>some list<option>
</select>

Idea #1

Each time the user clicks to add a row, you submit the form. On the server, you add one more object filled with default values to your form-backing list and resend the form. This method is a bit of a headache, but I know you can get it to work.

Idea #2

I don’t know if you can hack the system like this, but if it works, it’ll be simpler than Idea 1. When you create a new row of HTML, parse the path attribute and add 1 to the index.

jQuery sample:

// This assumes that each row in the form has the class 'formRow'
function addNewRow() {
  var pathAttr = $(".formRow:last").attr("path");
  var pathIndex = parseIndex(pathAttr);
  var newIndex = parseIndex(pathIndex) + 1;
  var newRow = createNewRow();        //Creates HTML for new row
  // Set the path attribute with new index; would have to operate
  //    on all form elements, since each has a path attribute
  $(newRow).attr("path", "products[" + newIndex + "]");
}

function parseIndex(pathAttr) {
  var start = pathAttr.indexOf('[');
  var end = pathAttr.indexOf(']');
  var indexStr = pathAttr.substring(start + 1, end);
  return new Number(indexStr);
}

Idea #3

If the previous ideas don’t work or are too complicated, I would just use plain HTML forms. With plain HTML forms, you can use jQuery to give each element a unique name parameter based on the row index (similar to Idea 2). Frameworks are supposed to make your life easier, so if you run into a corner case where the framework is harder to use than the underlying language/platform, it makes sense to go back to the original language/platform.

---

Old Answer

First of all, your question is pretty basic. Rather than simply finding a quick fix for this one thing that you need, you should start out reading documentation, books, tutorials, etc. so that you can understand the architecture behind your frameworks that you’re using.

Second, there are many ways to do what you are trying to do. If you simply want to take the form data and send it to your server to persist, you could do a simple form submission. If you want some more complex form handling, using your Spring MVC <form:___> tags is probably a good way to go. (Note: if you are creating your form with JavaScript, you can’t create <form:___> tags since they are JSP tags. Also, you probably shouldn’t be using the more complex JSP form tags if you don’t already understand the more basic HTML tags.) If you want to submit your data without refreshing your entire page, you could use an Ajax call. In order for anyone to help you we need to know what exactly you are trying to do. As it stands right now, your question seems to be a mix of different ways to transfer your data to the server.

The bottom line is that there are loads of web technologies out there. If you don’t understand basic web flow first, you shouldn’t be trying to do anything complex. Before anything else, you need to understand the difference between the client and the server. You need to understand where JavaScript, JSP, and Spring MVC reside when it comes to client-server interactions. Some of the things that you should read up on are Spring MVC, HTML form submission and Spring-specific form submission.

Some reading:

Explanation of Client vs. Server

HTML forms

Ajax through JavaScript

Ajax through jQuery

Using the Spring MVC form tags (This is server-side only)

Another about Spring MVC