Добавление комментария в текстовое поле и отображение текста с помощью кнопок "Редактировать" и "Удалить"

У меня есть textarea с кнопками сохранения и отмены для обновления текста textarea в mysql DB.

Изначально мой MYSQL дБ

ID  text
1   NULL

Если я ввожу некоторый текст в textarea, я обновляю свой текст базы данных mysql с введенным значением, в настоящее время я могу этого достичь, но мое требование - как только я ввел текст в textarea, он должен обновить мою базу данных, и это текстовое значение должно отображаться с помощью EDIT и УДАЛИТЬ кнопки.

при нажатии на кнопку "РЕДАКТИРОВАТЬ" должно открыться текстовое поле с кнопками "Сохранить" и "Отмена". Может ли кто-нибудь помочь мне, как этого добиться? Спасибо!

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 ответа

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

Ваш 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);

    }   
?>

И если вы хотите вставить POST, ваш код должен быть таким:

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

    }   
?>

Твой код все нормально. Вместо вызова функции используйте функцию.keyup() в 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;
});

и когда вы собираетесь отменить, пожалуйста, используйте input type="reset"

<input type="reset" value="Cancel" class=" breaking_news_cancel">
Другие вопросы по тегам