?
Solved

Updating a row in a table with the value filled out using javascript and php

Posted on 2011-04-26
7
Medium Priority
?
162 Views
Last Modified: 2013-12-12
Hello,

I have a set of four rows each corresponding to a different time and a set of 7 columns which represent the days of week.Every cell has a textfield and a dropdown box associated with it.My code is as follows.

<tr>
<td width="100%" colspan="4">
      <table width="100%">
            <tr>
                  <td>Time</td>
                  <td>Sunday</td>
                  <td>Monday</td>
                  <td>Tuesday</td>
                  <td>Wednesday</td>
                  <td>Thursday</td>
                  <td>Friday</td>
                  <td>Saturday</td>
            </tr>
            
            <?
            //show all service times for the entire day
            $arrTime = array("00:00","00:15","00:30","00:45");
                                    $row = 1;
            foreach( $arrTime as $v )
            {
            ?>
            <tr>
                  <td><?=$v?></td>
                  <td><input type="text" name="time_sunday_<?=$row?>" value="<?=${"time_sunday_" . $row};?>" class="textbox" size="5"  onChange="setAllTimes( <?=$row?> , 'time_sunday' , this.value );"> <select name="person_sunday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_sunday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_sunday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_monday_<?=$row?>" value="<?=${"time_monday_" . $row};?>" class="textbox" size="5"  onChange="setAllTimes( <?=$row?> , 'time_monday' , this.value );"> <select name="person_monday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_monday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_monday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_tuesday_<?=$row?>" value="<?=${"time_tuesday_" . $row};?>" class="textbox" size="5"  onChange="setAllTimes( <?=$row?> , 'time_tuesday' , this.value );"> <select name="person_tuesday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_tuesday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_tuesday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_wednesday_<?=$row?>" value="<?=${"time_wednesday_" . $row};?>" class="textbox" size="5"  onChange="setAllTimes( <?=$row?> , 'time_wednesday' , this.value );"> <select name="person_wednesday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_wednesday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_wednesdayrov_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_thursday_<?=$row?>" value="<?=${"time_thursday_" . $row};?>" class="textbox" size="5"  onChange="setAllTimes( <?=$row?> , 'time_thursday' , this.value );"> <select name="person_thursday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_thursday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_thursday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_friday_<?=$row?>" value="<?=${"time_friday_" . $row};?>" class="textbox" size="5"  onChange="setAllTimes( <?=$row?> , 'time_friday' , this.value );"> <select name="person_friday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_friday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_friday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_saturday_<?=$row?>" value="<?=${"time_saturday_" . $row};?>" class="textbox" size="5"  onChange="setAllTimes( <?=$row?> , 'time_saturday' , this.value );"> <select name="person_saturday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_saturday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_saturday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
            </tr>
            <?
            $row++;
            }
            ?>
            
            
            
      </table>
</td>
</tr>

When the user enter something on row1-col1(which would be sunday at 00:15) it should update all the days of the week at 00:15 (monday 00:15 - i.e row1-col2,tuesday 00:15 row1-col3 and so on) with the value in row1-col1.
If they enter row1-col2(monday at 00:15 ) then it should update tuesday through sunday at 00:15 hours.
In the case when they are updating tuesday at 00:15 hrs(row1-col3),and wednesday 00:15 hrs(row1-col4) is already filled out then row1-col4 should not be update and it should continue with ro1-col5.
I am not sure about how to go on to write the setAllTimes function.

<script language="javascript">

function setAllTimes( rownum, dayofweekfield, valueoffield )
{
                  
}


//-->
</script>

Any help will be greatly appreciated.
Thanks
0
Comment
Question by:magnoliar
  • 3
5 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 2000 total points
ID: 35473230

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26978792.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $(".textbox").change( setAllTimes );

});

function setAllTimes() {

  var changed = this;
  var located = false;
  $(this).closest("tr").find(".textbox").each( function() {
    if ( ! located ) located = (this == changed);
    else if ( $(this).val().length == 0 ) {
      $(this).val( $(changed).val() );
    }
  });
  
}

</script>
</head>
<body>

<table >
<tr>
<td width="100%" colspan="4">
      <table width="100%">
            <tr>
                  <td>Time</td>
                  <td>Sunday</td>
                  <td>Monday</td>
                  <td>Tuesday</td>
                  <td>Wednesday</td>
                  <td>Thursday</td>
                  <td>Friday</td>
                  <td>Saturday</td>
            </tr>
            
            <?
            //show all service times for the entire day
            $arrTime = array("00:00","00:15","00:30","00:45");
                                    $row = 1;
            foreach( $arrTime as $v )
            {
            ?>
            <tr>
                  <td><?=$v?></td>
                  <td><input type="text" name="time_sunday_<?=$row?>" value="<?=${"time_sunday_" . $row};?>" class="textbox" size="5" /> <select name="person_sunday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_sunday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_sunday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_monday_<?=$row?>" value="<?=${"time_monday_" . $row};?>" class="textbox" size="5" /> <select name="person_monday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_monday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_monday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_tuesday_<?=$row?>" value="<?=${"time_tuesday_" . $row};?>" class="textbox" size="5" /> <select name="person_tuesday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_tuesday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_tuesday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_wednesday_<?=$row?>" value="<?=${"time_wednesday_" . $row};?>" class="textbox" size="5" /> <select name="person_wednesday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_wednesday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_wednesdayrov_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_thursday_<?=$row?>" value="<?=${"time_thursday_" . $row};?>" class="textbox" size="5" /> <select name="person_thursday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_thursday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_thursday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_friday_<?=$row?>" value="<?=${"time_friday_" . $row};?>" class="textbox" size="5" /> <select name="person_friday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_friday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_friday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
                  
                  <td><input type="text" name="time_saturday_<?=$row?>" value="<?=${"time_saturday_" . $row};?>" class="textbox" size="5" /> <select name="person_saturday_<?=$row?>" class="selectbig" onChange="setAllTimes( <?=$row?> , 'person_saturday' , this.value );">
                  <?
                  $arr = array("" , "N" , "P" , "S" , "A" , "O" );
                  foreach( $arr as $v1 )
                  {
                        if( ${"person_saturday_" . $row} == $v1 ){ $s = "SELECTED"; } else { $s = ""; }
                        echo "<option value='$v1' $s>$v1</option>";
                  }
                  ?>
                  </select>                  
                  </td>
            </tr>
            <?
            $row++;
            }
            ?>
            
            
            
      </table>
</td>
</tr>

</table>

</body>
</html>

Open in new window

0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 35764794
Hmm... Can you step back from the technical details of this question and tell us what you are trying to achieve, just in plain language?  Is it a scheduling application?
0
 
LVL 43

Expert Comment

by:Rob
ID: 39650951
I've requested that this question be deleted for the following reason:

Not enough information to confirm an answer.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 39650952
You can install and run the example from Proculopsis -- it works exactly as the author described (even if the description showed little consolidation of thought).
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 39661283
Yep, it was a good solution!  Thanks, ~Ray
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month17 days, 8 hours left to enroll

831 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