CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Sjay
Sjay

Reputation: 801

Adding Comment in textarea and displaying text with Edit and delete buttons

I have textarea with save and cancel buttons for updating textarea text in mysql DB.

Initially my MYSQL db

ID  text
1   NULL

If i enter some text in textarea i'm updating my mysql db text with entered value currently i'm able to achieve it but my requirment is once i entered text in textarea it should update my db and that text value should display with EDIT and DELETE buttons.

on clicking EDIT button it should open up textarea with save and cancel buttons. can somebody aid me out how to achieve it Thanks!

http://jsfiddle.net/a32yjx0k/

HTML

<div id="b_news">
<form method="post" action="">
    </div>
    <div class="breaking_news_content">
        <div>
            <form method="post" action="">
            <div>
                <div>
                  <textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50"  placeholder="Add text here..." required></textarea>
                </div>
            </div>
            <div>
                <input  type="submit" class=" save_breaking_news" value="Save Changes"/>
                <input type="submit" value="Cancel" class=" breaking_news_cancel">
            </div>
            </form>
        </div>
    </div>
</form>
</div>

JQUERY

$(function(){
    $(".save_breaking_news").click(function(){
        var textcontent = $('.breaking_news_text').val();
        if(textcontent == '')
        {
            alert("Enter Some Text...");
            $('.breaking_news_text').focus();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "index.php",
                data:{
                    textcontent:textcontent

                },
                success:function(response){
                    alert('breaking news successfully updated');
                }
            });
        }
        return false;
    });
});

PHP

<?php 
    if(isset($_POST['textcontent']))
    {
            $breaking_news = mysqli_real_escape_string($con, $_POST['textcontent']);
            $sql = "update breakingnews set text='".$breaking_news."'";
            $result = mysqli_query($con, $sql);

    }   
?>

Upvotes: 0

Views: 2151

Answers (3)

satish kilari
satish kilari

Reputation: 728

$(function(){
    $(".save_breaking_news").click(function(){
        var textcontent = $('.breaking_news_text').text();
        if(textcontent == '')
        {
            alert("Enter Some Text...");
            $('.breaking_news_text').focus();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "index.php",
                data:{
                    textcontent:textcontent

                },
                success:function(response){
                    alert('breaking news successfully updated');
                }
            });
        }
        return false;
    });
});

To get textbox use (class/id).text();

Upvotes: 4

Bushra Shahid
Bushra Shahid

Reputation: 781

Your DIV

<div id="b_news">
<form method="post" action="">
    </div>
    <div class="breaking_news_content">
        <div>
            <form method="post" action="">
            <div>
                <div>
                  <textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50"  placeholder="Add text here..." required></textarea>
                </div>
            </div>
            <div>
                <input  type="hidden" id="post_ID" value="2"/>
                <input  type="button" class=" save_breaking_news" value="Save Changes"/>
                <input type="button" value="Cancel" class=" breaking_news_cancel">
            </div>
            </form>
        </div>
    </div>
</form>
</div>

YOUR SCRIPT SHOULD BE LIKE THIS

$(function(){
    $(".save_breaking_news").click(function(){
        var textcontent = $('.breaking_news_text').text();
        if(textcontent == '')
        {
            alert("Enter Some Text...");
            $('.breaking_news_text').focus();
        }
        else
        {
            var postID=$("#post_ID").val();
            $.ajax({
                url: 'index.php',
                        type: 'post',
                        data: 'textcontent=' + drvNo+"id="+postID,
                success:function(response){
                    alert('breaking news successfully updated');
                }
            });
        }
        return false;
    });
});

YOUR PHP CODE FOR UPDATE

<?php 
    if(isset($_POST['textcontent']))
    {
            $breaking_news = mysqli_real_escape_string($con, $_POST['textcontent']);
            $sql = "update breakingnews set text='".$breaking_news."' Where id='".$_POST['id']."'";
            $result = mysqli_query($con, $sql);

    }   
?>

AND IF YOU WANT TO INSERT POST YOUR CODE SHOULD BE LIKE THIS:

<?php 
    if(isset($_POST['textcontent']) && !isset($_POST['id']))
    {
            $breaking_news = mysqli_real_escape_string($con, $_POST['textcontent']);
            $sql = "insert into <TBL NAME> `text` values ('".$_POST['textcontent']."')";
            $result = mysqli_query($con, $sql);

    }   
?>

Upvotes: 2

Siddhartha esunuri
Siddhartha esunuri

Reputation: 1144

Your code everything is fine. Instead of calling function use .keyup() function in Jquery.

 $("#breaking_news_text").keyup(function(){
        var textcontent = $('.breaking_news_text').val();
        if(textcontent == '')
        {
            alert("Enter Some Text...");
            $('.breaking_news_text').focus();
        }
        else
        {
            alert(textcontent);
            $.ajax({
                type: "POST",
                url: "index.php",
                data:
                {
                    textcontent:textcontent
                },
                success:function(response)
                {
                    alert('breaking news successfully updated');
                }
            });
        }
    return false;
});

and when you going to cancel please use input type="reset"

<input type="reset" value="Cancel" class=" breaking_news_cancel">

Upvotes: 1

Related Questions