Jump to content

Archived

This topic is now archived and is closed to further replies.

GamerGun

[SOLVED] Insert form to DB (Multiple rows, array)

Recommended Posts

Well i just said that in my opinion it will be better to, indeed, split up the "uren" table in the DB.

 

So if we go back to this image: http://www.uploader.gamergun.com/files/1/redgreen.PNG

 

Then both the red and the green form will get a separate table in the database.

 

That way it is easier to manage the data from both forms. (Easier and neater).

 

I just used the "record overview" as another reason on why it would be better, because now the data from both forms are shown together which doesn't look very clear.

Share this post


Link to post
Share on other sites

if you intend to get overid from table queries along with everything else (meaning using the same sql and at the same time, to use for the same purposes) it may make your life easier in the future to make this table work now.

 

if overid really should be separate (at the data association level - basically, does it have anything at all to do with the rest of the table, or were you being lazy using an existing table  ;) ), then we'll separate the forms.

 

either way, we could probably keep the layout and create a workaround in code if you:

-don't want more than 1 submit button

-want both forms on the same page

-want the ability to submit them at the same time

Share this post


Link to post
Share on other sites

if you intend to get overid from table queries along with everything else (meaning using the same sql and at the same time, to use for the same purposes) it may make your life easier in the future to make this table work now.

 

Thats how it is like now right?

 

if overid really should be separate (at the data association level - basically, does it have anything at all to do with the rest of the table, or were you being lazy using an existing table  ;) ), then we'll separate the forms.

 

No no, i'm just brain storming, it's not that i MUST be separated :). I was just testing and thinking about the other form on how to do that the best way.

 

either way, we could probably keep the layout and create a workaround in code if you:

-don't want more than 1 submit button

-want both forms on the same page

-want the ability to submit them at the same time

 

Well i hope that it is clear what i am trying to do. The first form is to submit work hours from calls, the second form to submit work hours on other things you did. (Project, Management, Administration). It's no problem at all when it's in the same table and uses the same code, but it should work of course, so just requires a bit more trying and tweaking i guess to make it perfectly.

 

Thanks for all!

Share this post


Link to post
Share on other sites

how about this idea:

 

combine the 2 tables and add 1 more column which would be a drip list with 2 oprions: calls, other. this column would not get used in insert.php at all. the purpose of this would be to enable javascript control:

 

your table starts out:

type of hours - enabled (in the html)

overige - disabled (in the html)

genelateerd - disabled (in the html)

afdeling - disabled (in the html)

call nummer - disabled (in the html)

Tijd(hr) - enabled (in the html)

Tijd(min) - enabled (in the html)

omschrijving - enabled (in the html)

 

then the user chooses 1 option from the "type" list. the list has an onChange trigger, which will:

if option set to calls - set genelateerd, afdeling, call nummer to enabled

if option set to other - set overige to enabled

 

set all of them to a default 0, so that you can easily recognize which were disabled in the uren table.

 

i realize this is clumsy and that users will need 22" monitors 2 view the whole table at once  :P, but this is the best i can think up right now without messing with the insert.php.

 

if you'd rather mess with insert.php, let me know.

in the meantime, i will try to think up something better.

Share this post


Link to post
Share on other sites

Well, your idea sounds good. Didn't know that something like that could work :)

 

I can't think of anything else for now, so perhaps we should to this.

 

Thanks!

 

Share this post


Link to post
Share on other sites

nothing's impossible.  ;)

like my grandpa used to say: "whatever's possible we do immediately. the impossible might take us 5 minutes". lol. but he was in the airborne infantry... :P

Share this post


Link to post
Share on other sites

Lol, oke :D

 

So shall we do this (if you have some spare time) or what else?

 

Greetings

Share this post


Link to post
Share on other sites

here's a basic field enable/disable based on the value of a select. it's triggered by onChange. look over it, and apply to your table. let me know if something goes wrong:

<script type="text/javascript">
function show(){
var theContents = document.getElementById('menu')[document.getElementById('menu').selectedIndex].value;
//document.body.innerHTML = theContents;
if (theContents == '1'){
	document.getElementById('1').disabled = false;
	document.getElementById('2').disabled = true;
}
else if(theContents == '2'){
	document.getElementById('2').disabled = false;
	document.getElementById('1').disabled = true;
}
else{
	document.getElementById('2').disabled = true;
	document.getElementById('1').disabled = true;	
}
}
</script>

<select name="menu" id="menu" onChange="show()">
<option value="0">...</option>
<option value="1">label 1</option>
<option value="2">label 2</option>
</select>
<br />
<input type="text" name="something" id="1" value="0" disabled />
<br />
<input type="text" name="bla" id="2" value="0" disabled />

 

this is sooooooooooo not php.....  whoops :P

 

Edit to get this post php-related  ;D :

since javascript resides on the client side and is easily modified, you should verify that only 1 type of hours was submitted by adding into the for() loop something like:

if (($overige != 0) && (($afdeling != 0) || ($callnr != 0))){
    //throw an error and tell off the user. your javascript has been hacked.
}

Share this post


Link to post
Share on other sites

But uhm i don't get it... this way it's the one or the other table? Or how do i implement this?

Share this post


Link to post
Share on other sites

this is an example of what i meant. it'll be easier for you to test it than to read through the code:

<script type="text/javascript">
function fieldEnable(){
var theContents = document.getElementById('type')[document.getElementById('type').selectedIndex].value;
//document.body.innerHTML = theContents;
if (theContents == '1'){
	document.getElementById('specificate').disabled = false;
	document.getElementById('afdeling').disabled = false;
	document.getElementById('callnr').disabled = false;
	document.getElementById('overige').disabled = true;
}
else if(theContents == '2'){
	document.getElementById('specificate').disabled = true;
	document.getElementById('afdeling').disabled = true;
	document.getElementById('callnr').disabled = true;
	document.getElementById('overige').disabled = false;
}
else{
	document.getElementById('specificate').disabled = true;
	document.getElementById('afdeling').disabled = true;
	document.getElementById('callnr').disabled = true;
	document.getElementById('overige').disabled = true;	
}
}
</script>

<table border=\"1\" bordercolor=\"#FFCC00\" style=\"background-color:#FFFFCC\" width=\"100%\" cellpadding=\"3\" cellspacing=\"3\">
<tr>
	<td>Type</td>
	<td>Gerelateerd</td>
	<td>Afdeling</td>
	<td>Call nummer</td>
	<td>Overige</td>
	<td>Tijd (hr)</td>
	<td>Tijd (min)</td>
	<td>Omschrijving</td>
</tr>
<tr>
	<td><select id="type" onChange="fieldEnable()">
		<option value="0">...</option>
		<option value="1">Call</option>
		<option value="2">Other</option>
	</select></td>
	<td><select id='specificate' name='specificatie[]' disabled>
			<option value="0">...</option>
			<option value="1">something</option>
			<option value="2">goes</option>
			<option value="3">here</option>
		</select></td>
	<td><select id='afdeling' name='afdeling[]' disabled>
		<option value="0">...</option>
		<option value="1">departments</option>
		<option value="2">go</option>
		<option value="3">here?</option>
	</select></td>
	<td><input type="text" size="9" maxlength="5" onkeypress="return isNumberKey(event)" id='callnr' name="callnr[]" disabled /></td>
	<td><select id='overige' name='overige[]' disabled>
		<option value="0">...</option>
		<option value="1">what</option>
		<option value="2">is</option>
		<option value="2">Beheer?</option>
	</select></td>
	<td><select name="uren[]">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
	</select></td>
	<td><select name="minuten[]">
		<option value="00">00</option>
		<option value="15">15</option>
		<option value="30">30</option>
		<option value="45">45</option>
	</select></td>
	<td><input type="text" size="105" name="omschrijving[]"/></td>
</tr>

Share this post


Link to post
Share on other sites

Beheer = Management :D

 

But this looks great! I'm gonna play with it now, will let you know what the result is.

 

Edit; but am i still able to use the includes?

 

      <td><select id='afdeling' name='afdeling[]' disabled>
         <option value="0">...</option>
         <option value="1"> <?php include("afd.php"); ?> </option>
         <option value="2">go</option>
         <option value="3">here?</option>
      </select></td>

 

Doesn't work of course, but how then?

 

Thanks :)

Share this post


Link to post
Share on other sites

this is an example using spec.php:

<?php
$query2 = mysql_query(
"SELECT `specid`,
`specificatie`
FROM `specificatie`
ORDER BY `specificatie` ASC"
) or die (mysql_error());

echo "<select name='specificatie[]' disabled>\n"; //added the 'disabled' keyword here
while ($data = mysql_fetch_assoc($query2))
{
echo "<option value='".$data['specid']."'>".$data['specificatie']."</option>\n";
}
echo "</select>\n";
?>

 

then include it:

<td width=\"6%\">";include("spec.php");echo "</td>

 

and it should work. notice the change i made in spec.php.

Share this post


Link to post
Share on other sites

<table border=\"1\" bordercolor=\"#FFCC00\" style=\"background-color:#FFFFCC\" width=\"100%\" cellpadding=\"3\" cellspacing=\"3\">
   <tr>
      <td>Type</td>
      <td>Gerelateerd</td>
      <td>Afdeling</td>
      <td>Call nummer</td>
      <td>Overige</td>
      <td>Tijd (hr)</td>
      <td>Tijd (min)</td>
      <td>Omschrijving</td>
   </tr>
   <tr>
      <td><select id="type" onChange="fieldEnable()">
         <option value="0">...</option>
         <option value="1">Call</option>
         <option value="2">Other</option>
      </select></td>
<td width=\"6%\"><?php include("spec.php"); ?></td>
<td width=\"6%\"><?php include("afd.php"); ?></td>
      <td><input type="text" size="9" maxlength="5" onkeypress="return isNumberKey(event)" id='callnr' name="callnr[]" disabled /></td>
      <td><select id='overige' name='overige[]' disabled>
         <option value="0">...</option>
         <option value="1">what</option>
         <option value="2">is</option>
         <option value="2">Beheer?</option>
      </select></td>
      <td><select name="uren[]">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
      </select></td>
      <td><select name="minuten[]">
         <option value="00">00</option>
         <option value="15">15</option>
         <option value="30">30</option>
         <option value="45">45</option>
      </select></td>
      <td><input type="text" size="105" name="omschrijving[]"/></td>
   </tr>
</table>

 

java.PNG

 

Share this post


Link to post
Share on other sites

I edited my post, lol, but with the following result:

 

disabled.PNG

 

No matter if ..., "Call" or "Other" is chosen.

 

Share this post


Link to post
Share on other sites

i assume the javascript is intact and in place...? (sorry, can't be too careful).

 

i'll try to figure it out. i have to go for a bit, but i'll be back later.

Share this post


Link to post
Share on other sites

Yup. I found it; no id= at the fields :)

 

Works now :)

Share this post


Link to post
Share on other sites

I only can't get it to work how to do this with multiple records:

 

<html><head>
<title>Urenregistratie CVIS</title>

    <link rel="stylesheet" href="zpcal/themes/winter.css" />
    <link rel="stylesheet" href="style.css" />

    <script type="text/javascript" src="zpcal/utils/zapatec.js"></script>
    <script type="text/javascript" src="zpcal/src/calendar.js"></script>
    <script type="text/javascript" src="zpcal/lang/calendar-du.js"></script>

   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>

<script type="text/javascript">
function fieldEnable(){
   var theContents = document.getElementById('type')[document.getElementById('type').selectedIndex].value;
   //document.body.innerHTML = theContents;
   if (theContents == '1'){
      document.getElementById('specificate').disabled = false;
      document.getElementById('afdeling').disabled = false;
      document.getElementById('callnr').disabled = false;
      document.getElementById('overige').disabled = true;
   }
   else if(theContents == '2'){
      document.getElementById('specificate').disabled = true;
      document.getElementById('afdeling').disabled = true;
      document.getElementById('callnr').disabled = true;
      document.getElementById('overige').disabled = false;
   }
   else{
      document.getElementById('specificate').disabled = true;
      document.getElementById('afdeling').disabled = true;
      document.getElementById('callnr').disabled = true;
      document.getElementById('overige').disabled = true;   
   }
}
</script>

</head>
<body>

<?php

$connect = mysql_connect("localhost","root","********") or
die ("Could not connect to database.");

mysql_select_db("urendatabase");
?>

<div class="RedLink">

<?php

$connect = mysql_connect("localhost","root","password") or
die ("Could not connect to database.");

mysql_select_db("urendatabase");

$query1 = mysql_query(
"SELECT `userid`,
`voornaam`,
`achternaam`
FROM `werknemers`
ORDER BY `userid` ASC"
) or die (mysql_error());

echo "<img src=\"http://www.cvis.nl/templates/bediajoomlatemplate/images/logo.png\">\n<br><br>";

echo "<form name='form1' method='post' action='insert.php'>\n";

$htmlToEcho = <<<EOT
    Datum:   <input type="text" id="calendar" name="calendar" size="30" />
    <button id="trigger">...</button>
    <script type="text/javascript">//<![CDATA[
      Zapatec.Calendar.setup({
        firstDay          : 1,
        electric          : false,
        inputField        : "calendar",
        button            : "trigger",
        ifFormat          : "%d %B %Y (Week %W)",
        daFormat          : "%Y/%m/%d"
      });
    //]]></script>
<noscript>
<br/>
Your browser does not support Javascript.
<br/>
Either enable Javascript in your Browser or upgrade to a newer version.
</noscript>
EOT;

echo $htmlToEcho;

$urendropdown = <<<EOT
<select name="uren[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
EOT;

$minutendropdown = <<<EOT
<select name="minuten[]">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
EOT;

echo "<br><br>";

echo "Naam:    <select name='werknemer'>\n";

while ($data = mysql_fetch_assoc($query1))
{
echo "<option value='".$data['userid']."'>".$data['voornaam']." ".$data['achternaam']."</option>\n";
}
echo "</select> <br><br>\n";

echo "<table border=\"1\" bordercolor=\"#FFCC00\" style=\"background-color:#FFFFCC\" width=\"100%\" cellpadding=\"3\" cellspacing=\"3\">
   <tr>
      <td>Type</td>
      <td>Gerelateerd</td>
      <td>Afdeling</td>
      <td>Call nummer</td>
      <td>Overige</td>
      <td>Tijd (hr)</td>
      <td>Tijd (min)</td>
      <td>Omschrijving</td>
   </tr>
   <tr>
      <td width=\"6%\"><select id=\"type\" onChange=\"fieldEnable()\">
         <option value=\"0\">...</option>
         <option value=\"1\">Call</option>
         <option value=\"2\">Other</option>
      </select></td>
<td width=\"6%\">";include("spec.php");echo "</td>
<td width=\"6%\">";include("afd.php");echo "</td>
      <td><input type=\"text\" size=\"9\" maxlength=\"5\" onkeypress=\"return isNumberKey(event)\" id=\"callnr\" name=\"callnr[]\" disabled /></td>
<td width=\"6%\">";include("over.php");echo "</td>
<td width=\"7%\">";echo $urendropdown;echo "</td>
<td width=\"8%\">";echo $minutendropdown;echo "</td>
      <td><input type=\"text\" size=\"69\" name=\"omschrijving[]\" /></td>
   </tr>
   <tr>
      <td width=\"6%\"><select id=\"type\" onChange=\"fieldEnable()\">
         <option value=\"0\">...</option>
         <option value=\"1\">Call</option>
         <option value=\"2\">Other</option>
      </select></td>
<td width=\"6%\">";include("spec.php");echo "</td>
<td width=\"6%\">";include("afd.php");echo "</td>
      <td><input type=\"text\" size=\"9\" maxlength=\"5\" onkeypress=\"return isNumberKey(event)\" id=\"callnr\" name=\"callnr[]\" disabled /></td>
<td width=\"6%\">";include("over.php");echo "</td>
<td width=\"7%\">";echo $urendropdown;echo "</td>
<td width=\"8%\">";echo $minutendropdown;echo "</td>
      <td><input type=\"text\" size=\"69\" name=\"omschrijving[]\" /></td>
   </tr>
   <tr>
      <td width=\"6%\"><select id=\"type\" onChange=\"fieldEnable()\">
         <option value=\"0\">...</option>
         <option value=\"1\">Call</option>
         <option value=\"2\">Other</option>
      </select></td>
<td width=\"6%\">";include("spec.php");echo "</td>
<td width=\"6%\">";include("afd.php");echo "</td>
      <td><input type=\"text\" size=\"9\" maxlength=\"5\" onkeypress=\"return isNumberKey(event)\" id=\"callnr\" name=\"callnr[]\" disabled /></td>
<td width=\"6%\">";include("over.php");echo "</td>
<td width=\"7%\">";echo $urendropdown;echo "</td>
<td width=\"8%\">";echo $minutendropdown;echo "</td>
      <td><input type=\"text\" size=\"69\" name=\"omschrijving[]\" /></td>
   </tr>
   <tr>
      <td width=\"6%\"><select id=\"type\" onChange=\"fieldEnable()\">
         <option value=\"0\">...</option>
         <option value=\"1\">Call</option>
         <option value=\"2\">Other</option>
      </select></td>
<td width=\"6%\">";include("spec.php");echo "</td>
<td width=\"6%\">";include("afd.php");echo "</td>
      <td><input type=\"text\" size=\"9\" maxlength=\"5\" onkeypress=\"return isNumberKey(event)\" id=\"callnr\" name=\"callnr[]\" disabled /></td>
<td width=\"6%\">";include("over.php");echo "</td>
<td width=\"7%\">";echo $urendropdown;echo "</td>
<td width=\"8%\">";echo $minutendropdown;echo "</td>
      <td><input type=\"text\" size=\"69\" name=\"omschrijving[]\" /></td>
   </tr>
   <tr>
      <td width=\"6%\"><select id=\"type\" onChange=\"fieldEnable()\">
         <option value=\"0\">...</option>
         <option value=\"1\">Call</option>
         <option value=\"2\">Other</option>
      </select></td>
<td width=\"6%\">";include("spec.php");echo "</td>
<td width=\"6%\">";include("afd.php");echo "</td>
      <td><input type=\"text\" size=\"9\" maxlength=\"5\" onkeypress=\"return isNumberKey(event)\" id=\"callnr\" name=\"callnr[]\" disabled /></td>
<td width=\"6%\">";include("over.php");echo "</td>
<td width=\"7%\">";echo $urendropdown;echo "</td>
<td width=\"8%\">";echo $minutendropdown;echo "</td>
      <td><input type=\"text\" size=\"69\" name=\"omschrijving[]\" /></td>
   </tr>
</table>";

echo "<br>";

echo "<input type='submit' name='submit' value='Verstuur' onClick=\"return confirm('Weet je zeker dat alle velden volledig ingevuld zijn?');\">\n";

echo "</form>\n";

echo "<a href=\"afdelingen/index.php\">Afdeling toevoegen</a> - <a href=\"medewerkers/index.php\">Medewerker toevoegen</a>";

?>

<br><br><hr><small><a href="http://www.zapatec.com/website/main/products/prod1/">Zapatec Javascript Calendar</a></small><br>

</div>

</body></html>

 

Problem is that only the first one works. Thanks

Share this post


Link to post
Share on other sites

damn, i forgot you had to have many rows :/...

 

it happens because they all have the same id... i'll try to figure out a way to serialize the id's for each row.

 

mean time, you change the whole if block in the javascript to this (i forgot to put it in before):

if (theContents == '1'){
	document.getElementById('specificate').disabled = false;
	document.getElementById('afdeling').disabled = false;
	document.getElementById('callnr').disabled = false;
	document.getElementById('overige').disabled = true;

	document.getElementById('overige').selectedIndex = 0;
}
else if(theContents == '2'){
	document.getElementById('specificate').disabled = true;
	document.getElementById('afdeling').disabled = true;
	document.getElementById('callnr').disabled = true;
	document.getElementById('overige').disabled = false;

	document.getElementById('specificate').selectedIndex = 0;
	document.getElementById('afdeling').selectedIndex = 0;
	document.getElementById('callnr').value = "";
}
else{
	document.getElementById('specificate').disabled = true;
	document.getElementById('afdeling').disabled = true;
	document.getElementById('callnr').disabled = true;
	document.getElementById('overige').disabled = true;

	document.getElementById('specificate').selectedIndex = 0;
	document.getElementById('afdeling').selectedIndex = 0;
	document.getElementById('callnr').value = "";
	document.getElementById('overige').selectedIndex = 0;
}

 

this resets the values of these fields if the "type" list is set to "..." again after changes have been made to the form. this will prevent users from submitting type="0" with data. also, if changes are made in "call"/"other" mode, and then the mode is changed, the fields that should be empty are reset so users can't accidentally submit, for example, $overige and $afdeling in the same row.

 

and change the valid-input check in insert.php to this:

if (empty($omschrijving) || ($overige == 0 && ($specificatie == 0 || $afdeling == 0 || $callnr == 0))){
++$checkEmpty; //count each empty row
continue;
}

 

this will make sure all required data was submitted, and also makes sure that the user didn't submit both "other" hours and "call" hours by mistake.

Share this post


Link to post
Share on other sites

ok, i think i have it... this is gonna be long...:

 

change all your included .php file (e.g. spec.php) to remove the <select></select> tags from them. we'll be moving those to the main form page. so they should all look like this:

<?php
$query2 = mysql_query(
"SELECT `specid`,
`specificatie`
FROM `specificatie`
ORDER BY `specificatie` ASC"
) or die (mysql_error());

while ($data = mysql_fetch_assoc($query2))
{
echo "<option value='".$data['specid']."'>".$data['specificatie']."</option>\n";
}
?>

 

then put a define() somewhere near the mysql_connect() in the main form code:

<?php 
define('NUM_ROWS', 5);
?>

 

now instead of hardcoding 5 rows of the table, use this to create the table:

<?php
echo "<table border=\"1\" bordercolor=\"#FFCC00\" style=\"background-color:#FFFFCC\" width=\"100%\" cellpadding=\"3\" cellspacing=\"3\">
   <tr>
      <td>Type</td>
      <td>Gerelateerd</td>
      <td>Afdeling</td>
      <td>Call nummer</td>
      <td>Overige</td>
      <td>Tijd (hr)</td>
      <td>Tijd (min)</td>
      <td>Omschrijving</td>
   </tr>";
for ($i = 1; $i <= NUM_ROWS; ++$i){
echo "<tr>
      <td width=\"6%\"><select id=\"type".$i."\" onChange=\"fieldEnable(".$i.")\">
         <option value=\"0\">...</option>
         <option value=\"1\">Call</option>
         <option value=\"2\">Other</option>
      </select></td>
<td width=\"6%\"><select id=\"specificate".$i."\" name=\"specificate[]\" disabled>";include("spec.php");echo "</select></td>
<td width=\"6%\"><select id=\"afdeling".$i."\" name=\"afdeling[]\" disabled>";include("afd.php");echo "</select></td>
      <td><input type=\"text\" size=\"9\" maxlength=\"5\" onkeypress=\"return isNumberKey(event)\" id=\"callnr".$i."\" name=\"callnr[]\" disabled /></td>
<td width=\"6%\"><select id=\"overdige".$i."\" name=\"overdige[]\" disabled>";include("over.php");echo "</select></td>
<td width=\"7%\">";echo $urendropdown;echo "</td>
<td width=\"8%\">";echo $minutendropdown;echo "</td>
      <td><input type=\"text\" size=\"69\" name=\"omschrijving[]\" /></td>
   </tr>";
}
echo "</table>";
?>

 

and now, to get the javascript to know which line we're on:

<script type="text/javascript">
function fieldEnable(rowNum){
   var theContents = document.getElementById('type' + rowNum)[document.getElementById('type' + rowNum).selectedIndex].value;
   //document.body.innerHTML = theContents;
if (theContents == '1'){
	document.getElementById('specificate' + rowNum).disabled = false;
	document.getElementById('afdeling' + rowNum).disabled = false;
	document.getElementById('callnr' + rowNum).disabled = false;
	document.getElementById('overige' + rowNum).disabled = true;

	document.getElementById('overige' + rowNum).selectedIndex = 0;
}
else if(theContents == '2'){
	document.getElementById('specificate' + rowNum).disabled = true;
	document.getElementById('afdeling' + rowNum).disabled = true;
	document.getElementById('callnr' + rowNum).disabled = true;
	document.getElementById('overige' + rowNum).disabled = false;

	document.getElementById('specificate' + rowNum).selectedIndex = 0;
	document.getElementById('afdeling' + rowNum).selectedIndex = 0;
	document.getElementById('callnr' + rowNum).value = "";
}
else{
	document.getElementById('specificate' + rowNum).disabled = true;
	document.getElementById('afdeling' + rowNum).disabled = true;
	document.getElementById('callnr' + rowNum).disabled = true;
	document.getElementById('overige' + rowNum).disabled = true;

	document.getElementById('specificate' + rowNum).selectedIndex = 0;
	document.getElementById('afdeling' + rowNum).selectedIndex = 0;
	document.getElementById('callnr' + rowNum).value = "";
	document.getElementById('overige' + rowNum).selectedIndex = 0;
}
}
</script>

 

:o

 

now i'll explain everything i did:

 

the problem was that all the id's were identical. so, in order to serialize the id's on each row, i moved the declaration of the id's (<select></select>) into a loop with an iterator ($i). this should not affect your code, because the <select></select> were not receiving information from the db in the included files, so it was safe to move them.

 

the define() sets the amount of rows you want to create(added bonus: easily change the amount of rows in the form in the future). on each line, i appended the current value of $i to the id of each field, and passed $i to the fieldEnable() function, so the function would know what line we're on.

 

last - i changed the function to take the row number into account.

 

the uren lists and the omjch.... whatever that field is called :P aren't affected, because we don't need them to have id's

 

please check this and let me know if it works.

 

sorry you have to do some much recoding to get this functional. this is the best i can manage.

Share this post


Link to post
Share on other sites
sorry you have to do some much recoding to get this functional. this is the best i can manage.

 

No problem at all! Changed some Dutch words in order to get the form working but it does now. Only the insert is not correct:

 

De volgende werkzaamheden zijn toegevoegd: - The following records are added:

'2', '3', '3', '1', '6', '00', 'test1', '32423', '2008-10-01', '40'
'2', '3', '2', '1', '6', '15', 'test2', '42323', '2008-10-01', '40'
'2', '', '1', '', '5', '30', 'test3', '', '2008-10-01', '40'

 

With this form:

 

test4and5.png

 

You see i'm missing test4 and test5?

 

For the rest, good work mate! Thanks again for all the effort. My code at the moment:

 

index.php

<html><head>
<title>Urenregistratie CVIS</title>

    <link rel="stylesheet" href="zpcal/themes/winter.css" />
    <link rel="stylesheet" href="style.css" />

    <script type="text/javascript" src="zpcal/utils/zapatec.js"></script>
    <script type="text/javascript" src="zpcal/src/calendar.js"></script>
    <script type="text/javascript" src="zpcal/lang/calendar-du.js"></script>

   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>

<script type="text/javascript">
function fieldEnable(rowNum){
   var theContents = document.getElementById('type' + rowNum)[document.getElementById('type' + rowNum).selectedIndex].value;
   //document.body.innerHTML = theContents;
   if (theContents == '1'){
      document.getElementById('specificatie' + rowNum).disabled = false;
      document.getElementById('afdeling' + rowNum).disabled = false;
      document.getElementById('callnr' + rowNum).disabled = false;
      document.getElementById('overige' + rowNum).disabled = true;

      document.getElementById('overige' + rowNum).selectedIndex = 0;
   }
   else if(theContents == '2'){
      document.getElementById('specificatie' + rowNum).disabled = true;
      document.getElementById('afdeling' + rowNum).disabled = true;
      document.getElementById('callnr' + rowNum).disabled = true;
      document.getElementById('overige' + rowNum).disabled = false;

      document.getElementById('specificatie' + rowNum).selectedIndex = 0;
      document.getElementById('afdeling' + rowNum).selectedIndex = 0;
      document.getElementById('callnr' + rowNum).value = "";
   }
   else{
      document.getElementById('specificatie' + rowNum).disabled = true;
      document.getElementById('afdeling' + rowNum).disabled = true;
      document.getElementById('callnr' + rowNum).disabled = true;
      document.getElementById('overige' + rowNum).disabled = true;

      document.getElementById('specificatie' + rowNum).selectedIndex = 0;
      document.getElementById('afdeling' + rowNum).selectedIndex = 0;
      document.getElementById('callnr' + rowNum).value = "";
      document.getElementById('overige' + rowNum).selectedIndex = 0;
   }
}
</script>

</head>
<body>

<div class="RedLink">

<?php

$connect = mysql_connect("localhost","root","password") or
die ("Could not connect to database.");

define('NUM_ROWS', 5);

mysql_select_db("urendatabase");

$query1 = mysql_query(
"SELECT `userid`,
`voornaam`,
`achternaam`
FROM `werknemers`
ORDER BY `userid` ASC"
) or die (mysql_error());

echo "<img src=\"http://www.cvis.nl/templates/bediajoomlatemplate/images/logo.png\">\n<br><br>";

echo "<form name='form1' method='post' action='insert.php'>\n";

$htmlToEcho = <<<EOT
    Datum:   <input type="text" id="calendar" name="calendar" size="30" />
    <button id="trigger">...</button>
    <script type="text/javascript">//<![CDATA[
      Zapatec.Calendar.setup({
        firstDay          : 1,
        electric          : false,
        inputField        : "calendar",
        button            : "trigger",
        ifFormat          : "%d %B %Y (Week %W)",
        daFormat          : "%Y/%m/%d"
      });
    //]]></script>
<noscript>
<br/>
Your browser does not support Javascript.
<br/>
Either enable Javascript in your Browser or upgrade to a newer version.
</noscript>
EOT;

echo $htmlToEcho;

$urendropdown = <<<EOT
<select name="uren[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
EOT;

$minutendropdown = <<<EOT
<select name="minuten[]">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
EOT;

echo "<br><br>";

echo "Naam:    <select name='werknemer'>\n";

while ($data = mysql_fetch_assoc($query1))
{
echo "<option value='".$data['userid']."'>".$data['voornaam']." ".$data['achternaam']."</option>\n";
}
echo "</select> <br><br>\n";

echo "<table border=\"1\" bordercolor=\"#FFCC00\" style=\"background-color:#FFFFCC\" width=\"100%\" cellpadding=\"3\" cellspacing=\"3\">
   <tr>
      <td>Type</td>
      <td>Gerelateerd</td>
      <td>Afdeling</td>
      <td>Call nummer</td>
      <td>Overige</td>
      <td>Tijd (hr)</td>
      <td>Tijd (min)</td>
      <td>Omschrijving</td>
   </tr>";
for ($i = 1; $i <= NUM_ROWS; ++$i){
   echo "<tr>
      <td width=\"6%\"><select id=\"type".$i."\" onChange=\"fieldEnable(".$i.")\">
         <option value=\"0\">...</option>
         <option value=\"1\">Call</option>
         <option value=\"2\">Other</option>
      </select></td>
   <td width=\"6%\"><select id=\"specificatie".$i."\" name=\"specificatie[]\" disabled>";include("spec.php");echo "</select></td>
   <td width=\"6%\"><select id=\"afdeling".$i."\" name=\"afdeling[]\" disabled>";include("afd.php");echo "</select></td>
      <td><input type=\"text\" size=\"9\" maxlength=\"5\" onkeypress=\"return isNumberKey(event)\" id=\"callnr".$i."\" name=\"callnr[]\" disabled /></td>
   <td width=\"6%\"><select id=\"overige".$i."\" name=\"overige[]\" disabled>";include("over.php");echo "</select></td>
   <td width=\"7%\">";echo $urendropdown;echo "</td>
   <td width=\"8%\">";echo $minutendropdown;echo "</td>
      <td><input type=\"text\" size=\"69\" name=\"omschrijving[]\" /></td>
   </tr>";
}
echo "</table>";

echo "<br>";

echo "<input type='submit' name='submit' value='Verstuur' onClick=\"return confirm('Weet je zeker dat alle velden volledig ingevuld zijn?');\">\n";

echo "</form>\n";

echo "<a href=\"afdelingen/index.php\">Afdeling toevoegen</a> - <a href=\"medewerkers/index.php\">Medewerker toevoegen</a>";

?>

<br><br><hr><small><a href="http://www.zapatec.com/website/main/products/prod1/">Zapatec Javascript Calendar</a></small><br>

</div>

</body></html>

 

insert.php

<html><head><title>Urenregistratie CVIS</title></head>
<body>

<?php

$con = mysql_connect("localhost","root","password");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("urendatabase", $con);

//names of the month in dutch
$months = array ("Januari", "Februari", "Maart", "April", "Mei", "Juni",
                "Juli", "Augustus", "September", "Oktober", "November", "December");

$tmpDate = explode("(", $_POST['calendar']); //get date from form and explode into array

$week = array_pop($tmpDate); //pop the week off the end of the date array
$week = str_replace(array("Week ", ")"), "", $week);//get rid of the ) at the end of the week string

$date = explode(" ", trim($tmpDate[0])); //explode the date into an array(day_num, month_str, year_num)

$monthNum = 0; //this will hold the month number for the final date

//check find the month name in the $months array and set the month number to $monthNum
foreach($months as $key=>$month ){
   if (strcasecmp($date[1], $month) == 0){
      $monthNum = $key + 1;
      break;
   }
}

$date[1] = (($monthNum < 10)?"0":"").$monthNum; //set month number to $dat[1] in the proper format

$date = array_reverse($date); //change date order from dd-mm-yyyy to yyyy-mm-dd for database

$dateStr = implode("-", $date); //final date in a DB friendly format

$werknemer = mysql_real_escape_string($_POST['werknemer']);
$checkEmpty = 0; //counter to keep track of the amount of empty rows submitted.
$success = array(); //keep records that were successfully inserted into DB for success msg.

for ($i = 0; $i < 10; ++$i){

$afdeling = mysql_real_escape_string($_POST['afdeling'][$i]);
$overige = mysql_real_escape_string($_POST['overige'][$i]);
$uren = mysql_real_escape_string($_POST['uren'][$i]);
$minuten = mysql_real_escape_string($_POST['minuten'][$i]);
$specificatie = mysql_real_escape_string($_POST['specificatie'][$i]);
$omschrijving = mysql_real_escape_string($_POST['omschrijving'][$i]);
$callnr = mysql_real_escape_string($_POST['callnr'][$i]);

if (empty($omschrijving) || ($overige == 0 && ($specificatie == 0 || $afdeling == 0 || $callnr == 0))){
++$checkEmpty; //count each empty row
continue;
}

else{
$sql="INSERT INTO uren (userid, specid, overid, afdelingid, uren, minuten, omschrijving, callnr, datum, week)
VALUES ('$werknemer', '$specificatie', '$overige', '$afdeling', '$uren', '$minuten', '$omschrijving', '$callnr', '$dateStr', '$week')";

$success[] = array($werknemer, $specificatie, $overige, $afdeling, $uren, $minuten, $omschrijving, $callnr, $dateStr, $week);

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
}
}

//if all 10 rows were empty, echo the error msg. else, print success msg
echo (($checkEmpty == 10) ? ("<img src=\"http://www.cvis.nl/templates/bediajoomlatemplate/images/logo.png\"><br><br>Je kunt geen leeg formulier opsturen - You can't send a blank form") 
      : ("<img src=\"http://www.cvis.nl/templates/bediajoomlatemplate/images/logo.png\"><br><br>De volgende werkzaamheden zijn toegevoegd: - The following records are added:<br><br>"));

//print information that was added to the DB
$loopCount = count($success);
for ($i = 0; $i < $loopCount; ++$i){
  echo "'";
  echo implode("', '", $success[$i]);
  echo "'";
  echo "<br />";
}

echo "<br><br>";
echo("<form><input type=\"button\" value=\"Vorige pagina\" onclick=\"parent.location='index.php'\" /></form>");

mysql_close($con)
?>

</body></html>[/p]

afd.php
[code=php:0]<?php
$query1 = mysql_query(
"SELECT `afdelingid`,
`afdeling`
FROM `afdelingen`
ORDER BY `afdelingid` ASC"
) or die (mysql_error());

while ($data = mysql_fetch_assoc($query1))
{
echo "<option value='".$data['afdelingid']."'>".$data['afdeling']."</option>\n";
}
?>

 

spec.php

<?php
$query2 = mysql_query(
"SELECT `specid`,
`specificatie`
FROM `specificatie`
ORDER BY `specificatie` ASC"
) or die (mysql_error());

while ($data = mysql_fetch_assoc($query2))
{
echo "<option value='".$data['specid']."'>".$data['specificatie']."</option>\n";
}
?>

 

over.php

<?php
$query3 = mysql_query(
"SELECT `overid`,
`overige`
FROM `overige`
ORDER BY `overid` ASC"
) or die (mysql_error());

while ($data = mysql_fetch_assoc($query3))
{
echo "<option value='".$data['overid']."'>".$data['overige']."</option>\n";
}
?>

Share this post


Link to post
Share on other sites

they may be getting counted as empty... hmm... what are the possible values of:

-specid

-overid

-afdelingid

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.