CODEWITHSUNDEEP
jqueryajax
raj44
raj44

Reputation: 21

How to pass string data from a textarea as a parameter to a servlet using Jquery ajax?

I have a text area in html in which a user will paste a long string of data (with spaces) which needs to be entered into the data base. The user will click a button upload which will call a javascript function inside which I am giving a jquery ajax post call. This ajax call will pass that parameter to the servlet which is mentioned in the url. I am unsure of the syntax here, I want to know how to pass data from html textarea as an input parameter.

HTML:

<textarea id = "string" rows = "20" cols = "120" > Please enter the data </textarea>
<input type = "button" value = "upload" onclick=  "UploadResult(getElementById('string'.val());" />

Javascript:

function UploadResult()
{
    var elementValue = $("#string").val();

    $.ajax({
        type: "POST",
        url: "servleturl.irpt?",
        data: "elementValue",
        success: function(msg){
            alert( "Data Saved: " + msg );
            alert(elementValue);
        }
    });
}

Upvotes: 1

Views: 4733

Answers (3)

adrianillo
adrianillo

Reputation: 49

Maybe you can use this jquery plugin:

https://www.articlage.com/adrianillo/article/DataUploader

you can upload large amount of text easily.

First of all download the script from: https://github.com/adrianillo/datauploader

Add reference to JQuery and DataUploader script 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script  src="js/ajaxdatauploader.js"></script>

After Initialize DataUploader

jQuery.ajaxdatauploader(
{
    additional:,
    data:,
    pagerequest:,
    piecelenght:,
    encodedata:,
    success: function (datauploader, status){ 
    }
    error: function (req, status, error) {               
    }
  }
);

aditional:Additional data you want to send to the server, here you can set one identifier what data are sending.

data: Data to send to the server.

pagerequerest: Page to send the data (aspx, php, jsp, ...).

encodedata: If true then it encodes the data by replacing all special characters with their UTF-8 escape sequences. On the server will have to decode the data. EG in aspx: HttpUtility.UrlDecode data = (data);

piecelenght: Size of the pieces to send. DataUploader divides data into pieces then is sending to the server.

When the data process sending this completed, it will take the function: 'success'. If there was a problem and could not complete the sending of data it will lead to the 'error' function.

Finally the server collects the data piece by piece until it is completed

Upvotes: 0

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

You are using jQuery, so please don't put you event directly on the html.

First: UploadResult(getElementById('string'.val()); should be UploadResult(document.getElementById('string').value); // missing ')'.

Second: You're passing textarea's value but on your function you get it again.

Third: You're passing wrong data to ajax. data: "elementValue" should be data: { 'elementValue': elementValue}

Fourth: When you pass data thrue ajax you don't need to use ? when set a url, so url: "servleturl.irpt?" should be url: "servleturl.irpt"

html

<div>
    <textarea id ="string" rows = "20" cols = "120" > Please enter the data </textarea>
    <input type ="button" value ="upload" id="submit"/>
</div>

js

$('div').on('click', '#submit', function() {

    var elementValue = $("#string").val();

    $.ajax({
        type: "POST",
        url: "servleturl.irpt",
        data: {
            'elementValue': elementValue
        },
        success: function(msg) {
            alert( "Data Saved: " + msg );
            alert(elementValue);
        }
    });

});

Upvotes: 2

Josh Mein
Josh Mein

Reputation: 28645

You have quotes around your variable. If you remove the quotes, and I assume your server is expecting json so you need to format the data as such.

function UploadResult()
{
    var elementValue = $("#string").val();

    $.ajax({
        type: "POST",
        url: "servleturl.irpt",
        //data: "elementValue",
        data: {
            'variableNameExpectedByServer': elementValue
        },
        success: function(msg){
            alert( "Data Saved: " + msg );
            alert(elementValue);
        }
    });
}

Edit:

As mentioned by Ricardo Lohmann, you also tried to pass the value into your function but then try to get it again within the function. In that case, you should do the following:

HTML:

<input type="button" value="upload" 
    onclick="UploadResult(document.getElementByID('string').value);" />

Javascript:

function UploadResult(result)
{
    $.ajax({
        type: "POST",
        url: "servleturl.irpt",
        data: {
            'variableNameExpectedByServer': result
        },
        success: function(msg){
            alert( "Data Saved: " + msg );
            alert(elementValue);
        }
    });
}

Upvotes: 2

Related Questions