Solved

Change answer on page depending on JQUERY form submission

Posted on 2013-05-21
9
270 Views
Last Modified: 2013-05-31
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
Comment
Question by:manicdiggity
  • 5
  • 4
9 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39188761
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
 

Author Comment

by:manicdiggity
ID: 39188986
Do you have a quick sample that you can point me to?
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39190113
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
 

Author Closing Comment

by:manicdiggity
ID: 39192425
That's exactly it. Your solution is definitely much cleaner than the direction I was going. Thanks!
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:manicdiggity
ID: 39209350
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39210093
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
 

Author Comment

by:manicdiggity
ID: 39211077
That worked, thanks again!
0
 

Author Comment

by:manicdiggity
ID: 39211081
Is there a way I can give you more points even though this wasn't a separate question?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39211131
No - you would need to open a separate question.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now