Jquery无法更改已加载的表单上的表单值

时间:2012-04-24 13:45:14

标签: jquery forms field hidden

我是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中的方式。改变方法如果有人有任何建议,我将不胜感激。

感谢。

1 个答案:

答案 0 :(得分:0)

如果您尝试设置<input type="hidden" name="answers" value="" />,那么使用$('#answers').val(quiz_answers);将无效,因为您没有为此字段定义ID。

您可以尝试执行以下操作之一:

<input type="hidden" id="answersVal" name="answers" value="" />

然后使用$('#answersVal').val(quiz_answers);

或者:

    <input type="hidden" class="answersVal" name="answers" value="" />

然后使用$('.answersVal').val(quiz_answers);