Link to home
Start Free TrialLog in
Avatar of Genesis5150
Genesis5150

asked on

Conditional question when user selects

I have a form and when the user selects the answer to the first question I want the second question to appear on the form. This is the first question (below):

<tr>
    <td><b>Provider:</b></td>
    <td>
	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
    <script type='text/javascript'>
    jQuery(document).ready(function($) {
    var service = '"?><?php print isset($_POST['service']) ? $_POST['service'] : 'none'; ?><?php echo"';
    $('[name=service]').val( service );
    });
    </script>
<select name='service' size='1' id='service' value='";?><?php print isset($_POST['service']) ? $_POST['service'] : ""; ?><?php echo"'>
<option selected></option>
<option value='Realtor'>Realtor</option>
<option value='Owner'>Owner</option>
<option value='Manager'>Manager</option>
</select>
    </td>
  </tr>

Open in new window


When the answer is "Realtor" or "Manager" I want this question to appear:

 <tr>
    <td><b>Name of Office:</b></td>
    <td><input value='"?><?php print isset($_POST['office']) ? strip_tags($_POST['office']) : ""; ?><?php echo"' name='office' type='text' id='office' size='40' maxlength='40' placeholder='ACME Realty' /></td>
  </tr>
   <tr>

Open in new window


How can I perform this task? Which is easier ajax, jquery or javascript?

Thanks in advance.
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Which is easier ajax, jquery or javascript?
The easier one is the one you already know.  Can you please show us where you are on this problem -- what test data you're using and what code you've tried?
Avatar of Genesis5150
Genesis5150

ASKER

I haven't tried anything yet because I don't know where to begin. I have no test data to show and I'm not too familiar with neither of the three (ajax, javascript and jquery) Although I have tried jquery but only from what I have read on google searches.
OK, there are a few semesters of college standing between you and success, but we can help bridge the gap with some targeted learning.  There are a lot of moving parts here, and a lot of background understanding you need to get started.  In other words, it's not a question with a succinct answer; it's a path more than a destination.  Fortunately we've all been on this path and we have some good resources here at E-E to help.

If you're new to PHP and web development technology, this article can help you find your footing.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html

To do anything as complex as AJAX requests, you must understand what happens in the basic client/server systems.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html

It's also wise to understand what NOT to do :-)
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_12293-AntiPHPatterns-and-AntiPHPractices.html

"Fail fast and often" may sound like a strange idea, but it's essential to modern software development.  You want to set up a work environment that helps you run repeated incremental tests, so that you can test your code bit-by-bit as you write it.  Then you can deconstruct big and complex problems into small testable units, and you will always be working on small easy problems and never trying to eat an elephant.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_7830-A-Quick-Tour-of-Test-Driven-Development.html

At the heart of things, AJAX applications are Application Programming Interfaces ("APIs"), and this article shows the general design patterns that we use.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_12239-Introduction-to-Application-Programming-Interfaces.html

The basics of jQuery / AJAX are given in this article:
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html

Another example of a jQuery / AJAX application is here:
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_14519-A-jQuery-Progress-Bar.html

Hope that helps you get going, ~Ray
Ok so I took a look around in Google and found this and it works but how do I also include "Manager" as an another trigger is there elseif statement?

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type='text/javascript'>
    $(function() {
		$('#name_office').hide(); 
		$('#service').change(function(){
			if($('#service').val() == 'Realtor') {
				$('#name_office').show(); 
			} else {
				$('#name_office').hide(); 
			} 
		});
	});
    </script>
<tr>
    <td><b>Provider:</b></td>
    <td>
	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
    <script type='text/javascript'>
    jQuery(document).ready(function($) {
    var service = '"?><?php print isset($_POST['service']) ? $_POST['service'] : 'none'; ?>';
    $('[name=service]').val( service );
    });
    </script>
<select name='service' size='1' id='service' value='";?><?php print isset($_POST['service']) ? $_POST['service'] : ""; ?>'>
<option selected></option>
<option value='Realtor'>Realtor</option>
<option value='Owner'>Owner</option>
<option value='Manager'>Manager</option>
</select>
    </td>
  </tr>

<div id='name_office'>
  <tr>
    <td><b>Name of Office:</b></td>
    <td><input value='"?><?php print isset($_POST['office']) ? strip_tags($_POST['office']) : ""; ?>' name='office' type='text' id='office' size='40' maxlength='40' placeholder='ACME Realty' /></td>
  </tr>
  </div>

Open in new window

The script appears to integrate PHP and JavaScript in a way that does not work.  See if this one makes sense.
http://iconoun.com/demo/temp_genesis5150.php

<?php // demo/temp_genesis5150.php

/**
 * http://www.experts-exchange.com/questions/28692616/Conditional-question-when-user-selects.html
 */
error_reporting(E_ALL);


// USE PHP TO CREATE VARIABLES FOR OUR HTML
$dat = date('r');
$xyz = "This page was rendered at $dat";


// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $('#name_office').hide();
    $('#service').change(function(){
        var choice = $('#service').val();
        if(choice == 'Realtor' || choice == 'Manager') {
            $('#name_office').show();
        } else {
            $('#name_office').hide();
        }
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

Hello World. $xyz

<div>
<select id='service'>
<option selected>Choose something</option>
<option value='Realtor'>Realtor</option>
<option value='Owner'>Owner</option>
<option value='Manager'>Manager</option>
</select>
</div>

<div id="name_office">Show for Realtor or Manager but not Owner</div>

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for the insight on div tags within <tr>