Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 564
  • Last Modified:

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.
0
frugalmule
Asked:
frugalmule
  • 6
  • 4
  • 3
6 Solutions
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now