Update textarea From User Input by jQuery and Ajax

Question

I am trying to update a value in my php file and present it in a textarea using jquery and ajax. to make it short, I have:
1- A Form with User Input and Submit button and a Text area
2- A PHP file called data.php
3 -and the html file
Here is my codes

<form>
<input type="text" name="name"><br>
<textarea name="wstxt" id="wstxt" cols="40" rows="5"></textarea>
<input type="button" name="txta-update" id="txta-update" value="Update Textarea"  />
</form>

PHP is as simple as:

<?php
$name = "Jordano";
echo $name;

and here is the jquery

$(document).ready(function() {
   $('#txta-update').click(function() {

          $.ajax({ 
              type: "GET", 
              url: "data.php",//get response from this file
              success: function(response){ 

               $("textarea#wstxt").val(response);//send response to textarea
            }
        });
});
});

can you please tell me how I can send the input value to php and update the textarea from new value? Thanks

Update enter image description here

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-20T07:17:40.297

1

Send data like this

data:{name:$('input[name="name"]').val()}

you js file becomes

 $.ajax({
     type: "GET",
     url: "data.php", //get response from this file
     data:{name:$('input[name="name"]').val()},
     success: function (response) {

         $("textarea#wstxt").val(response); //send response to textarea
     }
 });

or

$(document).ready(function () {
    $('#txta-update').click(function () {
        var name_val = $('input[name="name"]').val();
        $.ajax({
            type: "GET",
            url: "data.php", //get response from this file
            data: {
                name: name_val
            },
            success: function (response) {

                $("textarea#wstxt").val(response); //send response to textarea
            }
        });
    });
});

To get value in PHP

<?php
$name = $_GET['name'];
echo $name;
?>

edited Nov 20 '13 at 07:17

answered Nov 20 '13 at 02:24

Tushar Gupta - curioustushar

58,085
24
103
107

Hi Tushar, thanks for your comment, well the first script didnt worked and I got this in teaxtarea when I used the second code: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. – Mona Coder Nov 20 '13 at 02:32
in the first method I am getting "Uncaught SyntaxError: Unexpected token ; " error on data:{name:$('input[type="name"]').val();}, – Mona Coder Nov 20 '13 at 02:36
@MonaCoder Use `data:{name:$('input[type="name"]').val()}` removed `;` and read http://stackoverflow.com/questions/20045162/jquery-error-event-returnvalue-is-deprecated-please-use-the-standard-event-pre – Tushar Gupta - curioustushar Nov 20 '13 at 02:37
Ok thanks but it is returning bunch of tags insted of input! like :
....
– Mona Coder Nov 20 '13 at 02:40
Can you please take a look at update above? I just post the result image – Mona Coder Nov 20 '13 at 02:45
@MonaCoder updated answer check update your php file.It's returning error. – Tushar Gupta - curioustushar Nov 20 '13 at 03:30
Same! still same issue! – Mona Coder Nov 20 '13 at 03:35
@MonaCoder do you have team viewer ? – Tushar Gupta - curioustushar Nov 20 '13 at 04:47
Ok got it error is on $('input[type="name"]').val() should be $('input[name="name"]').val() thanks alot – Mona Coder Nov 20 '13 at 07:16

Update textarea From User Input by jQuery and Ajax

1 Answers1

Linked