BrandonMoore Posted October 22, 2021 Share Posted October 22, 2021 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 Quote Link to comment Share on other sites More sharing options...
Barand Posted October 22, 2021 Share Posted October 22, 2021 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? Quote Link to comment Share on other sites More sharing options...
BrandonMoore Posted October 22, 2021 Author Share Posted October 22, 2021 (edited) 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). Edited October 22, 2021 by BrandonMoore Quote Link to comment Share on other sites More sharing options...
ginerjm Posted October 22, 2021 Share Posted October 22, 2021 I think your JS would have to select each one after it moves it into list B Or maybe select them all when the submit button is clicked Quote Link to comment Share on other sites More sharing options...
Barand Posted October 22, 2021 Share Posted October 22, 2021 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). Quote Link to comment Share on other sites More sharing options...
Barand Posted October 22, 2021 Share Posted October 22, 2021 (edited) Doh! Forget that - I just answered my own question as I posted - if they aren't selected they don't get sent. When you write the options to ListB, set their selected attributes <option selected>Adams</option> Edited October 22, 2021 by Barand Quote Link to comment Share on other sites More sharing options...
Barand Posted October 22, 2021 Share Posted October 22, 2021 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> Quote Link to comment Share on other sites More sharing options...
BrandonMoore Posted October 22, 2021 Author Share Posted October 22, 2021 I would have rather just had a single list but I was told that there needed to be two lists. No idea why, just do what the boss says. Quote Link to comment Share on other sites More sharing options...
Barand Posted October 22, 2021 Share Posted October 22, 2021 Good a reason as any. Quote Link to comment Share on other sites More sharing options...
Barand Posted October 22, 2021 Share Posted October 22, 2021 (edited) 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 October 22, 2021 by Barand js correction Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.