Javascript 在文本区域中添加注释并使用编辑和删除按钮显示文本

我有一个带有保存和取消按钮的textarea，用于在mysql数据库中更新textarea文本

最初我的MYSQL数据库

ID  text
1   NULL

如果我在textarea中输入一些文本，我正在用输入的值更新我的mysql db文本，目前我可以实现它，但我的要求是，一旦我在textarea中输入文本，它应该更新我的db，并且该文本值应该用编辑和删除按钮显示

单击“编辑”按钮时，应打开带有“保存”和“取消”按钮的文本区域。有人能帮我完成吗？谢谢

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>

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);

    }   
?>

要获取文本框，请使用（class/id）.text（）
 您的代码一切正常。在Jquery中使用.keyup（）函数，而不是调用函数

 $("#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;
});

当您要取消时，请使用input type=“重置”


您的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>

要更新的PHP代码

<?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);

    }   
?>

对于文本区域，您必须使用
$（“.CLASS”）.text（）而不是
$（“.CLASS”）.val（）@BushraShahid谢谢你提供有用的信息！你能帮我用编辑和删除按钮显示输入的值吗？谢谢！1.）要更新帖子，你必须知道帖子ID，你的帖子ID在哪里。。你想编辑哪篇文章？.2。）你必须使用输入类型按钮而不是提交，因为你想使用ajax完成任务。我只有两列ID和文本，单行值为1/NULL（文本），一旦我输入值，保存和取消按钮应替换为编辑和删除按钮谢谢！谢谢你宝贵的信息和时间，但是如何用编辑和删除按钮替换保存和取消按钮谢谢！非常感谢您宝贵的时间和建议！！非常感谢您宝贵的时间和解决我的问题，谢谢！
<input type="reset" value="Cancel" class=" breaking_news_cancel">

<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>

$(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;
    });
});

<?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);

    }   
?>

<?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);

    }   
?>