Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Change answer on page depending on JQUERY form submission

Posted on 2013-05-21
9
273 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 55

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 55

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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 

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 55

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 55

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

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Make Session back to empty 9 30
Explain this javascript function to me 2 25
Wordpress Pagination 1 28
ajax wont trigger twice without a page refresh 7 14
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

809 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