Il campo textarea restituisce vuoto al momento dell'invio

Question

Ho una semplice domanda come parte di un modulo. Se l'utente risponde "Sì", gli viene data la possibilità di inserire maggiori dettagli.

Quando un utente risponde "Sì" e immette più dettagli nello textarea, su invio restituisce vuoto. Non riesco a capire perché. Mi sento come se questo fosse probabilmente qualcosa di piccolo che mi manca.

Esempio: https://jsfiddle.net/sq8awxyk/

HTML

<form> 
    <div id="name-form"> 
    <label for="name"><strong>Is this the correct name?</strong></label> 
    <input type="radio" value="yes" name="name-choice" />Yes 
    <input type="radio" value="no" name="name-choice" />No 
    </div> 
    <input id="submit" type="submit" value="submit" /> 
</form> 

jQuery

// Name Input 
var nameFormLimit = 20; 
var nameInput = 'input[name=name-choice]'; 
var nameInputValue = $('input[name=name-choice]:checked').val(); 
var response; 

$(nameInput).on('click', function(e) { 
    var nameInputValue = $('input[name=name-choice]:checked').val(); 
    if (nameInputValue === 'yes') { 
    var nameDiv = document.getElementById('name-form'); 
    nameDiv.innerHTML = '<label for="name"><strong>Please type the correct name:</strong></label> ' + 
     '<textarea id="textarea" name="name" rows="1" maxlength="' + nameFormLimit + '"></textarea> <div id="textarea_feedback"></div>'; 
    $('#textarea_feedback').html(nameFormLimit + ' characters remaining'); 
    $('#textarea').keyup(function() { 
     var text_length = $('#textarea').val().length; 
     var text_remaining = nameFormLimit - text_length; 
     $('#textarea_feedback').html(text_remaining + ' characters remaining'); 
    }); 
    response = $('#textarea').val(); 
    } else if (nameInputValue === 'no') { 
    response = nameInputValue; 
    } 
}); 

$('#submit').on('click', function(e) { 
    alert(response); 
    e.preventDefault(); 
}); 

Answer 1

Hai bisogno di leggere nuovamente il contenuto di testo e impostarlo alla variabile response nel presentare evento prima di usarlo.

var response=""; 
$('#submit').on('click', function(e) { 
    response = $('#textarea').val(); 
    alert(response); 
    e.preventDefault(); 
}); 

Here è un jsFiddle lavoro

o è necessario impostare il valore della variabile di risposta sull'evento keyup dell'area di testo.

$(document).on("keyup","#textarea",function() { 
    var text_length = $('#textarea').val().length; 
    var text_remaining = nameFormLimit - text_length; 
    $('#textarea_feedback').html(text_remaining + ' characters remaining'); 
    response = $('#textarea').val(); 
}); 

Con questa modifica, non è necessario leggerlo nell'evento di invio.

Here è un esempio funzionante per questo.