CODEWITHSUNDEEP
javahtmlajaxspringforms
Jason
Jason

Reputation: 1431

Handle list of forms with Ajax

I am working on a Spring MVC application where users can create and update tasks. Currently, when the page loads a jdbc call happens on the server side and a list of tasks are put in the model and displayed on the client side. I am using AJAX to allow users to update tasks but it only seems to work fine with the first task in the list, I assume because each form in the list has the same ID. I'm new to AJAX and not the worlds greatest Client side developer so I'm not sure if this is a good approach to begin with. What are some good ways I can make Ajax "recognize" each form's post? My code is below, note its mostly to convey the approach I'm using so ignore any typos, assume the ajax call works fine with the first form in the list...

HTML + Thymeleaf Code

<li th:each="task:${tasks}">
    <div th:text="${task.name}"></div>
    <div class="row">
        <form id="updateTask" th:action="@{/updateTask}" th:object="${Task}" method="post">
            <input id="id" th:value="${task.id}"/>
            <input id="name" th:value="${task.name}"/>
            <input id="description" th:value="${task.description}"/>
            <button class="btn waves-effect waves-light green" type="submit" name="saveTask" value="saveTask">
                Save <i class="mdi-content-send right"></i>
            </button>
        </form>
    </div>
</li>

Generated HTML from Server - Truncated for readability

<li>
    <form id="updateTask" method="post" action="/updateTask">
        <input id="id" value="37" />
        <input id="name" value="Scrub the floors" />
        <input id="description" value="Make the floors shiny!" />
        ...
    </form>
</li>
<li>
    <form id="updateTask" method="post" action="/updateTask">
        <input id="id" value="38" />
        <input id="name" value="Walk the Dog" />
        <input id="description" value="Make sure he poops" />
        ...
    </form>
</li>

AJAX Code - Note I trimmed some for readability so syntax might not be perfect

$('#updateTask').submit(function(event) {

event.preventDefault();

var id = $("#id").attr("value");
var name = $("#name").prop("value");
var description = $("#description").prop("value");

//Make the ajax call
$.ajax({
    url : requestMapping,
    type : "POST",
    data : {
        "id" : id,
        "name" : newName,
        "description" : newDescription
    },

    //handle success
    success : function(response) {
        alert("Task " + id + " has been updated!");
    },

    //handle errors
    error : function(xhr, status, error) {
        alert(xhr.responseText);
    }});
    return false;
});

Upvotes: 0

Views: 205

Answers (1)

Zigri2612
Zigri2612

Reputation: 2310

Html page should contain one id with a same name.but you are using multiple id's with same name.so only first id's value this -

id = $("#id").attr("value");

you can solve your problem by qualifying current section,and pick value from current reference.

id = $(this).find("#id").attr("value");

Your code 

$('#updateTask').submit(function(event) {

event.preventDefault();
// this is the current reference of form on which you are performing action.
var id = $(this).find("#id").attr("value");
var name = $(this).find("#name").prop("value");
var description = $(this).find("#description").prop("value");

//Make the ajax call
$.ajax({
    url : requestMapping,
    type : "POST",
    data : {
        "id" : id,
        "name" : newName,
        "description" : newDescription
    },

    //handle success
    success : function(response) {
        alert("Task " + id + " has been updated!");
    },

    //handle errors
    error : function(xhr, status, error) {
        alert(xhr.responseText);
    }});
    return false;
});

Upvotes: 2

Related Questions