Почему входные данные .val() исчезают после отправки - JQuery

Question

Почему значение HTML здесь исчезает в .name div почти прямо после выполнения функции?

$('input[type="submit"]').click(function (e) { 
    value = $("#txtName").val(); 
    $(".name").text(value); 
}); 

Answer 1

Предполагая, что нет никакого другого кода на странице, ваш код не отменяя постбэк, который будет повторно загрузить страницу. Вы можете позвонить e.preventDefault(); в первую строку обработчика, чтобы предотвратить отправку.

Лучшим вариантом является обработка формы submit() event формы, а не прослушивание любых нажатий на кнопки отправки. Это будет правильно обрабатывать данные формы из всех источников (нажатие клавиши, и т.д.):

$('#yourFormId').submit(function(){ 
    value = $('#txtName').val(); 
    $('.name').text(value); 
    return false; // prevents submission 
}); 

Answer 2

Столб назад происходит, отменить действие по умолчанию:

$('input[type="submit"]').click(function (e) { 
    e.preventDefault(); 
    value = $("#txtName").val(); 
    $(".name").text(value); 
}); 

Answer 3

Это случилось потому, что у вас есть Submit действия которые подавляют сбор форм и возвращают ваши поля. Чтобы решить эту проблему изменить код следующим образом:

$('input[type="submit"]').click(function (e) { 
e.preventDefault(); 
value = $("#txtName").val(); 
$(".name").text(value); 

// if you would like to submit then : 
$('form').submit(); 

});