私は JQuery を初めて使用し、作成中のサイトのデシジョン ツリーが必要でした。カスタム ライトボックス関数を使用して最初の「クイズ」を読み込み、次に「クイズ」への回答に応じて、特定の連絡先フォームが同じウィンドウに読み込まれます。これはすべて問題なく、フォームは正常に機能します。問題は、「クイズ」の回答を記録する必要があることです。JQueryで回答を変数に保存することができましたが、連絡先フォームの非表示の入力の値を変数の値に変更することはできません。
すべてのコードの投稿を節約するために、クイズは通常、ユーザーが回答をクリックしたときに次の質問を表示するように設定された、以下のような一連の質問です。ラベルがボタンのように見えるように、実際の入力を CSS で非表示にしています。
<div id="q1" class="question">
<h3 class="lightBlueText">Did you purchase your home privately or through the council's 'Right to Buy' scheme?</h3 class="lightBlueText">
<div id="a1" class="answer">
<div class="quizButton"><input type="radio" name="q1" id="private" value="Private" /> <label for="private" class="lblPrivate" id="category-private">Private</label></div>
<div class="quizButton"><input type="radio" name="q1" id="rtb" value="Right To Buy" /><label for="rtb" class="lblrtb" id="category-righttobuy">Right To Buy</label></div>
</div><!--answer1-->
</div><!--question1-->
<div id="q2a" class="question">
<h3 class="lightBlueText">Did you take out your mortgage within the last 7 years?</h3 class="lightBlueText">
<div id="a2a" class="answer">
<div class="quizButton"><input type="radio" name="q2a" id="p1" value="Yes" /><label for="p1" class="lblYes" id="q1-private-yes">Yes</label></div>
<div class="quizButton"><input type="radio" name="q2a" id="p2" value="No" /><label for="p2" class="gotoSorry" id="q1-private-no">No</label></div>
<div class="quizButton"><input type="radio" name="q2a" id="p3" value="Don't Know" /><label for="p3" class="lblYes" id="q1-private-dontknow">Don't Know</label></div>
</div><!--answer2-->
</div><!--question2-->
<!--more questions here-->
<div id="q5a" class="question">
<h3 class="lightBlueText">Did you use your mortgage/remortgage to consolidate your debts?</h3 class="lightBlueText">
<div id="a5a" class="answer">
<div class="quizButton"><input type="button" name="q5a" value="Yes" id="p10" /><label for="p10" class="gotoForm1" id="q4-private-yes">Yes</label></div>
<div class="quizButton"><input type="button" name="q5a" value="No" id="p11"/><label for="p11" class="gotoSorry" id="q4-private-no">No</label></div>
<div class="quizButton"><input type="button" name="q5a" value="Don't Know" id="p12" /><label for="p12" class="gotoForm2" id="q4-private-dontknow">Don't Know</label></div>
</div><!--answer5-->
</div><!--question5-->
Jquery (私の初心者コードを許してください):
var id;
var root = location.protocol + '//' + location.host + '/test/sapphire';
var quiz_answers;
$(document).ready(function() {
$('.question').hide();//hide all
$('#q1').show();//show the first question
quiz_answers = "Answers: "; //reset quiz answers
$('.quizButton label').click(function()
{
//get the id of what was just clicked.
//This is the value of the radio button that we need to select
var id = $(this).attr('id');
//as long as clickable text is in a tag that
//has a class of ‘quizButton’ and an id with the value of the
//radio button that it needs to select, we only need this statement.
$('input[value=" + id + "]').attr("checked", true);
if ($(this).is('.lblrtb')){ //this is to jump to the Right to Buy section and bypass the Private section
$('.question:visible:first').fadeOut(function(){
$('#q2b').fadeIn(); });
}
else { //else it will carry on through the Private section
$('.question:visible:first').fadeOut(function(){
$(this).next('.question:hidden').fadeIn('slow');
});
}
quiz_answers = quiz_answers + " " + id; //add the id of clicked label onto the variable
});
$('.gotoForm1').click(function(){
change_form();
$('#msm-form_wrapper').load(root+'/msm_form1.php');//open the contact form
$('input[name="answers"]').val(quiz_answers);
});
$('.gotoForm2').click(function(){
change_form();
$("#msm-form_wrapper").load(root+'/msm_form2.php');//open the contact form
$('input[name="answers"]').val(quiz_answers);
});
$('.gotoSorry').click(function(){
change_form();
$("#msm-form_wrapper").load(root+'/sorry.php');//open the contact form
$('input[name="answers"]').val(quiz_answers);
});
function change_form() {
$('#quiz_wrapper').hide();
$('#msm-form_wrapper').show();
};
$('.close, .backdrop').click(function(){
quiz_answers = "Answers: "; //reset quiz_answers if the user closes the contact form before submitting
});
最後に、ロードされたファイルに含まれる内容の例:
<form id="msm_form1" method="POST" action="/test/sapphire/contact-form-handler.php" class="msm_form">
<h1>Sorry...</h1>
<p class="sorry">It's unlikely that we can help you this time, however if you would like someone to call you back please fill in the form below.</p>
<fieldset class="plain sorry">
<ul>
<li><label for='firstname'>First Name:</label><input type="text" name="firstname" id="input-firstname"></li>
<li><label for='lastname'>Last Name:</label><input type="text" name="lastname"></li>
<li><label for='contact'>Contact Number:</label><input type="text" name="contact"></li>
<li><label for='email'>Email:</label><input type="text" name="email"></li>
<li><label for='comments' class="comments">Comments:</label><textarea name="comments"></textarea></li>
<input type="hidden" name="page" value="Sorry Form" />
<input type="hidden" name="answers" value="" />
<li class="submit-label">Send your message<button type="submit" class="msm-form-submit"></button></li>
</ul>
</fieldset>
</form>
alert('quiz_answers'); を使用できます。どの段階でも正しい結果が得られても、その結果をフォームに入れません。
「answers」という名前の入力に ID を追加してから $('#answers').val(quiz_answers); を使用するなど、さまざまな方法を試しました。
しかし、それもうまくいきませんでした。テストでは、フォーム入力のいずれにも何も追加できませんでした。余分なコンテンツを div にロードする方法が原因である可能性があります。その方法を変更する誰かが何か提案があれば、私は感謝します.
ありがとう。