Get value of textarea using PHP/jQuery

Question

Been searching for hours how to get this sorted and I'm on the verge of crying, so figured its time to get some help. It should be easy, but I'm clearly missing something.

I want to get the text from inside a textarea, I'd then perform a MySQL update with the textarea text. I am using PHP and jQuery.

Usually, I'd use $_post in php however, I am using jQuery to display a modal popup. I want the MySQL update code to run, and then the modal popup will display some text saying "Saved". Simple.

All the code is working fine, except I can't get the text. Which is pretty crucial obviously.

So how do I get the text from the textarea?

Form:

<form name = "editProfile">
<textarea rows="2" cols="20" name="bio" id="bio">
Some text.
</textarea>
</form>

Php Code

<?php
$bio = TEXT FROM TEXTAREA;

$sql="Update members SET bio = '$bio' WHERE memberID='$memberID'";
$result=mysql_query($sql);
echo ("Profile Update Sucesful");
?>

That bio.text bit is how you'd do it in asp.net....

The above form is not using a method/action, in fact there probably isn't any need for the "form" tags as I only need the textarea. The modal is launched by a link.

Please help (and please be patient with me). If you need any more info, then let me know. Don't shout. I am new at this.

Answer 1

To get the text from an textarea in jquery i always use the following:

<textarea id="textareaOfInterest">some value</textarea>
<script>
   $('#textareaOfInterest').val();
</script>

The rest of your code should look something like this:

<textarea id="textareaOfInterest">some value</textarea>
<input type='button' id="doStuff" value="do" />
<script>
   $('#doStuff').live('click',function(){
      show modal window
      var val = $('#textareaOfInterest').val();
      $.ajax({
        ....
      data: "&textArea="+val,
      success: function(result)
              {
            ... do stuff with the result....

                 hide modal window
                }
      });

});
</script>

search examples with jquery ajax because I don't know the syntax by heart.

Hope it helps, regards, Alex

Answer 2

 $bio = $_GET['bio']; /* or $_POST if your send data with jQuery $.POST */

is what you need to load the value of the textarea

note that you should specify anyway a send method in your form and, for the sake of application security, send a some kind of hidden token against CSRF request and before any data manipulation (like the db insertion) you should seriously sanitize every input you receive

Answer 3

Make an AJAX call from your form:

<!-- #dialog is the id of a DIV defined in the code below -->
<a href="#dialog" name="modal">Simple Modal Window</a>

<div id="boxes"> 

    <!-- #customize your modal window here --> 
    <div id="dialog" class="window">
       <textarea rows="2" cols="20" name="bio" id="bio">
           Some text.
       </textarea>
       <input id="saveTxt" type="submit" value="Save" />

       <!-- close button is defined as close class -->
       <a href="#" class="close">Close it</a>

    </div>

    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <div id="mask"></div>
</div>

And as your Javascript:

<script>

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });   

    //if submit is clicked
    $('input#saveTxt').click(function(event) {
       event.preventDefault();

       //Get the text from your textarea
       var text = $('textarea#bio').val();

       //Post it to your PHP page to insert it into your database
       $.ajax({
          url: "yourpage.php",                  //The URL you are posting to
          type: "POST",                         //The way you post your data
          dataType: "html",                     //The type of data you expect to get back
          data: {text : text},                  //Your data (thus the value of your textarea)
          cache: false,
          success: function(html) {             //After the AJAX call was done, update the textarea with the HTML you got back
             $('textarea#bio').val(html);
          }
       });
   });      

});

</script>

In yourpage.php (which is the page you are posting your data to) you can then simply fetch it:

<?php
   $bio = mysql_real_escape_string($_POST['text']);

   //do your query
   $sql = "Update members SET bio = '$bio' WHERE memberID='$memberID'";
   $result = mysql_query($sql);
   echo ("Profile Update Sucesful");
?>