• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 213
  • Last Modified:

need halp with getting users to add data about themselfs via php

i have a profile site for runners and im wanting to be able to have users enter ther personal bests for distances such as:
distance     time
5000m        14:05
3000m         8:32

but i would like it so users can select there times and distances from drop down menus and click a button the adds anouther set of distcnes and times for them to add. Also users will need to be able to chnage existing times but im not really shore how to do this and could do with a point in the right direction.

i have included a picture to try and help you guys out with what im looking for..

so basicly all i want is so that if a user wants to add a new pb then the click an add button and a new drop down menu and textbox apprear to add more information too...
addpb.jpg
0
runnerjp
Asked:
runnerjp
  • 6
  • 6
1 Solution
 
hieloCommented:
Refer to the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script type="text/javascript">
function addRow(tableID)
{
	// Get a reference to the table
	var tableRef = document.getElementById(tableID);
 
	// Insert a row in the table at row index 0
	var newRow   = tableRef.insertRow(tableRef.rows.length);
 
	// Insert a cell in the row at index 0
	var leftCell  = newRow.insertCell(0);
	var rightCell  = newRow.insertCell(1);
 
	// Append a text node to the cell
	leftCell.innerHTML=tableRef.rows(0).cells(0).innerHTML;
	rightCell.innerHTML=tableRef.rows(0).cells(1).innerHTML;
}
</script>
</head>
<body>
<table id="theTable"><tr><td>a</td><td>b</td></tr></table>
<div><span onclick="addRow('theTable')">+Add Row</span></div>
</body>
</html>

Open in new window

0
 
runnerjpAuthor Commented:
ok i see how this works but how would i make it so the cells are like this:


<form id="FormName" action='<?php "$_SERVER[PHP_SELF]" ?>' method="post" name="basic">
<table width="440" border="0" align="center" cellpadding="0" cellspacing="2">
<tr><td colspan="3" align="center" valign="middle"> <p align="center"> Select your event and enter your pb here!</p>
  </td>
</tr>
<tr>
  <td align="right"><?php $lines = file('runningevents.txt');
echo '<select class="inputedit" id="event" name="event">';
foreach($lines as $line) {
    echo '<option>'.$line.'</option>';
}
echo '</select>';?></td>
  <td colspan="2"><input class="inputedit" id="pb" name="pb" type="text" size="25" value="" maxlength="255" /></td>
</tr>
<tr>
  <td width="150"><div align="right">
<label for="dob"></label>
</div></td>
  <td colspan="2">&nbsp;</td>
</tr>
<tr><td width="150"><div align="right">
<label for="first_name"></label>
</div>
</td>
  <td colspan="2">&nbsp;</td>
</tr>
<tr>
  <td width="150"><div align="right">
<label for="last_name"></label>
  </div></td>
  <td colspan="2"><p>
        <label for="birthday"></label>
  </p></td>
</tr>
<tr>
  <td width="150" align="right">status</td>
  <td colspan="2"><? 
}function check_form()
{
global $HTTP_POST_VARS, $error, $print_again;
$error['error'] = false;
if (($_POST["first_name"] == "") || (!preg_match("/^[a-z0-9]+(?:_[a-z0-9]+)?$/i", $_POST["first_name"])))
{
    $error['first_name'] = true;
    $print_again = true;
    $message = "The first name field is either empty or incorrect data was input.<br>";
}
 
 if (($_POST["last_name"] == "") || (!preg_match("/^[a-z0-9]+(?:_[a-z0-9]+)?$/i", $_POST["first_name"]))) {
        $error['last_name'] = true;
         $print_again = true;
        $message="The last name field is either empty or incorrect data was input.<br>";
    }
	 
	  
     if($print_again) {
         show_form();
       
       } else {
        show_form();
          $message="<span class='style1'>Your profile has been created</span>";
		   $id =  mysql_real_escape_string( $_POST['id']);
 
$club = mysql_real_escape_string( $_POST['club']);
$first_name = mysql_real_escape_string( $_POST['first_name']);
$last_name =  mysql_real_escape_string( $_POST['last_name']);
$gender =  mysql_real_escape_string( $_POST['gender']);
 
 
 
 
 
 
 
$update = "UPDATE users SET new_user='1', club= '$club', first_name = '$first_name', gender = '$gender', last_name = '$last_name' WHERE id='$id' ";
$result = mysql_query($update);
 
// Check result
// This shows the actual query sent to MySQL, and the error. Useful for debugging.
if (!$result) {
    $er  = 'Invalid query: ' . mysql_error() . "\n";
    $er .= 'Whole query: ' . $query;
    die($er);
       }}
  echo '			<p class="error">' . $message . '</p>' . "\n";
}
if(isset($_POST["basic"])) {
    check_form();
} else {
    show_form();
}
 
 ?></td>
</tr>
<tr>
<td width="150"></td>
<td width="112"><input name="basic" type="submit" class="submit-btn" value="">
<input type="hidden" name="id" value="<?php echo $id ?>"></td>
<td width="170">&nbsp;</td>
</tr>
</table>
</form></td>
  </tr>
</table>
 
 
</td>
          <td width="24%" valign="middle" bgcolor="#FFFFFF"></td>
        </tr>
        <tr>
          <td colspan="3" valign="middle"></td>
        </tr>
 
        <tr>
            <td colspan="3"></td>
        </tr>
 
        <tr>
            <td colspan="3"></td>
        </tr>
 
        <tr>
            <td height="143" colspan="3"></td>
  </tr>
    </table>

Open in new window

0
 
hieloCommented:
>>so the cells are like this:
I don't know what "this" is. I am not seeing what you see. Provlide a url to your page OR provide the source code that the browser gets (Firefox: View > Page Source), NOT the php source code.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
runnerjpAuthor Commented:
sorry here is the page source


<table width="100%" cellpadding="0" cellspacing="0">
 
<tr>
            <td colspan="3" align="center" valign="middle">
                <div class="style10_c1">
                    <table width="100%" class="loggedin" bgcolor="#e4ebeb">
                        <tr>
                            <td>
                                <div class="c1">
                                    <div align="center"><em>
                                      <script type='text/javascript'>
var date=new Date(); // Gets the full date!
var day=date.getHours(); // Gets the hours!
 
if(day<=11) {
document.write('Good Morning,'); // If it's before 12 PM then display this!
} else if(day<18){
document.write('Good Afternoon,'); // After 12 PM display this!
} else {
document.write('Good Evening,'); // After 6 PM display this!
}
    </script>
 
                                    You are logged in as Admin.Your ip address is 81.104.225.118; this is stored for security reasons.</em>                                        </div>
                                </div>                            </td>
                        </tr>
                  </table>
                </div>            </td>
        </tr>
 
        <tr>
            <td colspan="3" valign="middle"><p align="center"></p>
         </td>
        </tr>
        <tr>
          <td valign="middle"></td>
          <td width="46%" align="center" valign="bottom"><div id="navbar2">
<ul>
 
<li id="ill"><a href="index.php?page=update"><FONT COLOR="white">Basic</FONT></a></li>
 
<li id="basic"> <a href="index.php?page=pbs">PB'S</a></li>
<li id="i1"><a href="link3.html%20"><FONT COLOR="white">button 3</FONT></a></li>
</ul>
</div></td>
          <td valign="middle">&nbsp;</td>
        </tr>
        <tr>
          <td class= width="30%" height="223" valign="middle" bgcolor="#FFFFFF"><p>&nbsp;</p>
          <p>&nbsp;</p></td>
 
          <td class= align="center" valign="top" ><table class="headermenu"  width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
 
 
 
<form id="FormName" action='' method="post" name="basic">
<table width="440" border="0" align="center" cellpadding="0" cellspacing="2">
<tr><td colspan="3" align="center" valign="middle"> <p align="center"> Select your event and enter your pb here!</p>
  </td>
 
</tr>
<tr>
  <td align="right"><select class="inputedit" id="event" name="event"><option>100m
</option><option>200m
</option><option>400m
</option><option>800m
</option><option>1500m
</option><option>3000m
</option><option>5000m
</option><option>10,000m
</option><option>5k Road
</option><option>10k Road
</option><option>H Marathon
</option><option>Marathon
</option><option>3k S/Chase
</option><option>110m Hurdles
 
</option><option>400m Hurdles
</option><option>High Jump
</option><option>Pole Vault
</option><option>Long Jump
</option><option>Triple Jump
</option><option>Shot
</option><option>Discus
</option><option>Hammer
</option><option>Javelin
</option><option>Decathlon
</option><option>10k Walk
</option><option>20k Walk
</option><option>50k Walk
</option><option>60m (I)
</option><option>60m Hurdles
</option><option>Hept(I) </option></select></td>
 
  <td colspan="2"><input class="inputedit" id="pb" name="pb" type="text" size="25" value="" maxlength="255" /></td>
</tr>
<tr>
  <td width="150"><div align="right">
<label for="dob"></label>
</div></td>
  <td colspan="2">&nbsp;</td>
</tr>
<tr><td width="150"><div align="right">
<label for="first_name"></label>
</div>
</td>
  <td colspan="2">&nbsp;</td>
 
</tr>
<tr>
  <td width="150"><div align="right">
<label for="last_name"></label>
  </div></td>
  <td colspan="2"><p>
        <label for="birthday"></label>
  </p></td>
</tr>
<tr>
  <td width="150" align="right">status</td>
 
  <td colspan="2"></td>
</tr>
<tr>
<td width="150"></td>
<td width="112"><input name="basic" type="submit" class="submit-btn" value="">
<input type="hidden" name="id" value="1"></td>
<td width="170">&nbsp;</td>
</tr>
</table>
</form></td>
  </tr>
</table>
 
 
</td>
 
          <td width="24%" valign="middle" bgcolor="#FFFFFF"></td>
        </tr>
        <tr>
          <td colspan="3" valign="middle"></td>
        </tr>
 
        <tr>
            <td colspan="3"></td>
        </tr>
 
        <tr>
            <td colspan="3"></td>
        </tr>
 
        <tr>
            <td height="143" colspan="3"></td>
  </tr>
    </table>

Open in new window

0
 
hieloCommented:

<form id="FormName" action='' method="post" name="basic">
<script type="text/javascript">
function addRow(tableID)
{
 
	// Get a reference to the table
	var tableRef = document.getElementById(tableID);
	var refNode = tableRef.rows(tableRef.rows.length-5);
 
	var newRow = tableRef.rows(1).cloneNode(true);
	tableRef.firstChild.insertBefore(newRow,refNode);
return;
 
}
</script>
<table id="theTable" width="440" border="5" align="center" cellpadding="0" cellspacing="2">
	<tr>
		<td colspan="3" align="center" valign="middle"><p align="center"> Select your event and enter your pb here!</p></td> 
	</tr>
	<tr>
		<td align="right">
			<select class="inputedit" id="event" name="event[]"><option>100m
               </option><option>200m
               </option><option>400m
               </option><option>800m
               </option><option>1500m
               </option><option>3000m
               </option><option>5000m
               </option><option>10,000m
               </option><option>5k Road
               </option><option>10k Road
               </option><option>H Marathon
               </option><option>Marathon
               </option><option>3k S/Chase
               </option><option>110m Hurdles
                
               </option><option>400m Hurdles
               </option><option>High Jump
               </option><option>Pole Vault
               </option><option>Long Jump
               </option><option>Triple Jump
               </option><option>Shot
               </option><option>Discus
               </option><option>Hammer
               </option><option>Javelin
               </option><option>Decathlon
               </option><option>10k Walk
               </option><option>20k Walk
               </option><option>50k Walk
               </option><option>60m (I)
               </option><option>60m Hurdles
               </option><option>Hept(I) </option></select>
		</td>
		<td colspan="2"><input class="inputedit" id="pb" name="pb[]" type="text" size="25" value="" maxlength="255" /></td>
	</tr>
	<tr>
		<td width="150"><div align="right"><label for="dob"></label></div></td>
		<td colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td width="150"><div align="right"><label for="first_name"></label></div></td>
		<td colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td width="150"><div align="right"><label for="last_name"></label></div></td>
		<td colspan="2"><p><label for="birthday"></label></p></td>
	</tr>
	<tr>
		<td width="150" align="right">status</td> 
		<td colspan="2"><span onclick="addRow('theTable')">+Add</span></td>
	</tr>
	<tr>
		<td width="150"></td>
		<td width="112"><input name="basic" type="submit" class="submit-btn" value="submit"><input type="hidden" name="id" value="1"></td>
		<td width="170">&nbsp;</td>
	</tr>
</table>
</form>

Open in new window

0
 
runnerjpAuthor Commented:
ermmm the outputs just the code i sent you with +ADD as the text :S

i want it so if a user wants to add anouther pb they click add and anouther drop down menu appears below the last and so does a text box so they can write there obs :)
0
 
hieloCommented:
>>ermmm the outputs just the code i sent you with +ADD as the text :S
You did something wrong. If you look closer my last post contains the javascript code that does exactly what you asked when you click the +ADD. Take a closer look at the source code I gave you.
0
 
runnerjpAuthor Commented:
I DID.. i copied the source code and im unable to click add.. its just text :S
0
 
hieloCommented:
I just copied and pasted what I copied exactly as is onto a new document and retested it with no problems
0
 
runnerjpAuthor Commented:
this is what i get http://www.runningprofiles.com/test.php   

i copied this code


<form id="FormName" action='' method="post" name="basic">
<script type="text/javascript">
function addRow(tableID)
{
 
	// Get a reference to the table
	var tableRef = document.getElementById(tableID);
	var refNode = tableRef.rows(tableRef.rows.length-5);
 
	var newRow = tableRef.rows(1).cloneNode(true);
	tableRef.firstChild.insertBefore(newRow,refNode);
return;
 
}
</script>
<table id="theTable" width="440" border="5" align="center" cellpadding="0" cellspacing="2">
	<tr>
		<td colspan="3" align="center" valign="middle"><p align="center"> Select your event and enter your pb here!</p></td> 
	</tr>
	<tr>
		<td align="right">
			<select class="inputedit" id="event" name="event[]"><option>100m
               </option><option>200m
               </option><option>400m
               </option><option>800m
               </option><option>1500m
               </option><option>3000m
               </option><option>5000m
               </option><option>10,000m
               </option><option>5k Road
               </option><option>10k Road
               </option><option>H Marathon
               </option><option>Marathon
               </option><option>3k S/Chase
               </option><option>110m Hurdles
                
               </option><option>400m Hurdles
               </option><option>High Jump
               </option><option>Pole Vault
               </option><option>Long Jump
               </option><option>Triple Jump
               </option><option>Shot
               </option><option>Discus
               </option><option>Hammer
               </option><option>Javelin
               </option><option>Decathlon
               </option><option>10k Walk
               </option><option>20k Walk
               </option><option>50k Walk
               </option><option>60m (I)
               </option><option>60m Hurdles
               </option><option>Hept(I) </option></select>
		</td>
		<td colspan="2"><input class="inputedit" id="pb" name="pb[]" type="text" size="25" value="" maxlength="255" /></td>
	</tr>
	<tr>
		<td width="150"><div align="right"><label for="dob"></label></div></td>
		<td colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td width="150"><div align="right"><label for="first_name"></label></div></td>
		<td colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td width="150"><div align="right"><label for="last_name"></label></div></td>
		<td colspan="2"><p><label for="birthday"></label></p></td>
	</tr>
	<tr>
		<td width="150" align="right">status</td> 
		<td colspan="2"><span onclick="addRow('theTable')">+Add</span></td>
	</tr>
	<tr>
		<td width="150"></td>
		<td width="112"><input name="basic" type="submit" class="submit-btn" value="submit"><input type="hidden" name="id" value="1"></td>
		<td width="170">&nbsp;</td>
	</tr>
</table>
</form>

Open in new window

0
 
hieloCommented:
From what I understood, That link works exactly as you requested on IE6. I noticed it doesn't work on FF, but this does:
function addRow(tableID)
{ 
	// Get a reference to the table
	var tableRef = document.getElementById(tableID).getElementsByTagName("TBODY")[0];
	var refNode = tableRef.rows[tableRef.rows.length-5];
	var newRow = tableRef.rows[1].cloneNode(true);
	tableRef.insertBefore(newRow,refNode);
return 1;
 
}

Open in new window

0
 
runnerjpAuthor Commented:
thanks thats great i can build upon that now too make it how i want it... thnakyou for giving me the start i needed
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

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