僅在按鈕單擊時運行功能

Question

我編寫了JQuery函數，它們按預期工作，但每次單擊表單的任何字段時運行該函數（輸入名稱，電子郵件或任何內容，請參閱附加的代碼）我希望腳本僅在提交按鈕時運行點擊。 我還是JQuery的新手，我不確定我哪里出錯了。

抱歉，長代碼。

 * { box-sizing: border-box; background-color: #bf2e1a; } header { color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 100px; margin-left: 650px; margin-right: 650px; margin-top: 150px; text-align: center; font-size: 60px; border-width: 5px; } div#main-content { margin-top: 100px; font-family: sans-serif; } div#disclaimer { width: 800px; height: 467px; margin: 0 auto; margin-top: 200px; background: #EFDFBC; padding: 30px 10px 10px 0px; } div#get-justice { position: relative; top: 30px; padding-top: 10px; background-color: #EFDFBC; margin: 0 auto; width: 600px; height: 600px; } div#get-justice p { background-color: #EFDFBC; color: #bf2e1a; padding: 40px 40px 4px 40px; font-size: 28px; } div#get-justice button { background-color: #bf2e1a; border: none; color: white; margin-top: 120px; padding: 20px 37px; text-align: center; text-decoration: none; display: inline-block; font-size: 21px; cursor: pointer; } h3 { background: #EFDFBC; text-align: center; color: #bf2e1a; font-size: 33px; padding-top: 25px; } div#first-question { text-align: center; } ul { columns: 2; background: #EFDFBC; text-align: -webkit-left; } li { text-align: -webkit-match-parent; background: #EFDFBC; display: block; padding: 1px 0px 3px 37px; font-family: sans-serif; } input#quiz-question-one-yes { display: none; margin: 11px; } input#quiz-question-one-no { display: none; margin: 11px; } label#oneYes { display: inline-block; margin: 10px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#oneNo { display: inline-block; margin: 10px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } input#quiz-question-two-yes { display: none; margin: 11px; } input#quiz-question-two-no { display: none; margin: 11px; } label#twoYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#twoNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } input#quiz-question-three-yes { display: none; margin: 11px; } input#quiz-question-three-no { display: none; margin: 11px; } label#threeYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#threeNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } /*label#threeYes { display: inherit; margin: 13px 360px 0px 195px; padding: 8px 73px 8px 22px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#threeNo { display: inherit; margin: -54px 296px 0px 300px; padding: 12px 66px 5px 18px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; }*/ input#quiz-question-four-yes { display: none; margin: 11px; } input#quiz-question-four-no { display: none; margin: 11px; } label#fourYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fourNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } /* label#fourYes { display: inherit; margin: 13px 360px 0px 195px; padding: 8px 73px 8px 22px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fourNo { display: inherit; margin: -54px 296px 0px 300px; padding: 12px 66px 5px 18px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; }*/ input#quiz-question-five-yes { display: none; margin: 11px; } input#quiz-question-five-no { display: none; margin: 11px; } label#fiveYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fiveNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } /* label#fiveYes { display: inherit; margin: 13px 360px 0px 195px; padding: 8px 73px 8px 22px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fiveNo { display: inherit; margin: -54px 296px 0px 300px; padding: 12px 66px 5px 18px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; }*/ .clientinfo{ height:445px; background-color: #EFDFBC; } p { background-color: #EFDFBC; font-size: 23px; margin: 0 auto; padding: 10px 0px 1px 70px; } input[type="text"] { background-color: white; padding: 4px 0px 0px 10px; margin: 0px 0px 0px 70px; } button { display: block; margin: 0 auto; padding: 25px 35px 20px 25px; font-size: 35px; margin-top: 45px; color: #EFDFBC; } button#start { display: block; margin: 0 auto; width: 200px; padding: 25px 35px 20px 25px; font-size: 35px; margin-top: -272px; margin-right: 68px; } hr { width: 165px; padding: 1px 0px 0px 0px; } div#disclaimer { width: 800px; padding: 27px 10px 10px 0px; } div#questionOneBody { background: #EFDFBC; } div#questionTwoBody { background: #EFDFBC; } div#questionThreeBody { background: #EFDFBC; } div#questionFourBody { background: #EFDFBC; } div#questionFiveBody { background: #EFDFBC; } h1 { /* padding: 20px 4px 20px; */ text-align: center; margin-top: 25px; } /* h1 { //background: #EFDFBC; padding: 20px 4px 20px; text-align: center; } */ h1#disclaimerHeader { background: #EFDFBC; /* padding: 20px 0px 20px 0px; */ text-align: center; } p { background-color: #EFDFBC; font-size: 23px; margin: 0 auto; padding: 1px 0px 0px 20px; } div#disc-container { width: 450px; background: #EFDFBC; padding: 10px 10px 14px 10px; border-style: solid; border-color: #bf2e1a; border-width: 10px; margin-left: 20px; } a#disclaimerLink { text-decoration: none; } /*.hideHeader{ display:none; }*/ p#greenText { background: #EFDFBC; display: block; width: 800px; margin: 0 auto; margin-top: 300px; font-size: 30px; color: green; text-align: -webkit-auto; padding: 50px 50px 50px 50px; } p#yellowText { background: #EFDFBC; display: block; width: 800px; margin: 0 auto; margin-top: 300px; font-size: 30px; color: yellow; text-align: -webkit-auto; padding: 50px 50px 50px 50px; } p##bf2e1aText { background: #EFDFBC; display: block; width: 800px; margin: 0 auto; margin-top: 300px; font-size: 30px; color: #bf2e1a; text-align: -webkit-auto; padding: 50px 50px 50px 50px; } div#questionHeader { height: 140px; color: #EFDFBC; border-style: solid; margin-top: 163px; font-size: 28px; border-width: 10px; } /*div#resultHeader { margin-top: 163px; font-size: 28px; border-width: 10px; } div#resultHeader { height: 140px; color: #EFDFBC; border-style: solid; margin-bottom: 10px; font-size: 28px; border-width: 10px; }*/ div#resultHeader { color: #EFDFBC; border-style: solid; margin-bottom: 10px; margin-left: 110px; width: 1170px; font-size: 28px; border-width: 10px; } div#quizResult { font-size: 20px; /* width: 650px; */ margin: 0 auto; background: #EFDFBC; height: 600px; margin-top: 10px; } div#allResult { margin: 0 auto; margin-left: -350px; margin-right: -350px; /* background: #EFDFBC; */ } div#leftResult { background: #EFDFBC; width: 610px; } div#result { background: #EFDFBC; height: 634px; font-size: 24.5px; width: 450px; margin-left: 110px; padding: 88px 45px 0px 70px; //font-family: sans-serif; } hr#eligibleHr { position: absolute; margin-top: 57px; width: 300px; margin-left: 182px; } div#calenderToolSideText { background: #EFDFBC; /* width: 300px; */ margin-left: 551px; margin-bottom: -18px; margin-top: -334px; padding: 0px 68px 0px 0px; } div#rightSide { background: #EFDFBC; margin-left: 480px; margin-top: -659px; height: 634px; width: 800px; } div#rightSide h1 { text-align: center; margin-top: 25px; margin-right: 24px; background: #EFDFBC; color: #bf2e1a; padding: 18px 10px 10px 10px; } hr#consultationHR { width: 595px; margin-right: 77px; margin-top: -29px; } div#calenderTool { background: blue; width: 400px; height: 330px; margin-top: 25px; margin-left: 148px; } hr#endingHR { width: 495px; margin-top: 25px; color: #bf2e1a; width: 597px; margin-right: 76px; margin-top: 25px; } h3#shareQuiz { margin-right: 300px; margin-top: -9px; } p#rightsidePara { margin-left: 131px; margin-top: -12px; color: #bf2e1a; padding: 1px 0px 0px 20px; } p#rightsideParaTwo { margin-left: 136px; color: #bf2e1a; } h1#eligibleHeader { position: absolute; margin-left: 180px; margin-top: 20px; background: #EFDFBC; color: #bf2e1a; } div#images { margin-left: 550px; margin-top: -85px; background: #EFDFBC; } p#bkrwebsite { margin-left: 550px; color: #bf2e1a; } h3#clientHeader { background: #EFDFBC; text-align: center; color: #bf2e1a; font-size: 23px; padding-top: 25px; /* height: 400px; */ } hr#clienFormHr { margin-left: 45px; margin-top: 40px; } div#clientForm { background: #EFDFBC; margin-top: 33px; margin-left: 82px; } div#clientInfoBody { background: #EFDFBC; width: 425px; height: 480px; margin: 0 auto; } input#client-info-submit { display: inline-block; /* margin: 85px; */ /* margin: 0 auto; */ margin-left: 45px; margin-top: 12px; padding: 10px 30px; background-color: #bf2e1a; /* border-color: #ddd; */ font-size: 33px; text-align: center; } div#clienQuestionHeader { height: 140px; color: #EFDFBC; border-style: solid; margin-top: 163px; font-size: 28px; border-width: 10px; margin-left: 113px; margin-right: 110px; } input#clientName { margin-left: 10px; padding: 5px 80px 5px 10px; margin-left: 0px; } input#clientEmail { margin-left: 0px; padding: 5px 80px 5px 10px; margin-top: 5px; } input#clientPhone { margin-left: 0px; padding: 5px 80px 5px 10px; margin-top: 5px; } div#clientNameDiv { background: #EFDFBC; } div#clientEmailDiv { background: #EFDFBC; } div#clientPhoneDiv { background: #EFDFBC; } label#clientNameLabel { background: #EFDFBC; font-size: 24px; } label#clientEmailLabel { background: #EFDFBC; font-size: 24px; } label#clientPhoneLabel { background: #EFDFBC; font-size: 24px; } .verticalLine { width: 2px; height: 570px; position: absolute; margin-left: 591px; margin-top: -615px; } .bkr-header{ color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 153px; padding-bottom: 30px; padding-top: 30px; /* margin-top: 163px; */ margin: 0 auto; width: 600px; text-align: center; font-size: 60px; border-width: 10px; } .hidden { display: none; } .visible { display: block; margin: 0 auto; width: 650px; height: 445px; background: #EFDFBC; } .visible2 { display: block; margin: 0 auto; width: 650px; height: 165px; background: #EFDFBC; } .visible4 { display: block; margin: 0 auto; width: 650px; height: 195px; background: #EFDFBC; } .visibleHeader { color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 153px; padding-bottom: 30px; padding-top: 30px; /* margin-top: 163px; */ margin: 0 auto; width: 650px; text-align: center; font-size: 60px; border-width: 10px; } .page { display: none; } .page.active { display: block; margin: 0 auto; width: 650px; } .green{ color:green; } .yellow{ color:yellow; } .red{ color:red; } .questions { margin: 0px auto; width: 650px; height: 444px; background: #EFDFBC; } .questions-header { color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 153px; padding-bottom: 30px; padding-top: 30px; /* margin-top: 163px; */ margin: 0 auto; width: 650px; text-align: center; font-size: 60px; border-width: 10px; } .quiz-questions { margin-top: 100px; } 

 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"/> <title>Questions</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class = "quiz-questions"> <div id="first-question" class="page active"> <div id="questionHeader"> <h1> Question 1 of 5 </h1> </div> <div id="questionOneBody"> <h3>Questoin 1</h3> <ul> <li>A</li> <li>B</li> </ul> <input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" /> <label for="quiz-question-one-yes" id="oneYes">Yes</label> <input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" /> <label for="quiz-question-one-no" id="oneNo">No</label> </div> </div> <div id="second-question" class="page"> <div id="questionHeader"> <h1> Question 2 of 5 </h1> </div> <div id="questionTwoBody"> <h3>Question 2</h3> <input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" /> <label for="quiz-question-two-yes" id="twoYes">Yes</label> <input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" /> <label for="quiz-question-two-no" id="twoNo">No</label> </div> </div> <div id="third-question" class="page"> <div id="questionHeader"> <h1> Question 3 of 5 </h1> </div> <div id="questionThreeBody"> <h3>Question 3 </h3> <input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" /> <label for="quiz-question-three-yes" id="threeYes">Yes</label> <input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" /> <label for="quiz-question-three-no" id="threeNo">No</label> </div> </div> <div id="fourth-question" class="page"> <div id="questionHeader"> <h1> Question 4 of 5</h1> </div> <div id="questionFourBody"> <h3>Question 4</h3> <input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" /> <label for="quiz-question-four-yes" id="fourYes">Yes</label> <input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" /> <label for="quiz-question-four-no" id="fourNo">No</label> </div> </div> <div id="fifth-question" class="page"> <div id="questionHeader"> <h1> Question 5 of 5 </h1> </div> <div id="questionFiveBody"> <h3>Question 5</h3> <input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" /> <label for="quiz-question-five-yes" id="fiveYes">Yes</label> <input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" /> <label for="quiz-question-five-no" id="fiveNo">No</label> </div> </div> <div id="client-info" class="page"> <div id="clienQuestionHeader"> <h1> Almost There </h1> </div> <div id="clientInfoBody"> <h3 id="clientHeader">Input you contact information to see your eligibility</h3> <div id="clientForm"> <label id="clientNameLabel" > Name : </label> <div id="clientNameDiv"> <input type="text" name="clientname" id="clientName"/> </div> <br> <label id="clientEmailLabel"> Email: </label> <div id="clientEmailDiv"> <input type="text" name="clientemail" id="clientEmail" /> </div> <br> <label id="clientPhoneLabel"> Phone: </label> <div id="clientPhoneDiv"> <input type="text" name="clientphone" id="clientPhone"/> </div> <br> <hr id="clienFormHr"> <input type="submit" name="clientinformation" id="client-info-submit" onclick="result()"/> <!--<label for="client-info-submit" id="clientInfoLabel">No</label> --> </div> </div> </div> <div class="page result"> <div id="allResult"> <div id="resultHeader"> <h1> Congratulations </h1> </div> <h1 id="eligibleHeader"> You might be eligible. </h1> <hr id="eligibleHr"> <div id="result"> </div> <!-- Vertical Line --> <div class="verticalLine"> </div> <!-- Vertical Line End --> <div id="rightSide"> <h1>Schedule your free consultation now.</h1> <hr id="consultationHR"> <div id="calenderTool"> </div> <div id="calenderToolSideText"> <p>Use this calender to schedule your appointment, or call our office to have someone do it for you. </p> <p>Because you pre-qualify, the consultation is free.</p> <br> <p>(317) 571-3600</p> <p>M - F, 8:30 am - 5:00 pm </p> </div> <hr id="endingHR"> <h3 id="shareQuiz"> Share the quiz </h3> <p id="rightsidePara"> Your friends won't see your results,</p> <p id="rightsideParaTwo">just alink to take it themselves. </p> <div id="images"> <img id ="facebook" src="logos/FacebookIcon.png"></img> <img id ="twitter" src="logos/TwitterIcon.png"></img> <img id ="googleplus" src="logos/GooglePlusIcon.png"></img> </div> <p id="bkrwebsite">www.bkr.com</p> </div> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> /*function updateResult() { var r = results, rt = $('#result'); if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('All Yes'); } else if ((!r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (!r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('All No'); } else { rt.text('We have a mixed response'); } }*/ var results = {}; function updateResult() { var r = results, rt = $('#result'); if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } <!-- YELLOW --> else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('yellow').addClass('yellow'); } else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('yellow').addClass('yelllow'); } <!-- RED --> <!--else if (!r.quizquestionone) {--> <!--rt.text('Based on your responses, it's not clear whether you qualify for a U-Visa. Please schedule a consultation with an experienced immigration attorney. She will collect more information about your specific circumstances and determine whether a U Visa is a realistic possibility or if other immigration benefits might serve you better. The cost of the consultation is only $100 and will be applied to the cost of any legal work performed on your behalf. You may call our office at (317) 571-3600 or fill out the following form to begin. ').addClass('red');--> <!--}--> <!--else if ((r.quizquestionone) && (!quizquestionfour)) {--> <!--rt.text('Based on your responses, it's not clear whether you qualify for a U-Visa. Please schedule a consultation with an experienced immigration attorney. She will collect more information about your specific circumstances and determine whether a U Visa is a realistic possibility or if other immigration benefits might serve you better. The cost of the consultation is only $100 and will be applied to the cost of any legal work performed on your behalf. You may call our office at (317) 571-3600 or fill out the following form to begin. ').addClass('red');--> <!--}--> else{ rt.text('red').addClass('red'); } } $(function result () { $('body').on('click', '[name]', function () { var $this = $(this), page = $this.closest('.page'), next_page = $(page.next()); results[$this.attr('name')] = $(this).val() === 'yes'; page.removeClass('active'); next_page.addClass('active'); if (next_page.hasClass('result')) updateResult(); }); }); </script> 

Answer 1

從提交按鈕中刪除onclick=result() 。 並通過無線電處理事件並提交如下按鈕：

$('.quiz-questions input[type=radio], input[type=submit]').click(function (){
    var $this = $(this),
        page = $this.closest('.page'),
        next_page = $(page.next());
    results[$this.attr('name')] = ($(this).val() === 'yes');
    page.removeClass('active');
    next_page.addClass('active');
    if (next_page.hasClass('result')) updateResult();
});

Answer 2

if .click函數中的if子句（ 即你的result（）函數 ）不是必需的。

你的功能將是：

$('.quiz-questions input[type=radio], input[type=submit]').click(function ()
{
    var $this = $(this),
        page = $this.closest('.page'),
        next_page = $(page.next());
    results[$this.attr('name')] = ($(this).val() === 'yes');
    page.removeClass('active');
    next_page.addClass('active');
    updateResult();
});

在代碼段下面運行：

 * { box-sizing: border-box; background-color: #bf2e1a; } header { color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 100px; margin-left: 650px; margin-right: 650px; margin-top: 150px; text-align: center; font-size: 60px; border-width: 5px; } div#main-content { margin-top: 100px; font-family: sans-serif; } div#disclaimer { width: 800px; height: 467px; margin: 0 auto; margin-top: 200px; background: #EFDFBC; padding: 30px 10px 10px 0px; } div#get-justice { position: relative; top: 30px; padding-top: 10px; background-color: #EFDFBC; margin: 0 auto; width: 600px; height: 600px; } div#get-justice p { background-color: #EFDFBC; color: #bf2e1a; padding: 40px 40px 4px 40px; font-size: 28px; } div#get-justice button { background-color: #bf2e1a; border: none; color: white; margin-top: 120px; padding: 20px 37px; text-align: center; text-decoration: none; display: inline-block; font-size: 21px; cursor: pointer; } h3 { background: #EFDFBC; text-align: center; color: #bf2e1a; font-size: 33px; padding-top: 25px; } div#first-question { text-align: center; } ul { columns: 2; background: #EFDFBC; text-align: -webkit-left; } li { text-align: -webkit-match-parent; background: #EFDFBC; display: block; padding: 1px 0px 3px 37px; font-family: sans-serif; } input#quiz-question-one-yes { display: none; margin: 11px; } input#quiz-question-one-no { display: none; margin: 11px; } label#oneYes { display: inline-block; margin: 10px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#oneNo { display: inline-block; margin: 10px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } input#quiz-question-two-yes { display: none; margin: 11px; } input#quiz-question-two-no { display: none; margin: 11px; } label#twoYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#twoNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } input#quiz-question-three-yes { display: none; margin: 11px; } input#quiz-question-three-no { display: none; margin: 11px; } label#threeYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#threeNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } /*label#threeYes { display: inherit; margin: 13px 360px 0px 195px; padding: 8px 73px 8px 22px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#threeNo { display: inherit; margin: -54px 296px 0px 300px; padding: 12px 66px 5px 18px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; }*/ input#quiz-question-four-yes { display: none; margin: 11px; } input#quiz-question-four-no { display: none; margin: 11px; } label#fourYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fourNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } /* label#fourYes { display: inherit; margin: 13px 360px 0px 195px; padding: 8px 73px 8px 22px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fourNo { display: inherit; margin: -54px 296px 0px 300px; padding: 12px 66px 5px 18px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; }*/ input#quiz-question-five-yes { display: none; margin: 11px; } input#quiz-question-five-no { display: none; margin: 11px; } label#fiveYes { display: inline-block; margin: 10px 208px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fiveNo { display: inline-block; margin: 0px 0 0 -197px; padding: 10px 30px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } /* label#fiveYes { display: inherit; margin: 13px 360px 0px 195px; padding: 8px 73px 8px 22px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; } label#fiveNo { display: inherit; margin: -54px 296px 0px 300px; padding: 12px 66px 5px 18px; background-color: #bf2e1a; border-color: #ddd; font-size: 33px; text-align: center; }*/ .clientinfo{ height:445px; background-color: #EFDFBC; } p { background-color: #EFDFBC; font-size: 23px; margin: 0 auto; padding: 10px 0px 1px 70px; } input[type="text"] { background-color: white; padding: 4px 0px 0px 10px; margin: 0px 0px 0px 70px; } button { display: block; margin: 0 auto; padding: 25px 35px 20px 25px; font-size: 35px; margin-top: 45px; color: #EFDFBC; } button#start { display: block; margin: 0 auto; width: 200px; padding: 25px 35px 20px 25px; font-size: 35px; margin-top: -272px; margin-right: 68px; } hr { width: 165px; padding: 1px 0px 0px 0px; } div#disclaimer { width: 800px; padding: 27px 10px 10px 0px; } div#questionOneBody { background: #EFDFBC; } div#questionTwoBody { background: #EFDFBC; } div#questionThreeBody { background: #EFDFBC; } div#questionFourBody { background: #EFDFBC; } div#questionFiveBody { background: #EFDFBC; } h1 { /* padding: 20px 4px 20px; */ text-align: center; margin-top: 25px; } /* h1 { //background: #EFDFBC; padding: 20px 4px 20px; text-align: center; } */ h1#disclaimerHeader { background: #EFDFBC; /* padding: 20px 0px 20px 0px; */ text-align: center; } p { background-color: #EFDFBC; font-size: 23px; margin: 0 auto; padding: 1px 0px 0px 20px; } div#disc-container { width: 450px; background: #EFDFBC; padding: 10px 10px 14px 10px; border-style: solid; border-color: #bf2e1a; border-width: 10px; margin-left: 20px; } a#disclaimerLink { text-decoration: none; } /*.hideHeader{ display:none; }*/ p#greenText { background: #EFDFBC; display: block; width: 800px; margin: 0 auto; margin-top: 300px; font-size: 30px; color: green; text-align: -webkit-auto; padding: 50px 50px 50px 50px; } p#yellowText { background: #EFDFBC; display: block; width: 800px; margin: 0 auto; margin-top: 300px; font-size: 30px; color: yellow; text-align: -webkit-auto; padding: 50px 50px 50px 50px; } p##bf2e1aText { background: #EFDFBC; display: block; width: 800px; margin: 0 auto; margin-top: 300px; font-size: 30px; color: #bf2e1a; text-align: -webkit-auto; padding: 50px 50px 50px 50px; } div#questionHeader { height: 140px; color: #EFDFBC; border-style: solid; margin-top: 163px; font-size: 28px; border-width: 10px; } /*div#resultHeader { margin-top: 163px; font-size: 28px; border-width: 10px; } div#resultHeader { height: 140px; color: #EFDFBC; border-style: solid; margin-bottom: 10px; font-size: 28px; border-width: 10px; }*/ div#resultHeader { color: #EFDFBC; border-style: solid; margin-bottom: 10px; margin-left: 110px; width: 1170px; font-size: 28px; border-width: 10px; } div#quizResult { font-size: 20px; /* width: 650px; */ margin: 0 auto; background: #EFDFBC; height: 600px; margin-top: 10px; } div#allResult { margin: 0 auto; margin-left: -350px; margin-right: -350px; /* background: #EFDFBC; */ } div#leftResult { background: #EFDFBC; width: 610px; } div#result { background: #EFDFBC; height: 634px; font-size: 24.5px; width: 450px; margin-left: 110px; padding: 88px 45px 0px 70px; //font-family: sans-serif; } hr#eligibleHr { position: absolute; margin-top: 57px; width: 300px; margin-left: 182px; } div#calenderToolSideText { background: #EFDFBC; /* width: 300px; */ margin-left: 551px; margin-bottom: -18px; margin-top: -334px; padding: 0px 68px 0px 0px; } div#rightSide { background: #EFDFBC; margin-left: 480px; margin-top: -659px; height: 634px; width: 800px; } div#rightSide h1 { text-align: center; margin-top: 25px; margin-right: 24px; background: #EFDFBC; color: #bf2e1a; padding: 18px 10px 10px 10px; } hr#consultationHR { width: 595px; margin-right: 77px; margin-top: -29px; } div#calenderTool { background: blue; width: 400px; height: 330px; margin-top: 25px; margin-left: 148px; } hr#endingHR { width: 495px; margin-top: 25px; color: #bf2e1a; width: 597px; margin-right: 76px; margin-top: 25px; } h3#shareQuiz { margin-right: 300px; margin-top: -9px; } p#rightsidePara { margin-left: 131px; margin-top: -12px; color: #bf2e1a; padding: 1px 0px 0px 20px; } p#rightsideParaTwo { margin-left: 136px; color: #bf2e1a; } h1#eligibleHeader { position: absolute; margin-left: 180px; margin-top: 20px; background: #EFDFBC; color: #bf2e1a; } div#images { margin-left: 550px; margin-top: -85px; background: #EFDFBC; } p#bkrwebsite { margin-left: 550px; color: #bf2e1a; } h3#clientHeader { background: #EFDFBC; text-align: center; color: #bf2e1a; font-size: 23px; padding-top: 25px; /* height: 400px; */ } hr#clienFormHr { margin-left: 45px; margin-top: 40px; } div#clientForm { background: #EFDFBC; margin-top: 33px; margin-left: 82px; } div#clientInfoBody { background: #EFDFBC; width: 425px; height: 480px; margin: 0 auto; } input#client-info-submit { display: inline-block; /* margin: 85px; */ /* margin: 0 auto; */ margin-left: 45px; margin-top: 12px; padding: 10px 30px; background-color: #bf2e1a; /* border-color: #ddd; */ font-size: 33px; text-align: center; } div#clienQuestionHeader { height: 140px; color: #EFDFBC; border-style: solid; margin-top: 163px; font-size: 28px; border-width: 10px; margin-left: 113px; margin-right: 110px; } input#clientName { margin-left: 10px; padding: 5px 80px 5px 10px; margin-left: 0px; } input#clientEmail { margin-left: 0px; padding: 5px 80px 5px 10px; margin-top: 5px; } input#clientPhone { margin-left: 0px; padding: 5px 80px 5px 10px; margin-top: 5px; } div#clientNameDiv { background: #EFDFBC; } div#clientEmailDiv { background: #EFDFBC; } div#clientPhoneDiv { background: #EFDFBC; } label#clientNameLabel { background: #EFDFBC; font-size: 24px; } label#clientEmailLabel { background: #EFDFBC; font-size: 24px; } label#clientPhoneLabel { background: #EFDFBC; font-size: 24px; } .verticalLine { width: 2px; height: 570px; position: absolute; margin-left: 591px; margin-top: -615px; } .bkr-header{ color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 153px; padding-bottom: 30px; padding-top: 30px; /* margin-top: 163px; */ margin: 0 auto; width: 600px; text-align: center; font-size: 60px; border-width: 10px; } .hidden { display: none; } .visible { display: block; margin: 0 auto; width: 650px; height: 445px; background: #EFDFBC; } .visible2 { display: block; margin: 0 auto; width: 650px; height: 165px; background: #EFDFBC; } .visible4 { display: block; margin: 0 auto; width: 650px; height: 195px; background: #EFDFBC; } .visibleHeader { color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 153px; padding-bottom: 30px; padding-top: 30px; /* margin-top: 163px; */ margin: 0 auto; width: 650px; text-align: center; font-size: 60px; border-width: 10px; } .page { display: none; } .page.active { display: block; margin: 0 auto; width: 650px; } .green{ color:green; } .yellow{ color:yellow; } .red{ color:red; } .questions { margin: 0px auto; width: 650px; height: 444px; background: #EFDFBC; } .questions-header { color: #EFDFBC; border-style: solid; border-color: #EFDFBC; top: 153px; padding-bottom: 30px; padding-top: 30px; /* margin-top: 163px; */ margin: 0 auto; width: 650px; text-align: center; font-size: 60px; border-width: 10px; } .quiz-questions { margin-top: 100px; } 

 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"/> <title>Questions</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class = "quiz-questions"> <div id="first-question" class="page active"> <div id="questionHeader"> <h1> Question 1 of 5 </h1> </div> <div id="questionOneBody"> <h3>Questoin 1</h3> <ul> <li>A</li> <li>B</li> </ul> <input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" /> <label for="quiz-question-one-yes" id="oneYes">Yes</label> <input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" /> <label for="quiz-question-one-no" id="oneNo">No</label> </div> </div> <div id="second-question" class="page"> <div id="questionHeader"> <h1> Question 2 of 5 </h1> </div> <div id="questionTwoBody"> <h3>Question 2</h3> <input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" /> <label for="quiz-question-two-yes" id="twoYes">Yes</label> <input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" /> <label for="quiz-question-two-no" id="twoNo">No</label> </div> </div> <div id="third-question" class="page"> <div id="questionHeader"> <h1> Question 3 of 5 </h1> </div> <div id="questionThreeBody"> <h3>Question 3 </h3> <input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" /> <label for="quiz-question-three-yes" id="threeYes">Yes</label> <input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" /> <label for="quiz-question-three-no" id="threeNo">No</label> </div> </div> <div id="fourth-question" class="page"> <div id="questionHeader"> <h1> Question 4 of 5</h1> </div> <div id="questionFourBody"> <h3>Question 4</h3> <input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" /> <label for="quiz-question-four-yes" id="fourYes">Yes</label> <input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" /> <label for="quiz-question-four-no" id="fourNo">No</label> </div> </div> <div id="fifth-question" class="page"> <div id="questionHeader"> <h1> Question 5 of 5 </h1> </div> <div id="questionFiveBody"> <h3>Question 5</h3> <input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" /> <label for="quiz-question-five-yes" id="fiveYes">Yes</label> <input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" /> <label for="quiz-question-five-no" id="fiveNo">No</label> </div> </div> <div id="client-info" class="page"> <div id="clienQuestionHeader"> <h1> Almost There </h1> </div> <div id="clientInfoBody"> <h3 id="clientHeader">Input you contact information to see your eligibility</h3> <div id="clientForm"> <label id="clientNameLabel" > Name : </label> <div id="clientNameDiv"> <input type="text" name="clientname" id="clientName"/> </div> <br> <label id="clientEmailLabel"> Email: </label> <div id="clientEmailDiv"> <input type="text" name="clientemail" id="clientEmail" /> </div> <br> <label id="clientPhoneLabel"> Phone: </label> <div id="clientPhoneDiv"> <input type="text" name="clientphone" id="clientPhone"/> </div> <br> <hr id="clienFormHr"> <input type="submit" name="clientinformation" id="client-info-submit" /> <!--<label for="client-info-submit" id="clientInfoLabel">No</label> --> </div> </div> </div> <div class="page result"> <div id="allResult"> <div id="resultHeader"> <h1> Congratulations </h1> </div> <h1 id="eligibleHeader"> You might be eligible. </h1> <hr id="eligibleHr"> <div id="result"> </div> <!-- Vertical Line --> <div class="verticalLine"> </div> <!-- Vertical Line End --> <div id="rightSide"> <h1>Schedule your free consultation now.</h1> <hr id="consultationHR"> <div id="calenderTool"> </div> <div id="calenderToolSideText"> <p>Use this calender to schedule your appointment, or call our office to have someone do it for you. </p> <p>Because you pre-qualify, the consultation is free.</p> <br> <p>(317) 571-3600</p> <p>M - F, 8:30 am - 5:00 pm </p> </div> <hr id="endingHR"> <h3 id="shareQuiz"> Share the quiz </h3> <p id="rightsidePara"> Your friends won't see your results,</p> <p id="rightsideParaTwo">just alink to take it themselves. </p> <div id="images"> <img id ="facebook" src="logos/FacebookIcon.png"></img> <img id ="twitter" src="logos/TwitterIcon.png"></img> <img id ="googleplus" src="logos/GooglePlusIcon.png"></img> </div> <p id="bkrwebsite">www.bkr.com</p> </div> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> /*function updateResult() { var r = results, rt = $('#result'); if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('All Yes'); } else if ((!r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (!r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('All No'); } else { rt.text('We have a mixed response'); } }*/ var results = {}; function updateResult() { var r = results, rt = $('#result'); if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('green').addClass('green'); } <!-- YELLOW --> else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { rt.text('yellow').addClass('yellow'); } else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { rt.text('yellow').addClass('yelllow'); } <!-- RED --> <!--else if (!r.quizquestionone) {--> <!--rt.text('Based on your responses, it's not clear whether you qualify for a U-Visa. Please schedule a consultation with an experienced immigration attorney. She will collect more information about your specific circumstances and determine whether a U Visa is a realistic possibility or if other immigration benefits might serve you better. The cost of the consultation is only $100 and will be applied to the cost of any legal work performed on your behalf. You may call our office at (317) 571-3600 or fill out the following form to begin. ').addClass('red');--> <!--}--> <!--else if ((r.quizquestionone) && (!quizquestionfour)) {--> <!--rt.text('Based on your responses, it's not clear whether you qualify for a U-Visa. Please schedule a consultation with an experienced immigration attorney. She will collect more information about your specific circumstances and determine whether a U Visa is a realistic possibility or if other immigration benefits might serve you better. The cost of the consultation is only $100 and will be applied to the cost of any legal work performed on your behalf. You may call our office at (317) 571-3600 or fill out the following form to begin. ').addClass('red');--> <!--}--> else{ rt.text('red').addClass('red'); } } $('.quiz-questions input[type=radio], input[type=submit]').click(function (){ var $this = $(this), page = $this.closest('.page'), next_page = $(page.next()); results[$this.attr('name')] = $(this).val() === 'yes'; page.removeClass('active'); next_page.addClass('active'); updateResult(); }); </script>