Jump to content

Get list of values from two connected listboxes


BrandonMoore
 Share

Recommended Posts

Hello everyone,

Let me start this off by saying I'm a total newbie with html, jquery, and php programming.  I'm the only one in my office with any programming experience (python, matlab, R) and have been tasked with creating a webpage to search a database.  The web interface looks very similar to what is available on http://trdb.wcasfmra.org/, but with a "Submit" button.  Up to this point I've been able to echo information from the textboxes and checkboxes (to make sure I can get the values I need) but I'm having a ton of problems with the listboxes.  When the user selects "By County" they are able to drag and drop a county from one listbox to the other.  My question is this: how do I get the list of counties in the Selected listbox to echo out? The only way I can get it to work now is by having them highlighted, which kind of defeats the purpose of having a list of potential counties and selected counties.  Below is some of my own code I pasted in here.

This is the Counties listbox:

<select style="width: 140px;height: 273px" multiple="multiple" id='avail_counties'>
<option value="Adams">Adams</option>
<option value="Barron">Barron</option>

...</select>

This is the Selected listbox:

<select style="width: 140px;height: 273px" multiple="multiple" id='select_counties' name="selectCounties[]" onchange="updateCountyList">

</select>

I've combed over the net for the last two days and have tried a lot of different things but don't know enough of the syntax to get it straightened out.  I'm sure this is a simple thing for those of you who do this for a career but it's been difficult for me.  I don't necessarily understand what code i should use and where it should go.  Any help would be greatly appreciated.  If you need additional information from me please let me know and I'll respond ASAP.  My html file is called DatabaseSearch.html and the php script is called SearchTest.php (if it helps at all).

Thank you a million times over,

Brandon

Link to comment
Share on other sites

If I understand what you're saying

  • Show available counties in ListA
  • Drag some counties from ListA to ListB
  • When counties are selected in ListB, add them to ListC

You stated you are doing a database search. Do you then want to submit ListC to search for items in those counties?

Link to comment
Share on other sites

Thank you for responding Barand. Essentially your first two points are right; drag the available counties from ListA to ListB and then on Submit, echo the values from ListB to the screen. The biggest thing is that the values in ListB are not selected (highlighted) when the user clicks submit. This is how my form looks (very similar to the one I previously referenced).

 

image.png.9200d1fd23afc4e741a90c701031ae49.png

Edited by BrandonMoore
Link to comment
Share on other sites

14 minutes ago, BrandonMoore said:

The biggest thing is that the values in ListB are not selected (highlighted) when the user clicks submit

Why does that matter? As soon as the user clicks "Submit", the searchTest.php page should appear with the search results (at least I assume that happens next).

Link to comment
Share on other sites

WHy have two lists of counties. Can't the user just select multiple counties (ctrl-click) in the first list? For example

<?php
     if (isset($_GET['counties'])) {
         foreach ($_GET['counties'] as $cname) {
             echo "$cname<br>";
         }
     }
     echo '<hr>';
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bookstore</title>
</head>
<body>
    <form>
        <select name='counties[]' multiple size='5'>
            <option>Adams</option>
            <option>Barron</option>
            <option>Buffalo</option>
            <option>Clark</option>
            <option>Dodge</option>
        </select>
        <button type='submit'>Submit</button>
    </form>
</body>
</html>

 

Link to comment
Share on other sites

A alternative to setting them as selected when you add them to ListB is to use a javascript function to select them all just prior to submitting the form...

<?php
     if (isset($_GET['selected_counties'])) {
         foreach ($_GET['selected_counties'] as $cname) {
             echo "$cname<br>";
         }
     }
     echo '<hr>';
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>County Selection</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type='text/javascript'>
        function doSubmit() {
            $.each( $("#selected_counties").children(), function(k,v) {
                $(v).attr("selected","selected")     // set items as selected
            })
            return true;   // submit the form
        }
    </script>
</head>
<body>
    <form onsubmit = "return doSubmit()">
        <select name='selected_counties[]' id='selected_counties' multiple size='5'>
            <option>Adams</option>
            <option>Barron</option>
            <option>Buffalo</option>
            <option>Clark</option>
            <option>Dodge</option>
        </select>
        <button type='submit'>Submit</button>
    </form>
</body>
</html>

 

Edited by Barand
js correction
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.