Solved

Change answer on page depending on JQUERY form submission

Posted on 2013-05-21
9
272 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 54

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 54

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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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
 

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 54

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 54

Expert Comment

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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

803 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