Need Help Modifying Select Menu Javascript

JavaScript
1

I have a JavaScript script that takes selected options from one menu and transfers it over to another menu. The script works fine when I don’t have any other form elements on the page, but when I add the search field to the page I get an error. See screenshot. I need to include the search the box on this page. How should I modify the Javascript in order for it to work with the search box being on the page? Thanks.


function allSelect()

{

  List = document.forms[0].chosen;

  if (List.length && List.options[0].value == 'temp') return;

  for (i=0;i<List.length;i++)

  {

     List.options[i].selected = true;

  }

}



function copyToList(from,to)

{

  fromList = document.forms[0].elements[from];

  toList = document.forms[0].elements[to];

  

  if (toList.options.length > 0 && toList.options[0].value == 'temp')

  {

    toList.options.length = 0;

  }

  var sel = false;

  for (i=0;i<fromList.options.length;i++)

  {

    var current = fromList.options[i];

    if (current.selected)

    {

      sel = true;

      if (current.value == 'temp')

      {

        alert ('You cannot move this text!');

        return;

      }

      txt = current.text;

      val = current.value;

      toList.options[toList.length] = new Option(txt,val);

      fromList.options[i] = null;

      i--;

    }

  }

  if (!sel) alert ('You haven\\'t selected any options!');

}




<table width="675" cellspacing="0" cellpadding="0" id="subtable">
<tr>
<td>
<form action="<?php echo SITE_URL. htmlentities($_SERVER["REQUEST_URI"]); ?>" method="get">
<input type="text" name="search_term" value="<?php if(isset($search_term)){ echo stripslashes($search_term); } ?>" size="30">

<select name="search_type" size="1">
<option value="1" <?php if(isset($search_type) && $search_type == 1){ echo 'selected="selected"'; } ?>>Any of The Words</option>
<option value="2" <?php if(isset($search_type) && $search_type == 2){ echo 'selected="selected"'; } ?>>All of The Words</option>
<option value="3" <?php if(isset($search_type) && $search_type == 3){ echo 'selected="selected"'; } ?>>The Exact Phrase</option>
</select>

<select name="publication_type" size="1">
<option value="">ALL</option>
<?php echo DisplayMenuOptions($publication_types, "publication_type_id", "publication_type_name", $publication_type); ?>
</select>
<input type="submit" name="submit" value="Search" class="blue_bttn">
<input type="hidden" name="action" value="pubs">
</form>
</td>
<td align="right">
<form action="<?php echo SITE_URL. htmlentities($_SERVER["REQUEST_URI"]); ?>" method="post">
<input type="submit" name="submit" value="Show All" class="blue_bttn">
</form>
</td>
</tr>
</table>
<br />

<form onsubmit="allSelect()">
<table border="0" cellpadding="10" cellspacing="0">
<tbody><tr><td><p>Choose From the Following:<br />

<select id="possible" name="possible" size="15" multiple="multiple" width="260" style="width: 372px;">
<?php echo $options; ?>
</select>
</p>
</td>

<td style="padding:0 15px;">
<a href="javascript:copyToList('possible','chosen[]')"><img src="../../images/arrow_right.gif" border="0" /></a><br /><br />
<a href="javascript:copyToList('chosen[]','possible')"><img src="../../images/arrow_left.gif" border="0" /></a>
</td>
<td>
<p>Publish the Following:<br />
<select id="chosen" name="chosen[]" size="15" multiple="multiple" width="250" style="width: 362px;">
<option value="about">Make your choice on the left</option>
</select>
</p>
</td>
</tr>
<tr><td colspan="3" align="right"><input type="hidden" name="action" value="publish_to_pdf" /><input type="submit" value="Publish" name="submit" class="bttn"></td></tr>
</tbody>
</table>
</form>
2

Use a unique identifier on each form and use that unique identifier to gain a reference to the form that you need.

For example:


<form id="copytolist" onsubmit="allSelect()">
...
</form>



var form = document.getElementById('copytolist'),
    list = form.elements.chosen;
...

Also, when naming functions and values, the standard convention is to only make the first letter a capital if it’s used as a constructor function. For example var person = new Person(…)

3

Paul,
That worked! Thanks for the help!!