Page 1 of 1

[SOLVED] Update hidden field value with list box elements

Posted: Tue Apr 20, 2004 2:15 pm
by johnperkins21
This may have been asked before, but I couldn't find it. I have a select list box that I need to all of the elements (in order) into php.

Basically, I have a list box that gets populated from MYSQL, then the user re-orders the list using javascript, and now I want to put the order back into another table for access later. Does anyone have any idea on how to do this? I'm kind of clueless, thanks.


Here is my code so far, and it doesn't work:

Code: Select all

<?php
<? include "db_connect.php"; ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
  <head>
  	<title>Rank Select</title>
    <style type="text/css">
    <!--
      body, td {
        background: window;
        color: windowtext;
        font: icon;
      }
      
      select {
        background: window;
        color: windowtext;
        font: icon;
      }
      
      input {
        background: buttonface;
        color: buttontext;
        font: icon;
      }
  
      small {
        color: graytext;
      }
    -->
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
      function moveOption(selectObj, direction)
      {
        if(selectObj.selectedIndex != -1)
        {
          if(direction < 0)
          {
            for(i = 0; i < selectObj.options.length; i++)
            {
              swapValue = (i == 0 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].value;
              swapText = (i == 0 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].text;
              if(selectObj.options[i].selected && swapValue != null && swapText != null)
              {
                thisValue = selectObj.options[i].value;
                thisText = selectObj.options[i].text;
                selectObj.options[i].value = swapValue;
                selectObj.options[i].text = swapText;
                selectObj.options[i + direction].value = thisValue;
                selectObj.options[i + direction].text = thisText;
                selectObj.options[i].selected = false;
                selectObj.options[i + direction].selected = true;
              }
            }
          }
          else
          {
            for(i = selectObj.options.length - 1; i >= 0; i--)
            {
              swapValue = (i == selectObj.options.length - 1 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].value;
              swapText = (i == selectObj.options.length - 1 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].text;
              if(selectObj.options[i].selected && swapValue != null && swapText != null)
              {
                thisValue = selectObj.options[i].value;
                thisText = selectObj.options[i].text;
                selectObj.options[i].value = swapValue;
                selectObj.options[i].text = swapText;
                selectObj.options[i + direction].value = thisValue;
                selectObj.options[i + direction].text = thisText;
                selectObj.options[i].selected = false;
                selectObj.options[i + direction].selected = true;
              }
            }
          }
        }
		this.form.teams.value = '';
		for(i = 0; i < selectObj.options.length; i++)
        {
          teamOrder += selectObj.options[i].value + ',';
        }
		this.form.teams.value = teamOrder;
      }
  
      function selectAll(selectObj)
      {
        for(i = 0; i < selectObj.options.length; i++)
        {
          selectObj.options[i].selected = true;
        }
        return false;
      }
    // -->
    </script>
  </head>
<body>


<?
print_r($_POST['id_list']);
print_r($_POST['teams']);


?>



<form method="POST" action="draft.php">

<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td colspan="2">
  <select name="id_list[]" id="id_list" size="17" multiple style="width: 120px" scrolling="no">
  
  <?
  $query = mysql_query("SELECT TeamID, TeamName FROM Teams ORDER BY TeamName");
  
  while ($result = mysql_fetch_array($query)) {
	  echo "<option value="$result[0]">$result[1]</option>\n";
  }
  
  ?>
 
  
  </select>

  </td>
</tr>
<tr>
  <td width="45"><input type="button" onClick="moveOption(this.form.id_list, -1)" value="Up" title="Move Up" style="width: 45px; height: 25px; font-family: webdings; font-size: 10px"></td>
  <td width="45"><input type="button" onClick="moveOption(this.form.id_list, 1)" value="Down" title="Move Down" style="width: 45px; height: 25px; font-family: webdings; font-size: 10px"></td>
</tr>
<tr>
<input type="hidden" value="" name="teams" id="teams">  
<td colspan="2"><input type="submit" value="Save" style="width: 90px"></td>
</tr>
</table>

</form>
</body>

</html>

?>
It only shows the selected item.

Posted: Wed Apr 21, 2004 1:07 pm
by johnperkins21
I think I need to rephrase my question. After much searching, I have found that exactly what I want to do is not possible, so what I need to do is figure out how to update the value of a hidden field with the contents of a list box.

Here is what I have so far, that by the way does not work at all.
My code is the same as above, but the part that I need working is this:

Code: Select all

this.form.teams.value = '';
      for(i = 0; i < selectObj.options.length; i++)
        &#123;
          teamOrder += selectObj.options&#1111;i].value + ',';
        &#125;
      this.form.teams.value = teamOrder; 
?>
Here is the field that needs updating:

Code: Select all

<input type="hidden" value="" name="teams" id="teams">
The value never changes from "". Any ideas?

Posted: Wed Apr 21, 2004 1:09 pm
by magicrobotmonkey
Do you initialise teamOrder anywhere? and are you trying to put everything in the select bux in there, or just the ones that are selected?

Posted: Wed Apr 21, 2004 1:14 pm
by feyd
the value in the html will not change, it's static. The value of that field in the browser will change however. Given that teamOrder is actually initialized somewhere.

Posted: Wed Apr 21, 2004 1:29 pm
by johnperkins21
I'm trying to put everything in the list into the hidden field in the new order. I'm basically trying to create a draft system so the user can move an item in a list up or down, and then populate a table in a database. To get the user's order of the list I need to post it somehow, thus the hidden field with a comma delimiter that I can explode later.

I didn't initialise teamOrder anywhere that I know of, but I'm not sure how? just do:

teamOrder = '';

?


I tried using a text box so I could see dynamically if the field gets updated or not, like so:

Code: Select all

draft.teams.value = '';
		teamOrder = '';
		
		for(i = 0; i < selectObj.options.length; i++)
        &#123;
         teamOrder += selectObj.options&#1111;i].value + ',';
        &#125;
		draft.teams.value = teamOrder;

Code: Select all

<input type="input" value="" name="teams" id="teams">

I know it's just something I'm doing wrong, but I'm quite clueless on the ways of javascript. Thanks for the help.

Posted: Wed Apr 21, 2004 1:39 pm
by feyd
johnperkins21 wrote:I didn't initialise teamOrder anywhere that I know of, but I'm not sure how? just do:

teamOrder = '';
yep
I tried using a text box so I could see dynamically if the field gets updated or not, like so:

Code: Select all

draft.teams.value = '';
		teamOrder = '';
		
		for(i = 0; i < selectObj.options.length; i++)
        &#123;
         teamOrder += selectObj.options&#1111;i].value + ',';
        &#125;
		draft.teams.value = teamOrder;

Code: Select all

<input type="input" value="" name="teams" id="teams">

I know it's just something I'm doing wrong, but I'm quite clueless on the ways of javascript. Thanks for the help.
type input isn't a valid input attribute.

When I've done something like this in the past, I created two select lists. One populated with the original data, the second empty, with an add and remove button inbetween the two. The select lists get a size of the lis, or say 10, whichever was smaller, just to keep the screen space somewhat small to avoid scrolling the window.

Posted: Wed Apr 21, 2004 1:47 pm
by johnperkins21
You're right, changed to input type text. However, this should still work. In javascript, I should be able to change the value of my textbox, it just isn't working for some reason and I don't know enough about javascript to figure it out.

Doing 2 lists isn't going to help me. I'd still need to figure out a way to post all of the items. If there were a way to select everything in the list before submitting so that I get an array, that would work. The only way I can think to do this is with two buttons though. Or maybe I can use javascript to submit the form since I have the code to select all the text. I'll try that.

Posted: Wed Apr 21, 2004 1:51 pm
by johnperkins21
Solved:

I called the selectAll function with the save button and did a document.form.submit(); in the function. Works like a charm. Thanks for the help, and I apologise for wasting your time with something I should have figured out before posting.

Posted: Wed Apr 21, 2004 1:52 pm
by feyd
you can have an onsubmit in the form that reads all the values in the second list and serializes them into a hidden field.