pass data from an editable table in jsp to a servlet

Question

I am a newbie in JSP's and servlets. I have to allow the user to key in some questions in a html table and pass the entered data to the servlet. The number of questions could vary. So, I would like to pass it as a list or array to the servlet. I would not prefer using hidden tag for every row as it would be tedious when the rows are dynamic.

Could someone please suggest an efficient way to pass all the questions entered in a table column? Here's the code snippet..

<body>
<form action="adminPageServlet" method="POST">
   <table class="table editabletable table-bordered table-condensed table-responsive"
                    border="1">
        <tr>
    <td><div contenteditable>Question1</div></td>
    </tr>

    <tr>
    <td><div contenteditable>Question2</div></td>
    </tr>

    </table>
<button class="btn btn-default" type="submit" id="loginBtn">Submit</button>
</form>
</body>

EDIT:

Thanks a lot . I am still unable to pass the data from the function to servlet. Could you please help? I am contantly getting an error alert message here - which textStatus:undefined and data:[Object object].

jQuery.ajax({
                url:'adminPageServlet',
                data:{"key1":"value1","key2":"value2"},
                type:'POST',
                contentType:"application/json; charset=utf-8",
                dataType : 'json',  
                success:function(data, textStatus, jqXHR){
                    // access response data
                    alert("success");
                },
                error:function(data, textStatus, jqXHR){
                    console.log('Service call failed!');
                    alert("failed - data"+data+"textSTatus"+textStatus);
                }
            });

I tried converting the question to JSON string using

var jsonString = JSON.stringify(questions);

and tried passing this also. Not working. Could you please help?

score 0 · Answer 1 · edited May 23 '17 at 12:03

When user presses the submit button , before it submit call a function which put all the question in the Array say

var Question=new Array();

Then parse that array into the JSON format. When it is parsed , then post the request.

Like this :

$.ajax({
                type: 'POST',
                url: '',
                contentType:"application/json; charset=utf-8",
                dataType:"json"
                data:  JSONData
                success: function(data){                       
                }   // Success Function
});

On Server side read the JSON.

Refer this stackoverflow.

Updated

function getQuestions(){
        var row  =$(".table tr")
        var questions=new Array();
        row.each(function(){
            var que = $(this).find("td div").html();
            console.log(que);
            Questions.push(que);

        }); 
        return questions;
    }
    function sentData()
    {
        var Questions=getQuestions();

        // your array to JSON Code

        $.ajax({
                type: 'POST',
                url: '',
                contentType:"application/json; charset=utf-8",
                dataType:"json"
                data:  JSONData
                success: function(data){                       
                }   // Success Function
        });     

    }

In Html instead of submit button write this

<button onClick="sendData()">Send</button>

SeeTheC : Thanks for your response. My doubt is how do I get every distinct question the user enters and put it in an array? I am not sure how to catch the user response and call the function. Could you please elaborate? — Janani, Dec 11 '13 at 05:16

pass data from an editable table in jsp to a servlet

1 Answers1