OnClick Send To Ajax

Question

I'm trying to complete some ajax requests to insert a textarea into a database without refresh. Here is my code:

HTML:

<textarea name='Status'> </textarea>
<input type='button' onclick='UpdateStatus()' value='Status Update'>

JS:

function UpdateStatus(Status)
    {
    var Status = $(this).val();

        $(function()
        {
            $.ajax({
                url: 'Ajax/StatusUpdate.php?Status='.Status, data: "", dataType: 'json'
            });

        });
    }

My Questions:

1) How do I send the contents of the text area into the onclick function?

2) How do I escape/urlencode etc.. So it retains line breaks

first `.` should be `+` in `url:'Ajax/StatusUpdate.php?Status='.Status, data: "", dataType: 'json'` because its javascript not PHP. — Sina R., May 25 '13 at 21:54

score 20 · Accepted Answer · edited May 13 '19 at 13:47

20

<textarea name='Status'> </textarea>
<input type='button' value='Status Update'>

You have few problems with your code like using . for concatenation

Try this -

$(function () {
    $('input').on('click', function () {
        var Status = $(this).val();
        $.ajax({
            url: 'Ajax/StatusUpdate.php',
            data: {
                text: $("textarea[name=Status]").val(),
                Status: Status
            },
            dataType : 'json'
        });
    });
});

edited May 13 '19 at 13:47

barlop

12,887
8
80
109

answered May 25 '13 at 21:59

Adil Shaikh

44,509
17
89
111

This inputs "Status Update" which is the name of the button into my database columns where the text area content should be – Sophie Mackeral May 25 '13 at 22:04
Looking for $_GET['Status']; – Sophie Mackeral May 25 '13 at 22:09
2

In this case you need `$_GET['text']` – Philipp M May 25 '13 at 22:10
@SophieMackeral .. As Philipp already mentioned.. You can get textarea content with `$_GET['text']` and Status with `$_GET['Status']` – Adil Shaikh May 25 '13 at 22:12

score 3 · Answer 2 · edited Dec 26 '22 at 15:25

Tried and working. you are using,

<textarea name='Status'> </textarea>
<input type='button' onclick='UpdateStatus()' value='Status Update'>

I am using javascript, (don't know about php), use id="status" in textarea like

<textarea name='Status' id="status"> </textarea>
<input type='button' onclick='UpdateStatus()' value='Status Update'>

then make a call to servlet sending the status to backend for updating using whatever structure (like MVC in java or any other) you like, like this in your UI in script tag

<script>
function UpdateStatus(){
    
    //make an ajax call and get status value using the same 'id'
    var var1= document.getElementById("status").value;
    $.ajax({
        
            type:"GET",//or POST
            url:'http://localhost:7080/ajaxforjson/Testajax',
                               //  (or whatever your url is)
            data:{data1:var1},
            //can send multipledata like {data1:var1,data2:var2,data3:var3
            //can use dataType:'text/html' or 'json' if response type expected 
            success:function(responsedata){
                   // process on data
                   alert("got response as "+"'"+responsedata+"'");
            }
         })
}
</script>

and jsp is like the servlet will look like:

//webservlet("/zcvdzv") is just for url annotation
@WebServlet("/Testajax")
    
public class Testajax extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public Testajax() {
        super();
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String data1=request.getParameter("data1");
        //do processing on datas pass in other java class to add to DB
        // i am adding or concatenate
        String data="i Got : "+"'"+data1+"' ";
        System.out.println(" data1 : "+data1+"\n data "+data);
        response.getWriter().write(data);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
}

OnClick Send To Ajax

2 Answers2

Linked