SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pass select value to an input box?

    Hello,

    After a bit of Javascript help if possible please. I use php to output a foreach loop on a table (example below), so when I hit submit on the values each of the rows are submitted to the database.

    However, my problem if this. If you look at the below I use a bit of JS on the <select> box which when selected should automatically populate the corresponding start_time[] <input> box, however I can't seem to get it to work? can anyone help

    PHP Code:
    <?php
    if (isset($_POST['Submit']))
    {
        for(
    $i 0$i count($_POST['user_id']); $i++) 
        {  
        
    //Loop through each and insert into DB
       //This is not the problem
       //And is just an example showing you how it works
       
    }
    }
    ?>


    <form method="POST" action="" name="MyForm">
    <table class="appointments">
    <thead>
    <tr> 
    <th>Photographer</th>
    <th>Start Time</th>
    <th>Clocking Off</th>
    <th>Off</th>
    </tr>
    </thead>
    <tbody> 
      <tr> 
      <td style="background:#990000">User Name 1<input type="hidden" name="user_id[]" value="1" />
       <input type="text" class="inputbox" value="" name="start_time[]" />
        <select name="timequickpick" onchange="window.document.MyForm.start_time[].value = this.options[this.selectedIndex].value";><!--Need to pass this value picked to start_time above-->
          <option value="08:00:00">8:00 AM</option>
          <option value="09:00:00">9:00 AM</option>
          </select>
      </td>    
      <td style="background:#990000">User Name 2<input type="hidden" name="user_id[]" value="2" />
       <input type="text" class="inputbox" value="" name="start_time[]" />
          <select name="timequickpick" onchange="window.document.MyForm.start_time[].value = this.options[this.selectedIndex].value";><!--Need to pass this value picked to start_time above-->
          <option value="08:00:00">8:00 AM</option>
          <option value="09:00:00">9:00 AM</option>
          </select>
      </td>    
    </tbody>
    </table>
    <input name="Submit" class="btn" type="Submit" value="Submit" />
    </form>
    Thanks

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will do it for you. You need to watch that the names you choose in your forms are all different. Several of them were the same in your original script. This prevents the script and the form from working properly.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Time Selection</title>
    <script type="text/javascript">
    <!--
     function setTime(obj,numbr)
      { // check for valid selection
        if(obj.selectedIndex==0){ return; }
        //
        var select1=obj.options[obj.selectedIndex].value;
        var tBoxRef="start_time"+numbr;
        document.MyForm[tBoxRef].value = select1;
         }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px;  }
    .bg1 { background-color: #990000; color:#FFF; font-weight:bold; }
    -->
    </style>
    </head>
     
    <body>
     
    <form name="MyForm" method="post" action>
      <table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse">
        <thead>
          <tr>
            <th>Photographer</th>
            <th>Start Time</th>
            <th>Clocking Off</th>
            <th>Off</th>
          </tr>
        </thead>
        <tr>
          <td class="bg1">User Name 1 <input type="hidden" name="userId1" value="1">
          <input name="start_time1" type="text" value size="20">
          <select name="timePick1" onchange="setTime(this,1)">
          <option value="0">Select --</option>
          <option value="08:00:00">8:00 AM</option>
          <option value="09:00:00">9:00 AM</option>
          </select> </td>
          <td class="bg1">User Name 2 <input type="hidden" name="userId2" value="2">
          <input name="start_time2" type="text" class="inputbox" value size="20">
          <select name="timePick2" onchange="setTime(this,2)">
          <option value="0">Select --</option>
          <option value="08:00:00">8:00 AM</option>
          <option value="09:00:00">9:00 AM</option>
          </select> </td>
        </tr>
      </table>
      <p><input name="Submit" class="btn" type="Submit" value="Submit"></p>
    </form>
     
    </body>
     
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but trouble is that's hard coded. As mentioned i'm using a PHP forloop to iterate through all the records, so they have to be named with [].

    PHP Code:
        for($i 0$i count($_POST['user_id']); $i++) 
        {  
            
    $id    $_POST['user_id'][$i];
            
    $start $the_date." ".$_POST['start_time'][$i];
            
    $end   $the_date." ".$_POST['end_time'][$i];
        }
    //Post to database stuff 

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried to put some incremental value inside the brackets?

    for example

    Code HTML4Strict:
       <input type="text" class="inputbox" value="" name="start_time[0]" />
       <input type="text" class="inputbox" value="" name="start_time[1]" />

    That will create a collection client side, instead of many input named "start_time[]".


    See you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •