Below is an order form that I have been working on to learn how html, javascript, php and mysql interact with each other.
https://www.dropbox.com/s/7zpok07w1bygu60/Screen%20Shot%202012-08-12%20at%2010.28.41%20AM.png
The goal of this table is to have the user input a number in the quantity field and on the change, javascript will automatically update the total cost of that particular product. The kicker is that I want the list to be populated from a mysql database table.
Here is the html, javascript and php code that I am using.
HTML
<table>
<tr>
<td>
Product
</td>
<td>
Description
</td>
<td>
Quantity
</td>
<td>
Price
</td>
<td>
Total Cost
</td>
</tr>
<?php include("pop_prodlist.php"); ?>
<tr>
<td>Totals</td>
<td></td>
<td>TotalQuantity</td>
<td></td>
<td>TotalCost</td>
</tr>
</table>
PHP
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['P_Name'] . "</td>";
echo "<td>" . $row['P_Description'] . "</td>";
echo "<td>
<input type='text' size='3' name='" . $row['P_Name'] . "_Quantity'
onChange='calcCost()'/>
</td>";
echo "<td>" . $row['P_Cost'] . "</td>";
echo "<td id='" . $row['P_Name'] . "_Cost'>0.00</td>";
echo "</tr>";
}
Javascript calcCost() function
function calcCost()
{
var theForm = document.forms['productform'];
/*
COMMENTED OUT FOR TIME BEING
var pquan = theForm.elements[productname + '_Quantity'].value;
var costperquan = '15.99';
var ptotalcost = costperquan * pquan;
*/
var divobj = document.getElementById('Basketball_Cost');
divobj.innerHTML = "helloworld";
}
The issue that I am currently having is that I cannot figure out how to place an unique argument into the javascript function calcCost from the php script echo depending on the product name decided from the mysql query.
Also, for the sake of educating myself, I am curious as to what a better solution would be/look like. I doubt that this is the most elegant solution to the problem and I would like to see some better solutions.
Jay, it seems like you understand how PHP, MySQL and JavaScript work together - that is good.
Personally, I can really reccommend using jQuery (JavaScript Library). It is widely used all over the web, very common, powerful and easy to understand and use. Although there are people that say it is not good to use a library of a language, before you know the language, jQuery helped me to understand JavaScript better because of its easy to follow syntax.
So, to use jQuery, you just need to add the source scripts in your html file. Why do I recommend jQuery? It will also allow you to use ajax (loading content, also from the database, without having the page to refresh) very easily.
jQuery will also allow you to separate your click events from your HTML. Basically you assign an id or class attribute to the HTML elements and this is your reference in your js, so no onclick="" required.
As for your HTML: it is highly recommended to not use table-layouts. In a time of HTML5 and CSS3 there are excellent replacements for tables.
If you need more help let me know in the comment, I'm glad to help...
Related
im having a really confusing problem passing param to a jquery function. i saw a lot of sloution but none work in my case. so please dont mark my post as duplicated unless my problem solved.
in my PHP code:
echo '<td onclick=" tabCaller( "customer", " id='.$row['id'].' " ) " >'.$row['id'].'</td>';
The html code should look like:
<td onclick="tabCaller("customer","id=1")"> 1 </td>
the Jquery Function:
function tabCaller(tabName, parameter = null){
// do something
}
the Problem is that my html codes looks like:
<td onclick="tabCaller("customer",="" 'id="1')">#1</td>
Mixing three different languages on the same line of code is a recipe for quoting problems. The browser is likely trying to make sense of all those double-quotes, since it uses double-quotes as start- and end-delimeters for element attributes.
Instead, use single-quotes for the JavaScript parts and just escape them in the PHP:
echo '<td onclick="tabCaller(\'customer\', \' id=' . $row['id'] . ' \')">' . $row['id'] . '</td>';
Which should produce:
<td onclick="tabCaller('customer', ' id=1')">1</td>
I am using woody snippets to insert php code to make an API call to return information in a table. How do I get the table to display using the default css from my wordpress theme?
I am new to PHP, but not to wordpress. And I know just enough CSS to get myself in trouble. So, I need ELI5 instructions.
My programmer provided the basic PHP code to call the API and return the data in a basic table. But, it looks horrid and there's no spacing or styling.
$tableStart = "<table>";
$tableEnd = "</table>";
$trStart = "<tr>";
$trEnd = "</tr>";
$tdStart = "<td >";
$tdEnd = "</td>";
$fname = 'alabama_energy_data.json';
$data = json_decode(file_get_contents($fname));
echo $tableStart;
foreach($data as $bill_data)
{
echo $trStart;
echo $tdStart . $bill_data->bill_id . $tdEnd . $tdStart . $bill_data->title . $tdEnd;
echo $trEnd;
}
echo $tableEnd;
This returns a basic table with the data I need, but it's not styled. How do I get it to use the default CSS from our wordpress site that it's displaying in so that the table renders in a format that looks decent?
If your table isn't styled like it should be, then you're probably missing and id or class attribute at your table. You could check on what current attributes your "wordpress" tables have, and just add them to your table.
Example:
<table class="wp-class-table">
# OR
<table id="wp-id-table">
And one other thing, I personally don't really like the way you "echo" your data. If you want, you can read this answer. It shows a nicer way to do it in my opinion.
I have a PHP script which returns a table of high-scores in HTML. How would I then render this in WordPress? A friend suggested using an iframe but that seems to be for images to me. Does anyone have any suggestions; I can't figure it out
the code that is created on the script is
// Start looping rows in mysql database.
while($rows=mysqli_fetch_array($result)){
echo '<tr>';
echo '<td>'.$rows['name'] . "</td><td>" . $rows['score'] . "</td>";
echo '</tr>';
// close while loop
}
with a <table> </table> tag at each end respectively
For a quick and easy jQuery solution you can throw this in a page:
<div id="highScores"></div>
<script type="text/javascript">
jQuery("#highScores").html('<object data="http://example.com/highscores.php">');
</script>
You could set this up as a page template in your theme.
I am trying to make the entire row of a table clickable. I have looked at a bunch of tutorials and they all seem pretty simple but I can't seem to get it to work. I tried DoNav and that didn't work, the simple onclick attribute doesn't work, what am I doing wrong? I am using mysql, php, and html. Thank you for your help!
echo '<table>';
echo '<tr>';
echo '<th>Name</th><th>Checked In?</th><th>ID</th>';
echo '</tr>';
while($row = $CheckedIn->fetch_assoc()){
echo '<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this,false);" onclick="document.location="www.engineering.us/gena/details.php";">';
echo '<td align="left">';
echo $row['ChildName'];
echo '</td>';
echo '<td align="center">';
;
echo $row['checkedin'];
echo '</td>';
echo '<td align="center">';
echo $row['P_Id'];
echo '</td>';
echo '</tr>';
}
echo '</table>';
onclick="document.location="www.engineering.us/gena/details.php";"
this should be
onclick="document.location='www.engineering.us/gena/details.php';"
Also another tip, you have more HTML than php, so it is better to use multiple php tags rather than echo called many times. That way it would be little easier to find such mistakes.
Edit
You should also escape the apostrophe in case you are still going with php
Picking up from what georoot said, use PHP within your HTML. It makes the markup a lot more readable and usually allows your program to add syntax highlighting, making it easier to read. I've added two additional classes ("js-table" and "table-tr") which I'll explain in a bit. Another important point is that the URL is in a new attribute on the table row: data-url.
<table class="js-table">
<thead>
<tr>
<th>Name</th>
<th>Checked In?</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<?php while ($row = $CheckedIn->fetch_assoc()): ?>
<tr class="table-tr" data-url="http://www.engineering.us/gena/details.php">
<td><?php echo $row['ChildName']; ?></td>
<td><?php echo $row['checkedin']; ?></td>
<td><?php echo $row['P_Id']; ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
The "table-tr" class allows us to target the table rows in CSS. There is no need to use JavaScript for something so simple. Even changing the colour of the text within the table cell is very easy in CSS. This technique has the other advantage that it can be easily changed without having to modify any HTML, PHP or JavaScript - it's a purely stylistic thing.
.table-tr:hover {
background-color: red;
}
Finally, since you're using jQuery, we can take advantage of that new "js-table" class. The "js-" prefix states that the class is used for binding functionality and it should not be styled. This script simply bind a click event to the table that listens out for a user clicking on a table row with the data-url attribute. When that happens, the page is re-directed (using window.location instead of document.location - it may work either way, but I've always used window.location) to that URL. This allows you to change the URL later on or change it per row without having to change any of your JavaScript.
$(function () {
$(".js-table").on("click", "tr[data-url]", function () {
window.location = $(this).data("url");
});
});
I hope that helps.
Consider using the following code:
$("#Table tr").click(function () {
$(this).addClass('selected').siblings().removeClass('selected');
var value = $(this).find('td:first').html();
window.location.href = "url";
});
Where Table is the your table name and url is the address you want to navigate to
I think you should try to do that with JQuery.
HTML
<tr class="table-tr"></tr>
JQuery
$('.table-tr').on('click', function(){
window.location = "your url here";
});
Please Change your code with this
<tr onclick="window.location.href=www.engineering.us/gena/details.php">
I am trying to create a hyperlink from two pieces of text split over two cells in a table row.
I am generating my table using PHP to echo out the results from my database to a table.
When it echo's it generates a hyperlink with GET variables at the end which allow the user to visit a page relevant to that information.
The problem is that I can't seem to generate a hyperlink that will go across those table cells, I have looked around the web and there is nothing that says I cannot do this.
As you can see from the screenshot below I am generating a hyperlink inside one table cell but I want the other table cell to have the same hyperlink.
Code
while ($row = $db->fetch_assoc($newest))
{
echo "<tr>";
echo "<td>";
echo "<a href='manager.php?method=view&id=".$row['id']."'>".$row['first_name']." ". $row['second_name']. "</td><td>".$row['company_name']."</a>";
echo "</td>";
echo "</tr>";
}
I have a feeling that I will just have to generate two separate hyperlinks for the table cells.
However I am hoping someone here can prove me wrong and save me a few lines of code.
Thanks :)
Using native hyperlinks, you will have to create separate wrappers for each cell.
However, if you want to use JS for linking and redirecting, you could do something like:
.....
<tr class="clickable" data-href="http://google.com">
<td>cell-1</td>
<td>cell-2</td>
<td>cell-3</td>
</tr>
....
and then:
$(function(){
$('tr.clickable').click(function(){
window.location.href = $(this).attr('data-href');
});
});
Simply work around it with JS:
echo "<tr onclick=\"location.href='manager.php?method=view&id=".$info.";'\">";
If you do not want to break the table structure (ie. putting the name and the company into one (multi-column) cell), there is IMHO no way other than generating two hyperlinks.
What you might want to do is to use some CSS for a hover effect and some JavaScript to register a user clicked on a cell (which you can, given the structure above, associate with the tr element).
You can not do it like this. Try instead:
while ($row = $db->fetch_assoc($newest))
{
$url = "manager.php?method=view&id=".$row['id'];
echo "<tr>";
echo "<td>" . $row['first_name']." ". $row['second_name']. "</td>";
echo "<td>" . $row['company_name'] . "</td>";
echo "</tr>";
}
while ($row = $db->fetch_assoc($newest))
{
echo "<tr>";
echo "<td>";
echo "<a href='manager.php?method=view&id=".$row['id']."'>".$row['first_name']." ". $row['second_name']."</a></td><a href='manager.php?method=view&id=".$row['id']."'>".$row['company_name']."</a><td></td>";
echo "</td>";
echo "</tr>";
}