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

时间:2015-10-10 10:38:56

标签: javascript php jquery html mysql

我有textarea,带有保存和取消按钮,用于更新mysql DB中的textarea文本。

最初是我的MYSQL数据库

ID  text
1   NULL

如果我在textarea输入一些文本我正在更新我的mysql数据库文本,输入值目前我能够实现它但我的要求是我在textarea中输入文本它应该更新我的数据库并且该文本值应该显示使用EDIT和DELETE按钮。

单击EDIT按钮时,它应该打开带有保存和取消按钮的textarea。有人可以帮助我实现它吗谢谢!

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

    }   
?>

3 个答案:

答案 0 :(得分:3)

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

获取文本框使用(class / id).text();

答案 1 :(得分:1)

你的代码一切都很好。而不是在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 =“reset”

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

答案 2 :(得分:1)

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

你的脚本应该像这样

$(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代码更新

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

    }   
?>