SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help Modifying Select Menu Javascript

    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.


    Code JavaScript:
    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!');
     
    }

    Code HTML4Strict:
     
    <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>
    Attached Images Attached Images

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Use a unique identifier on each form and use that unique identifier to gain a reference to the form that you need.

    For example:

    HTML Code:
    <form id="copytolist" onsubmit="allSelect()">
    ...
    </form>
    Code javascript:
    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(...)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    That worked! Thanks for the help!!


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
  •