[SOLVED] Update hidden field value with list box elements

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

[SOLVED] Update hidden field value with list box elements

Post 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.
Last edited by johnperkins21 on Wed Apr 21, 2004 1:50 pm, edited 2 times in total.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post 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?
magicrobotmonkey
Forum Regular
Posts: 888
Joined: Sun Mar 21, 2004 1:09 pm
Location: Cambridge, MA

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post 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.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Post Reply