?
Solved

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

Posted on 2008-10-15
12
Medium Priority
?
204 Views
Last Modified: 2013-12-13
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
Comment
Question by:runnerjp
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22722899
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
 

Author Comment

by:runnerjp
ID: 22723305
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
 
LVL 82

Expert Comment

by:hielo
ID: 22723354
>>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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:runnerjp
ID: 22723417
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
 
LVL 82

Expert Comment

by:hielo
ID: 22723876

<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
 

Author Comment

by:runnerjp
ID: 22723984
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
 
LVL 82

Expert Comment

by:hielo
ID: 22724178
>>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
 

Author Comment

by:runnerjp
ID: 22724207
I DID.. i copied the source code and im unable to click add.. its just text :S
0
 
LVL 82

Expert Comment

by:hielo
ID: 22724334
I just copied and pasted what I copied exactly as is onto a new document and retested it with no problems
0
 

Author Comment

by:runnerjp
ID: 22725565
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
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 22726476
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
 

Author Closing Comment

by:runnerjp
ID: 31506642
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

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo‚Ķ
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question