jned29
jned29

Reputation: 478

How to get value of textarea with php using jquery and ajax?

I'm working with my code right now and wondering if some of you can help me. What I have is a table which display the data on my database.

<div class="cont6">
    <table class="table table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th><strong>Draft Type</strong></th>
                <th><strong>Title/Subject</strong></th>
                <th><strong>Draft Clause</strong></th>
                <th><strong>Proposed Date</strong></th>
                <th><strong>Description</strong></th>
                <th><strong>Author</strong></th>
                <th class="hidecol"><strong>Encrypt</strong></th>
            </tr>
        </thead>
        <tbody>
            <?php 
                foreach($records->result() as $row) { 
                    $date_created=$row->date_created;
                    $last_modified=$row->date_modified;
                    $content=$row->content;
            ?>
            <tr>
                <td><input type="text" required name="drafttype" id="drafttype" class="inputfont2" value="<?php echo $row->draft_type; ?>"/></td>
                <td><input type="text" required name="drafttitle" id="drafttitle" class="inputfont2" value="<?php echo $row->title; ?>"/></td>
                <td><input type="text" name="draftclause" id="draftclause" class="inputfont2" value="<?php echo $row->clause; ?>"/></td>
                <td><input type="text" required name="draftdate" id="draftdate" class="datepicker" value="<?php echo $row->proposed_date; ?>"/></td>
                <td><input type="text" name="draftjustif" id="draftjustif" class="inputfont2" value="<?php echo $row->justification; ?>"/></td>
                <td><?php echo $row->author; ?></td>
                <td class="hidecol"><input type="text" name="draftencrypt" id="draftencrypt" class="inputfont2" value="<?php echo $row->encrypt; ?>"/></td>
            </tr>
            <?php } ?>
        </tbody>
    </table>
</div>

below is the textarea 'content'

<div class="cont3">
    Content:
        <br/>
        <textarea required class="textheader" name="draftcontent" id="draftcontent"><?php echo $content; ?></textarea>
        <br/>
</div>
&emsp;&emsp;
<input type="button" value="Save" id="btnSave" class="btn btn-mini"/>
&emsp;&emsp;Editor: <?php echo $this->session->userdata("username"); ?>
&emsp;&emsp;Date Created: <?php echo $date_created; ?>
&emsp;&emsp;Last Modified: <?php echo $last_modified; ?>
<p id="msg"></p>

I was about to update the data on each field including content, but only the fields on the table was updated. I tried to alert the content value using jQuery, but every time I inputted a different text on it, the content value was not changed.

Here's my script

$("#btnSave").click(function() {
    alert($("#draftcontent").val());
    var form_data = {
        drafttype: $("#drafttype").val(),
        drafttitle: $("#drafttitle").val(),
        draftclause: $("#draftclause").val(),
        draftdate: $("#draftdate").val(),
        draftjustif: $("#draftjustif").val(),
        draftcontent: $("#draftcontent").val(),
        draftencrypt: $("#draftencrypt").val(),
        ajax: 1
    };
    $.ajax({
        url: "<?php echo site_url("RO/edit_draft_save"); ?>",
        data: form_data,
        type: 'POST',
        success: function(msg){
            document.getElementById("msg").innerHTML = msg;
        }
    });
});

Thanks for the help.

Upvotes: 1

Views: 2415

Answers (3)

ddex20
ddex20

Reputation: 21

Your draftcontent should be in .text format in js when getting the value.

$("#draftcontent").val()

to

$("#draftcontent").text()

Upvotes: 1

Vali S
Vali S

Reputation: 1461

If you use jQuery then instead of document.getElementById("msg").innerHTML = msg; use $('#msg').html(msg). The ajax call would be somenthing like:

$.ajax({
        url: "<?php echo site_url("RO/edit_draft_save"); ?>",
        data: form_data,
        type: 'POST',
        success: function(msg){
            $('#msg').html(msg);
        }

Upvotes: 0

manoj
manoj

Reputation: 505

$("#btnSave").click(function() {
    alert($("textarea#draftcontent").val());
    var form_data = {
        drafttype: $("#drafttype").val(),
        drafttitle: $("#drafttitle").val(),
        draftclause: $("#draftclause").val(),
        draftdate: $("#draftdate").val(),
        draftjustif: $("#draftjustif").val(),
        draftcontent: $("#draftcontent").val(),
        draftencrypt: $("#draftencrypt").val(),
        ajax: 1
    };
    $.ajax({
        url: "<?php echo site_url("RO/edit_draft_save"); ?>",
        data: form_data,
        type: 'POST',
        success: function(msg){
            document.getElementById("msg").innerHTML = msg;
        }
    });
});

Upvotes: 0

Related Questions