• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 306
  • Last Modified:

Change answer on page depending on JQUERY form submission

Hi, I have a page that has a link to a basic 3-page questionnaire, you can see it here:

http://www.webcapacity.com/jq-test.html

Once you click the "Start Questions" link, you get a jQuery popup that leads you through three questions. I have a few problems though, if anyone could help, it would be greatly appreciated:

1) If you answer "Yes" to all three popup windows, the popup should close and the area where it says "The final answer is: TBD" should read: "The final answer is: YES"

2) If you answer "No" to ANY popup, the popup should close and that area should read: "The final answer is: NO"  Right now answering "No" to a popup is taking you to the next one.

Any assistance would be greatly appreciated.
0
manicdiggity
Asked:
manicdiggity
  • 5
  • 4
1 Solution
 
Julian HansenCommented:
This is quite a heavy implementation of what you are trying to achieve.

You might find it a lot easier and neater to use the following approach.

Instead of having multiple dialogs - you have only one - but in the dialog you have multiple pannels.

The first is visible the rest are hidden.

Then when you click the radio's instead of loading and hiding dialogs you show and hide panels.
0
 
manicdiggityAuthor Commented:
Do you have a quick sample that you can point me to?
0
 
Julian HansenCommented:
Here is a quick and dirty I knocked together. Live demo here http://www.marcorpsa.com/ee/t234.html

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/overcast/jquery-ui.css">
<script type="text/javascript">
$(function() {
  $('a.opendialog').click(function(e) {
    e.preventDefault();
    $('#dialog').dialog();
  });
  $(':radio').click(function() {
    if ($(this).val() == 'no') {
      $('#dialog').dialog('close');
      $('#answer').html('No');
    }
    else {
      if ($(this).parent().next().hasClass('panel')) {
        $(this).parent().hide();
        $(this).parent().next().show();
        $('#prev').show();
      }
      else {
        $('#dialog').dialog('close');
        $('#answer').html('Yes');
      }
    }
  });
  $('#prev').click(function() {
    var panel = $('.panel:visible');
    if (!panel.prev().prev().hasClass('panel')) {
      $(this).hide();
    }
    panel.hide().prev().show();
  });
});
</script>
</head>
<body>
<a class="opendialog">Open</a>
The final answer is <span id="answer">TBD</span>

<div id="dialog" style="display: none;">
  <div class="panel">
    <p class="question">Q1: Click "Yes" to go to next screen, "No" sets final answer to no</p>
    <input type="radio" value="yes" name="radio"/> Yes <br/>
    <input type="radio" value="no" name="radio" /> No <br/>
  </div>
  <div class="panel" style="display:none">
    <p class="question">Q2: Click "Yes" to go to next screen, "No" sets final answer to no</p>
    <input type="radio" value="yes" name="radio"/> Yes <br/>
    <input type="radio" value="no" /> No <br/>
  </div>
  <div class="panel" style="display:none">
    <p class="question">Q3: Click "Yes" to go to next screen, "No" sets final answer to no</p>
    <input type="radio" value="yes" name="radio" /> Yes <br/>
    <input type="radio" value="no" name="radio" /> No <br/>
  </div>
  <input type="button" value="Prev" id="prev" style="display: none;"/>
</div>
</body>
</html>

Open in new window

0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
manicdiggityAuthor Commented:
That's exactly it. Your solution is definitely much cleaner than the direction I was going. Thanks!
0
 
manicdiggityAuthor Commented:
Hi Julian, your solution worked great, I just had a quick question. If I am on the second panel (Question 2) and then close the dialog, when I re-open it, it's still on Question 2. How can I get it to open at Question 1 regardless of where I had previously left off?
0
 
Julian HansenCommented:
Change your instantiation of the dialog to this

$('#dialog').dialog({
    close: function() { 
	  $('.panel').hide().filter(':first-child').show();
	  $(':radio').attr('checked',false);  // Add this if you want to reset the radio buttons
    }
  }
);

Open in new window

0
 
manicdiggityAuthor Commented:
That worked, thanks again!
0
 
manicdiggityAuthor Commented:
Is there a way I can give you more points even though this wasn't a separate question?
0
 
Julian HansenCommented:
No - you would need to open a separate question.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now