linkedin | Kevin Dubois

When outputting data from a database using left joins you often get redundant data in your output. Say you have a table with vendor information, and a second table containing the customers for each vendor. If you want to display a table with the vendor names and their customers, you'll most likely want to use a left join.

The problem is, when you output your data you'll repeat the vendor name for each customer they have. It makes the table look cluttered and hard to read. Not to worry though, there is an easy solution!

All you have to do is create 2 classes:

.noblanktd{color:inherit; border-top:1px solid #000; border-top:1px solid #000}
.blanktd{color:white; }

and here's the php code:

function outputmystuff(){
// get your data here eg
$query = "SELECT v.id, v.name as vendorname, c.name as customername FROM vendors as v LEFT JOIN customers as c ON v.id = c.vendor_id";
$result = mysql_query($query);

$oldID = false;
while($row = mysql_fetch_assoc($result)){
$ID = $row['id'];
if($oldID == $ID){
$class = 'blanktd';
} else{
$class = "noblanktd";
}
$returnval .= <<<EOD
<tr>
<td class="{$class}">{$row['vendorname']}</td>
<td class="noblanktd">{$row['customername']}</td>
</tr>
EOD;
$oldID = $ID;

}

return $returnval;

}

and last but not least the html

<table class="repTable">
<tr>
<th>Vendor Name</th>
<th>Customer Name</th>
</tr>
<?=outputmystuff()?>
</table>

** UPDATE: This functionality is outdated. Look at a more recent post on how to add more field to a form field:
'Add More' form fields with javascript / jquery **

One of my clients needed the ability for users to refer their family and friends to the website by sending them an email. The idea was to have 5 fixed fields, and the ability to add more fields on the fly before hitting submit.

Step 1 is obviously adding the static html code (with a tiny bit of php to avoid redundancy):

<form action="mysubmitpage.php" method="post">
<div id='fields'>
<? for($i=1; $i<6; $i++){?>
<div>
name: <input type="text" name="refname<?=$i?>" />

email: <input type="text" name="refemail<?=$i?>" />

</div>
<? }?>

</div>

<div style="margin-top:5px;">
<input type="submit" value="Send Invitations" name="send" />
</div>

</form>

Step 2 involves adding an 'add more' link, which calls the javascript function that adds the field. I'm passing the number of the next field into the function, so when the time comes to submit it to the server I can distinguish the fields. I would have preferred to use IE's outerHTML but that's not supported in my preferred browser firefox, so to keep everything neat I get the existing fields and append the new field to the end of the string. I also replace the "add more" link so next time it is clicked the number 7, 8, 9 etc is passed.

<script language="javascript">
function addrefField(i){
var newfieldContent = "<div>name: <input type=\"text\" name=\"refname"+i+"\" /> email: <input type=\"text\" name=\"refemail"+i+"\" /> </div> \n";

var oldfieldContent = document.getElementById('fields').innerHTML;

el = document.getElementById('fields');
el.innerHTML = oldfieldContent + newfieldContent;

x = i + 1;
var addmoreContent = document.getElementById('addmorelink');
addmoreContent.innerHTML = '<div><a href="javascript:addrefField('+x+')">add more</a></div><input type="hidden" name="numberfields" value="'+i+'" />';

}

</script>

<div id='addmorelink'>
<a href="javascript:addrefField(6)">add more</a>
<input type="hidden" name="numberfields" value="6" />
</div>

Step 3 : The above code seems to work fine in IE, but in Firefox there is a problem: the value of the existing fields is reset to whatever the DOM originally served up to the user. So if the user had started to fill out the fields and then clicked the 'add more' link, all fields would have been emptied. With every problem comes a solution ofcourse. I googled my problem and stumbled upon this post. By adding a function (updateDOM()) on the onBlur event for each field, we can update the DOM to reflect the already inserted values. So here's the entire code for the form:

<script language="javascript">
function addrefField(i){
var newfieldContent = "<div>name: <input type=\"text\" name=\"refname"+i+"\" onBlur=\"updateDOM(this)\" /> email: <input type=\"text\" name=\"refemail"+i+"\" onBlur=\"updateDOM(this)\" /> </div> \n";

var oldfieldContent = document.getElementById('fields').innerHTML;

el = document.getElementById('fields');
el.innerHTML = oldfieldContent + newfieldContent;

x = i + 1;
var addmoreContent = document.getElementById('addmorelink');
addmoreContent.innerHTML = '<div><a href="javascript:addrefField('+x+')">add more</a></div><input type="hidden" name="numberfields" value="'+i+'" />';

}

function updateDOM(inputField) {
// if the inputField ID string has been passed in, get the inputField object
if (typeof inputField == "string") {
inputField = document.getElementById(inputField);
}

if (inputField.type == "select-one") {
for (var i=0; i<inputField.options.length; i++) {
if (i == inputField.selectedIndex) {
inputField.options[inputField.selectedIndex].setAttribute("selected","selected");
}
}
} else if (inputField.type == "text") {
inputField.setAttribute("value",inputField.value);
} else if (inputField.type == "textarea") {
inputField.setAttribute("value",inputField.value);
} else if ((inputField.type == "checkbox") || (inputField.type == "radio")) {
if (inputField.checked) {
inputField.setAttribute("checked","checked");
} else {
inputField.removeAttribute("checked");
}
}
}

</script>

<form action="index.php" method="post">
<div id='fields'>
<? for($i=1; $i<6; $i++){?>
<div>
name: <input type="text" name="refname<?=$i?>" onBlur="updateDOM(this)" /> email:
<input type="text" name="refemail<?=$i?>" onBlur="updateDOM(this)" /> </div>
<? }?>

</div>
<div id='addmorelink'>
<a href="javascript:addrefField(6)">add more</a>
<input type="hidden" name="numberfields" value="6" />
</div>
<div style="margin-top:5px;"> <input type="submit" value="Send Invitations" name="send" /> </div>

</form>

Step 4 : All that's left is processing the fields on the next page:

<?php

$loops = $_POST['numberfields'];
for($i=1;$i<=$loops;$i++){

$namepost = "refname" . $i;
$name = $_POST[$namepost];
$emailpost = "refemail" . $i;
$email = $_POST[$emailpost];
if($name && $email){
echo $name .' ' .$email;
echo '<br />';
}

}

?>

Kevin Dubois

Principal Developer Advocate at Red Hat. Content and opinions are my own.

Tag Archives: linkedin

Adding additional text fields with Javascript