0

I am working on a Struts2 application and facing a unique issue for which i need your help. The scenario is as below. I am also using Bootstrap for the same.

I have a form as below sample. In the page i can dynamically add New Rows to this form with the New button.

 <form method="post" id="mainForm" action="editForm"/>
 <body onload="Rows()">
           <table id="mainTable" class="table table-striped table-hover table-condensed" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th>ProcessName</th>
                  <th>PDate</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody id="Row">
                <s:iterator value="list" var="voDetails" status="rowStatus">
                    <tr>
                      <td><input  size="8" value="<s:property value="processName" />"/></td>
                      <td><input  size="8" value="<s:date name="date_dt" format="MM/dd/YYYY"/>"/>  </td>
                      <td><input  size="8" value="<s:property value="description"/>"/></td>
                      </tr>
        </s:iterator>
                </tbody>

            <button type="button" class="btn btn-primary btn-xs" onclick="Save()">Save</button>
            <button type="button" class="btn btn-primary btn-xs" onclick="AddNewRow()">AddNewRow</button>
    <button type="button" class="btn btn-primary btn-xs" onclick="Close();">Cancel</button>

The Javascript function Save is as below

 function Save()
  {
     document.forms[0].action = click_save_buttom';
     document.forms[0].submit();
  }


  function AddNewRow()
  {
    // code to add row dynamically to the page
  }

 function Rows(){
    rows = document.getElementById("Row").rows.length; 
    for (i = 0; i < rows ; i++) {
        var row = document.getElementById("Row").rows[i];
        row.setAttribute("rowNum", i);
        //alert("ROW: " + i);
        for (j = 0; j < 3; j++) {
        if(document.getElementById("listSize")!=null || rows > 1)
            row.cells[j].children[0].setAttribute("name", "list[" + i + "]." + names[j]);
        }
    }

}

When i sumbit this form the values are getting mapped to the action and Save is working properly. Save also works when i dynamically add new row to the form.

The issue is that sometimes when this page has for example 1 row and i dynamically add a new row and totally there are 2 rows in the form table. When i submit the form then additional more than 2 rows(mapped to VO's in action) are being passed to the action. These additional rows are present in the previous page which is having a similar form table from where i select a row and land on the current page. The save function is happening for these additional rows(VO's) and after save when the page re loads these additional rows appear in the table.

Not sure why this is happening. I checked the number of rows in the table by putting an alert in Save function and it shows 2 as the length before the form submission. It is after the form submission that additional rows(VO's in action) are being mapped to action.

Can you please help me resolve this issue as i am stuck with it for a very long time now.

Thanks

Vikeng

vikeng21
  • 543
  • 8
  • 28

1 Answers1

2

New Edit: Ok, to me it looks like your issue is how you are looping. The rows value gives you an accurate number of rows- but you are looping starting with zero until you're greater than the number of rows it returns (would be two extra... which is accurately the problem you describe) Try this instead:

 for (i = 1; i = rows ; i++) {

OLD Edit: Maybe try to call your form by id instead of by form index and see if somehow the form index could be causing the issue in the browser you are working in?

 document.getElementById("mainForm").action = click_save_button;
 document.getElementById("mainForm").submit();

.. and make sure you correct your click_save_button typo, if it is a typo.

OLD: It is very unclear what you are doing here:

 document.forms[0].action = click_save_buttom';

Do you have a code you are running in a document called 'click_save_buttom' ? I believe this adds a form action to the first form on the page... like

 <form action='click_save_buttom'></form>

Also instead of using form index, its better to give the form an id. Instead of submitting a form this way:

 document.forms[0].submit();

consider submitting a form by using button type=submit

Kyle Burkett
  • 1,375
  • 12
  • 28
  • thanks. I cannot directly submit a from using type=submit as i am doing some validations in the Save function before submitting the form. click_save_button is the name of the action which is mapped to a bean in the Struts.xml – vikeng21 Apr 13 '16 at 12:26
  • @Kyle Burkett tried the above change but still the same issue :( – vikeng21 Apr 13 '16 at 13:28
  • 1
    @Kyle Burkett when the page loads the Rows() function adds the "name" attribute to all the input tag that you see above. Since we need a name attribute to bind to the object in struts action i have done this. Add new row also adds the name attribute dynamically to new row. Updated the question with the Rows() function. – vikeng21 Apr 13 '16 at 13:43