Spring MVC add row in form

Question

I have form in jsp with spring:bind for the input element:

<table id="tab_logic">
<thead></thead>
<tbody>
<tr id='addr0'>
    <td>                                                                                
        <spring:bind path="createForm.contractEntitlements[0].entitledQuantity">                                                                            
            <form:input type="number" min="0" max="999" name="entitled_quantity" id="entitled_quantity" path="${status.expression}"/>                                                                       
        </spring:bind>                                                                          
    </td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<input type="button" id="add_row" value="show" />
<input type="button" id="delete_row" value="hide" />

I need it to be dyanmic so I added a button to add/delete a row and call the script when clicked. For testing to see whether it will add or not I just used as a tag:

$(document).ready(function(){
    var i=1;
   $("#add_row").click(function(){
    $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='"+i+"' type='text' /></td>");

    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++; 
});
   $("#delete_row").click(function(){
     if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

});

it adds and delete the rows accordingly but when I change the line to :

$('#addr'+i).html("<td>"+ (i+1) +"</td><td><form:input name='"+i+"' type='text' path='createForm.contractEntitlements[1].category' /></td>");

nothing happens when I click the button, no error on the logs. Does spring binding happens when the page loads and can't bind anymore or I'm doing it wrong?

Harshal Patil · Accepted Answer · 2017-05-04 02:57:13Z

1

You can add independent function for add and delete

function add(){
    var row = $("#tab_logic > tbody > tr:first").html(); //You can create your own html here
    $('#tab_logic > tbody ').append('<tr>'+row+'</tr>');
    
}

function removeElm(obj){
        var row =  $('#tab_logic > tbody > tr').length;
    
    if(row <= 1){
        alert("Not possible to delete this row");
        return;
    }
    
    $(obj).parent().parent().remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic">
    <tr id="tr1">        
        <td> <input type="text"/> </td>
        <td> <label onclick="removeElm(this)">Delete</label> </td>
    </tr>
</table>
<input type="button" onclick="add()" value="add me"/>

answered May 4, 2017 at 2:57

Harshal Patil

6,7698 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Spring MVC add row in form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related