Store data in HTML or PHP

I have this nifty builder at quackit.com that builds my HTML table and page content for me as shown here http://screencast.com/t/ctP2KMAqX.  What I would like to do now is select a company from a list so that the cell adjacent to it will show the information stored about it.

Assistance is greatly appreciated.
frugalmuleAsked:
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.

Loganathan NatarajanLAMP DeveloperCommented:
do you want to build selection list ? it can be done in html?

<selection> <option>company1</option>
</selection>
0
frugalmuleAuthor Commented:
Yeah so Company1 might have some data and every time it is selected, we would want the data to appear beside it.
0
Loganathan NatarajanLAMP DeveloperCommented:
it is up to you how you want to do the stuff. either in php or HTML/Jquery... please give some more details to show you some sample work
0
Ultimate Tool Kit for Technology Solution Provider

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 now.

frugalmuleAuthor Commented:
Well that's what I was basically wondering.  Are there free visual builders online for PHP or Jquery (not sure what that is?) the way there is for HTML?
0
frugalmuleAuthor Commented:
I have the beginnings of the table here frugalmule.com/table/.  Basically, I want to either select or write-in a company on the left and have any data associated with it appear on the right.  When I enter new data, it should be saved.

What's the best approach here?
0
Loganathan NatarajanLAMP DeveloperCommented:
did you see this link http://www.quackit.com/html/codes/html_form_code.cfm

they've example how to include the selection box???
0
frugalmuleAuthor Commented:
Yes.  I think so anyway.

Here is what I have so far http://frugalmule.com/table/ and below is the source.  What I must do is STORE data next to the appropriate selection (i.e. company A, B, or C respectively).
<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
	<tbody>
		<tr>
			<td>Company</td>
			<td>Note</td>
			<td style="text-align: center;">Done</td>
		</tr>
		<tr>
			<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
			<td>This is the note that I want to add to and show each time company A is selected.&nbsp; If nothing is selected, then nothing should show up here.</td>
			<td style="text-align: center;"><input type="checkbox" /></td>
		</tr>
		<tr>
			<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
			<td>This is the note that I want to add to and show each time company B is selected.&nbsp; If nothing is selected, then nothing should show up here.</td>
			<td style="text-align: center;"><input type="checkbox" /></td>
		</tr>
		<tr>
			<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
			<td>This is the note that I want to add to and show each time company B is selected.&nbsp; If nothing is selected, then nothing should show up here.</td>
			<td style="text-align: center;"><input type="checkbox" /></td>
		</tr>
	</tbody>
</table>

Open in new window

0
Ray PaseurCommented:
Typically this would be data from a data base.  PHP and MySQL are the most frequently combined solutions for data base driven web sites, and these are the technologies that underpin WordPress.  The data would be placed in divs that would be hidden at page-load time.  Then when the select options are fired, the hidden div that matches the select would be toggled into view.  You can do this with jQuery.  Good learning resources for jQuery are available here:
http://learn.jquery.com/
http://code.tutsplus.com/courses/30-days-to-learn-jquery
http://www.amazon.com/Learning-jQuery-Edition-Jonathan-Chaffer/dp/1849516545
0
Ray PaseurCommented:
Wasn't quite sure what to do with all the select options since they were all hardwired to be selected in the HTML, so I didn't address that part.  This will show or hide a div when a checkbox is fired.

Please see: http://iconoun.com/demo/temp_frugalmule.php

<!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">
<title>HTML5 Page with jQuery fadeToggle()</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#a").hide();
    $("#b").hide();
    $("#c").hide();
    $("#xa").click(function(){
        $("#a").fadeToggle();
    });
    $("#xb").click(function(){
        $("#b").fadeToggle();
    });
    $("#xc").click(function(){
        $("#c").fadeToggle();
    });
});

</script>

</head>
<body>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td>Company</td>
<td>Note</td>
<td style="text-align: center;">Done</td>
</tr>
<tr>
<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
<td><div id="a">This is the note that I want to add to and show each time company A is selected.&nbsp; If nothing is selected, then nothing should show up here.</div></td>
<td style="text-align: center;"><input id="xa" type="checkbox" /></td>
</tr>
<tr>
<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
<td><div id="b">This is the note that I want to add to and show each time company B is selected.&nbsp; If nothing is selected, then nothing should show up here.</div></td>
<td style="text-align: center;"><input id="xb" type="checkbox" /></td>
</tr>
<tr>
<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
<td><div id="c">This is the note that I want to add to and show each time company C is selected.&nbsp; If nothing is selected, then nothing should show up here.</div></td>
<td style="text-align: center;"><input id="xc" type="checkbox" /></td>
</tr>
</tbody>
</table>

</body>
</html>

Open in new window

0
frugalmuleAuthor Commented:
Thank you for your suggestions.  I see that your page works beautifully, but outside of Wordpress.  Any assistance on implementing into Wordpress would be very appreciate http://screencast.com/t/L2D6HjAk
0
Ray PaseurCommented:
I'm not a Wordpress expert, but I think you might try using just this code fragment instead of the entire HTML document.  Also not sure if this would cause the jQuery library to be loaded twice.  You might want to check that with "view source" and if you find two references to the jQuery library, you might remove the first line of this code.  You may also want to check the div and checkbox ("selector") names to be sure there are not collisions with other selectors.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#a").hide();
    $("#b").hide();
    $("#c").hide();
    $("#xa").click(function(){
        $("#a").fadeToggle();
    });
    $("#xb").click(function(){
        $("#b").fadeToggle();
    });
    $("#xc").click(function(){
        $("#c").fadeToggle();
    });
});
</script>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td>Company</td>
<td>Note</td>
<td style="text-align: center;">Done</td>
</tr>
<tr>
<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
<td><div id="a">This is the note that I want to add to and show each time company A is selected.&nbsp; If nothing is selected, then nothing should show up here.</div></td>
<td style="text-align: center;"><input id="xa" type="checkbox" /></td>
</tr>
<tr>
<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
<td><div id="b">This is the note that I want to add to and show each time company B is selected.&nbsp; If nothing is selected, then nothing should show up here.</div></td>
<td style="text-align: center;"><input id="xb" type="checkbox" /></td>
</tr>
<tr>
<td><select multiple="true"><option selected="selected" value="">Company A</option><option selected="selected" value="">Company B</option><option selected="selected" value="">Company C</option></select></td>
<td><div id="c">This is the note that I want to add to and show each time company C is selected.&nbsp; If nothing is selected, then nothing should show up here.</div></td>
<td style="text-align: center;"><input id="xc" type="checkbox" /></td>
</tr>
</tbody>
</table>

Open in new window

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
frugalmuleAuthor Commented:
It's very very close.  Somehow though, the page comes up without a dropdown (all choices are listed instead of just one) and when you un-select and select a new letter it stays with what it I put in.
0
Ray PaseurCommented:
WordPress and jQuery Zones were added here.  I think the page comes up with all the options selected because the select control is a multiple and all of the options are marked selected.  Check this (spaced onto different lines to make the markup more obvious):

<tr>
<td>
<select multiple="true">
<option selected="selected" value="">Company A</option>
<option selected="selected" value="">Company B</option>
<option selected="selected" value="">Company C</option>
</select>
</td>
<td>This is the note that I want to add to and show each time company A is selected.&nbsp; If nothing is selected, then nothing should show up here.</td>
<td style="text-align: center;">
<input type="checkbox" />
</td>
</tr>

Open in new window

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
WordPress

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.