Ошибка JQuery при получении значения textarea

Question

Я знаю, что это общий вопрос, и я пробовал все найденные решения.

В любом случае, ничего не работает.

Я попытался получить значение с val(), text() и html() также, как кто-то предложил: НИЧЕГО!

Вот мой HTML (мы в Wordpress):

<div class="row"> 
    <div class="three columns"> 
     <?php _e('Content:', 'helpy'); ?> 
    </div> 
    <div class="nine columns"> 
     <textarea id="new_task_content" class="helpy-textarea" placeholder="<?php _e('Place the content here...', 'helpy'); ?>"></textarea> 
    </div> 
</div> 
<div class="row"> 
    <div class="three columns"> 
     <?php _e('Due date:', 'helpy'); ?> 
    </div> 
    <div class="nine columns"> 
     <input type="date" id="new_task_due" class="helpy-date-input" value="<?php echo date('Y-m-d'); ?>"> 
    </div> 
</div> 
<div class="row"> 
    <div class="twelve columns"> 
     <button type="button" id="new_task" class="button-helpy"><?php _e('Confirm', 'helpy'); ?></button> 
    </div> 
</div> 

И JS:

$('#new_task').live('click', function() { 
    var task_due = $('#new_task_due').val(); 
    var task_content = $('#new_task_content').val(); 
    console.log(task_content); 
    console.log(task_due); 
    /* var data = { 
     action: 'project_request', 
     task_content: task_content, 
     task_due: task_due, 
     id: '<?php echo $_GET['id']; ?>', 
     todo: 'task', 
    }; 

    $.ajax({ 
     type: "POST", 
     url: ajaxurl, 
     data: data, 
     dataType: 'JSON', 
     success: function(response) { 
      $('#response').fadeIn(300, function(){ $(this).html(response.confirm); }); 
      setTimeout(function() { 
       $('#response').fadeOut(300, function(){ $(this).empty();}); 
      }, 5000); 
     }, 
    });*/ 
}); 

Весь JS находится в jQuery(document).ready(function($){} включен.

В начале я подумал, что это проблема с WP Ajax, но потом я увидел, что переменная «task_content» вообще не была опубликована, ничего не отображается в консоли, за исключением значения «task_due».

Это что-то опечатка, которого я не вижу?

Я клонировал JS и HTML с другой страницы моего приложения, которое отлично работает. Я не могу понять, где проблема!

EDIT:

HTML, включается в диалоговом окне, модальный похожи друг на Bootstrap в.

Так что я изменил кнопку так:

<button type="button" onclick="createNewTask('<?php echo $_GET['id']; ?>');" id="new_task" class="button-helpy"><?php _e('Confirm', 'helpy'); ?></button> 

и функция JS:

function createNewTask(id) { 
var task_due = jQuery('#new_task_due').val(); 
var task_content = jQuery('#new_task_content').val(); 
console.log(task_content); 
console.log(task_due); 
/* var data = { 
    action: 'project_request', 
    task_content: task_content, 
    task_due: task_due, 
    id: id, 
    todo: 'task', 
}; 

jQuery.ajax({ 
    type: "POST", 
    url: ajaxurl, 
    data: data, 
    dataType: 'JSON', 
    success: function(response) { 
     jQuery('#response').fadeIn(300, function(){ jQuery(this).html(response.confirm); }); 
     setTimeout(function() { 
      jQuery('#response').fadeOut(300, function(){ jQuery(this).empty();}); 
     }, 5000); 
    }, 
});*/ 

}

результат тот же :(

Answer 1

Ну, попробовав почти все, я решил вставить текстовое поле в модуле bootstrap.

Как-то код js старого диалога блокировал чтение значения. Я не понял, почему и какая часть его, но проблема определенно была там.

Спасибо всем за помощь!

Answer 2

Я не знайте, что вам не подходит, вот скрипка работает нормально: https://jsfiddle.net/py5scvhm/

BTW вместо .live() использования .on() в .live() осуждается http://api.jquery.com/live/

Answer 3

Вместо того

$('#new_task_content').val(); 

Попробуйте получить значение с помощью

$('textarea#new_task_content').val(); 

Также отладки в консоли & проверить, какой объект является

$('#new_task_content')