Member Avatar for tcepser

Hello. Bit of a random question here.

I have been given a task to do in work. It's basically about 8 Excel sheets that contain similar scenarios like this -

http://i.imgur.com/YohHE.png

I have decided that as it's getting sent out to all the stores in the company that CD would be the best option, so I am going to create a website for it (on the CD, not the actual WWW)

Now instead of creating hundreds of web pages in Dreamweaver is it possible to do something in the webpage where they click the first option and on the same page the next option comes up?

  • 3 Contributors
  • 4 Replies
  • 101 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by KingGold171
Member Avatar for teedoff

Changing page content without a hard page refresh(new page request to the server) requires the use of ajax.

Ajax would allow a user to select an option, then have "other" content displayed based on that option that was selected.

Member Avatar for KingGold171

After looking at you picture layout i came up with this design.

To show you what the code produces please visit the URL below. If it is what you are looking for, it was fun making it just for you :)

Click here to preview the code.

On the code below the top link you see on the page has been removed and the title has been set for you to change.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(Your title here)</title>
</head>
<body>
<br />
<br />
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
</script>
<form>
<div align="center">
<thead>
<tr>
<td class="title">Dose the customer want a phone?</td>
<td class="field"><select name="type" onchange="display(this,'yes','no');">
<option>Please select:</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</td>
</tr>
</thead>
</div>
<br />
<div align="center">
<table width="600" cellspacing="0" cellpadding="2">
<tbody id="yes" style="display: none;">
<tr>
<td class="title">What phone do they want?
</td>
</div>
<td class="field"><input type="text" name="phone" value="" maxlength="100" />
</td>
</tr>
<tbody id="no" style="display: none;">
<tr>
<td class="title">Do they require anything else?
</td>
</div>
<td class="field"><select name="type" onchange="display(this,'yes2','no2');">
<option>Please select:</option>
<option value="yes2">Yes</option>
<option value="no2">No</option>
</select>
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<div align="center">
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Clear" /> 
</div>
</tbody>
</form>
</div>
</body>
</html>

Finally the code will need a little editing in-order for when you answer "Do they require anything else?" with 'yes' a text box should appear. *I am still working on how to add this.*

Member Avatar for tcepser

Looking great so far. But it look's like there isn't just a script I can use. I am going to have to edit it as there are 100's of options etc :(

Member Avatar for KingGold171

The main question "Dose the customer want a phone?" is what runs off the

<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
</script>

If you are looking to add more to this then copy and paste the

txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';

And

if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}

with this simple ensure any you add have the ID numbers in order and to ensue that all extra lines are readable simple follow the format of...

function display(obj,id1,id2) {

and to enable the on-request ID you will have to keep track of the..

<td class="field"><select name="type"onchange="display(this,'yes','no');">
<option>Please select:</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>

Hope fully that quick and somewhat hard to understand walk-though (The way i worded and structured it) helps you develop what you are looking for.

Good-Luck
KG171

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.