フォームの一部として簡単な質問があります。ユーザーが「はい」と答えると、詳細を入力するオプションが表示されます。
ユーザーが「はい」と答えてtextarea
、に詳細を入力すると、送信時に空が返されます。理由がわかりません。これはおそらく私が見逃している小さなもののように感じます。
例: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();
});
response
使用する前に、テキスト領域の内容を再度読み取り、送信イベントで変数に設定する必要があります。
var response="";
$('#submit').on('click', function(e) {
response = $('#textarea').val();
alert(response);
e.preventDefault();
});
これが動作するjsFiddleです
または、テキスト領域のキーアップイベントで応答変数値を設定する必要があります。
$(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();
});
この変更により、送信イベントで最初に読む必要がなくなりました。
これがそのための実用的なサンプルです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加