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):
When the answer is "Realtor" or "Manager" I want this question to appear:
How can I perform this task? Which is easier ajax, jquery or javascript?
Thanks in advance.
<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>
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>
How can I perform this task? Which is easier ajax, jquery or javascript?
Thanks in advance.
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
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
ASKER
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>
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
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;
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the insight on div tags within <tr>