Почему не меняется значение input text?

Question

[oldfag322]

Здравствуйте!
У меня есть сайт-задачник
Он должен быть с функциями CRUD, но с редактированием у меня возникла проблема.
Вот скрипт jquery на эту функцию:

$("a.cor_button").click(function (e) {
        var clickedID = this.id.split("-"); //Разбиваем строку (Split работает аналогично PHP explode)
        var DbNumberID = clickedID[1]; //и получаем номер из массива
        $("#item_"+DbNumberID).hide()//Строка с текстом прячется при нажатии на карандаш
		$("#edit_"+DbNumberID).show();//спрятанная (display: none) строка input "text" появляется
		$("#edit_"+DbNumberID).focus();
		
    }).on('change',function(e)
{
var clickedID = this.id.split("-"); //Разбиваем строку (Split работает аналогично PHP explode)
var DbNumberID = clickedID[1];
 
var news=$("#edit_"+DbNumberID).val(); //берем из появившегося input text`a значение

if((news).val()==="") //simple validation
{
            alert("Введите текст!");
            return false;
}else{
	jQuery.ajax({
            type: "POST", // HTTP метод  POST или GET
            url: "response.php", //url-адрес, по которому будет отправлен запрос
            dataType:"text", // Тип данных,  которые пришлет сервер в ответ на запрос ,например, HTML, json
            data:news, //данные, которые будут отправлены на сервер (post переменные)
            success:function(response){
            $("#jack_"+DbNumberID).html(news);//если все успешно строка становится как input text
            e.stopImmediatePropagation();
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError); //выводим ошибку
            }
        });
	$(".editbox").on("mouseup",function(e)
{
e.stopImmediatePropagation();
});

// Outside click action
$(document).mouseup(function()// если кликнуть по документу строка редактирования скрывается
{

$(".editbox").hide();
$(".item").show();
});
}

Проблема в том, что значение input "text" при редактировании не меняется, точнее визуально да, но посмотреть код в Chrome (через ctrl+shift+i ), значение там не изменится, соответственно, по скрипту, значение строки тоже не изменится.
Подскажите, пожалуйста, в чем же дело?

Comments

[Senseich]

ты не на GeekBrains случайно? мы там тоже пытались делать задачник )

[Saboteur]

А разве значение поля должно меняться ДО того как вы нажмете enter и выполнится запрос?

[oldfag322]

Senseich, нет на практике задание дали)

Answer 1

[Владимир Проскурин]

Текущее введенное значение в поле не подставляется в аттрибут, с атрибута значение считывается.
У вас не работает просто потому, что вы не правильно получаете значение

var news=$("#edit_"+DbNumberID).val();  // Вы уже получили строку

if((news).val()==="") // А тут вы у строки опять пытаетесь получить значение. Оставьте просто if(news === '')

Еще в установке параметров url в ajax нужно устанавливать строку запроса или объект. А вы просто передаете значение с поля ввода.
Вот полный код

$("a.cor_button").click(function (e) {
        var clickedID = this.id.split("-"); //Разбиваем строку (Split работает аналогично PHP explode)
        var DbNumberID = clickedID[1]; //и получаем номер из массива
        $("#item_"+DbNumberID).hide()//Строка с текстом прячется при нажатии на карандаш
		$("#edit_"+DbNumberID).show();//спрятанная (display: none) строка input "text" появляется
		$("#edit_"+DbNumberID).focus();
		
    }).on('change',function(e)
{
var clickedID = this.id.split("-"); //Разбиваем строку (Split работает аналогично PHP explode)
var DbNumberID = clickedID[1];
 
var news=$("#edit_"+DbNumberID).val(); //берем из появившегося input text`a значение

if(news ==="") //simple validation
{
            alert("Введите текст!");
            return false;
}else{
	jQuery.ajax({
            type: "POST", // HTTP метод  POST или GET
            url: "response.php", //url-адрес, по которому будет отправлен запрос
            dataType:"text", // Тип данных,  которые пришлет сервер в ответ на запрос ,например, HTML, json
            data: { "news": news }, //данные, которые будут отправлены на сервер (post переменные)
            success:function(response){
            $("#jack_"+DbNumberID).html(news);//если все успешно строка становится как input text
            e.stopImmediatePropagation();
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError); //выводим ошибку
            }
        });
	$(".editbox").on("mouseup",function(e)
{
e.stopImmediatePropagation();
});

// Outside click action
$(document).mouseup(function()// если кликнуть по документу строка редактирования скрывается
{

$(".editbox").hide();
$(".item").show();
});
}

Comments

[oldfag322]

к сожалению не помогло

[Владимир Проскурин]

Выложите полный код на jsfiddle.net Так я смогу отладить.

[oldfag322]

Vlad_IT, https://jsfiddle.net/kulikoffego/e62svvqp/3/ буду Вам крайне признателен!
Там нельзя подключать php поэтому я на всякий случай закомментировал код

[Владимир Проскурин]

oldfag322, было куча ошибок, таких как привязка события изменения текстового поля не на само текстовое поле, а на кнопку "изменить". Также при редактировании, через ajax передавалась переменная id, которой не существует. Еще по вашей ссылке атрибуты id не имели закрывающую кавычку.
Вот результат

[oldfag322]

Vlad_IT, результат?

[Владимир Проскурин]

Пардон https://jsfiddle.net/Vlad_IT/e62svvqp/16/ Данные не сохраняет, т.к. ответа от сервера нет.

[oldfag322]

Vlad_IT, спасибо большое! все работает! выручил!