Solved

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

Posted on 2008-10-15
12
188 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
  • 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
 

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

759 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now