?
Solved

Change answer on page depending on JQUERY form submission

Posted on 2013-05-21
9
Medium Priority
?
290 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 60

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 60

Accepted Solution

by:
Julian Hansen earned 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 60

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 60

Expert Comment

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses
Course of the Month16 days, 22 hours left to enroll

862 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