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.
Genesis5150Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
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?
0
Genesis5150Author Commented:
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.
0
Ray PaseurCommented:
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.
http://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.
http://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 :-)
http://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.
http://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.
http://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:
http://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:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_14519-A-jQuery-Progress-Bar.html

Hope that helps you get going, ~Ray
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Genesis5150Author Commented:
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

0
Ray PaseurCommented:
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

0
Slick812Commented:
greetings Genesis5150, you ask "Which is easier ajax, jquery or javascript?" As I do code I need to know how to use the code to get results I need. Since both the "ajax" and "jquery" are firmly based on the language of javascript, you will need to take time to learn javascript, before you should venture into coding "Tools"  like "ajax" and "jquery". You must know the basics of javascript to have any chance of using jquery or ajax to get your work done.

I can see that you have done the beginners "google look up" and then try and copy and paste the code you found to get some code work results. But your request for the "When the answer is "Realtor" or "Manager" I want this question to appear", is a BASIC javascript FOR test that has nothing to do with the jquery.

since you seem to know how to write to the page with the PHP print as -
<?php print isset($_POST['service']) ? $_POST['service'] : ""; ?>
I will NOT do any PHP in my attempt to show you some javascript code,
I purposefully do not USE jquery, you do not really need it here for this, .

You have this -
<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

in your html code, and it is very incorrect, you can NEVER have any other things like a <div>, in the row and column structure of a <table>, it just don't work. You can however show and hide a <table>  <tr>  row, as you need to do here.
Please try and figure out what I an doing in this javascript code below. Notice that I set the STYLE display to none for the <tr> that has the   Name of Office:  in it. Instead of a javascript "IF" test, I use a better muti-result test of the "SWITCH" test. You can read more about this at  w3schools -
     http://www.w3schools.com/js/js_switch.asp

<!DOCTYPE html>
<html lang=en>
<head><title>Select change Table</title>

<script>/* <![CDATA[ */
  // To save typing I get a shorter name for the document.getElementById( ) as id2el( )
function id2el(id1) {return document.getElementById(id1);}

function showTR(sel) {
//alert("For Your Info to get Sel ID "+sel.id+", and the value= "+sel.value);

  // Get the <tr> Element BY ID of  name_office
var tr = id2el("name_office");

  // the most simple way to have several select values tested is with a SWITCH block
switch(sel.value) {
  case "Realtor": // put NOTHING here and it drops through to the next case
  case "Manager":
    // now just set the display to the element type of display
    tr.style.display = "table-row";
  break;  // u Must break here, to prevent drop through
  
  //all other sel values do the default
  default: tr.style.display = "none"; // disply as "none", element is not shown
}
}
/* ]]> */</script>
</head>
<body>
<h3>Select change Table</h3>

<table>
  <tr>
    <td><b>Provider:</b></td>
    <td>
    <select name='service' id='service' onchange="showTR(this)">
    <option selected></option>
    <option value='Realtor'>Realtor</option>
    <option value='Owner'>Owner</option>
    <option value='Manager'>Manager</option>
    </select>
    </td>
  </tr>
  <tr id='name_office' style="display:none;">
    <td><b>Name of Office:</b></td>
    <td><input value='Midland Realty' name='office' type='text' size='40' maxlength='40' placeholder='ACME Realty' /></td>
  </tr>
  <tr>
    <td><b>Contact</b></td>
    <td>Chris Jones</td>
  </tr>
</table>

</body>
</html>

Open in new window

You may can get some of the javascript uses form my code above, but if you need more about using javascript , thate are many many tutorials and "How To Code" web sites.

ask questions if you need more info.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Genesis5150Author Commented:
Thanks for the insight on div tags within <tr>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.