Help - Search - Members - Calendar
Full Version: How to add combo box to existing form?
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Jeff11214
HTML code below shows a form with 5 fields. 1 field is already setup as a combo box. I would like to change the other 4 fields to combo boxes. I tried with no success. Can someone please help and change the 4 fields to combo box's to the below code?

<style type="text/css">
#IDX-quickSearchForm { position: relative; height: 110px; width: 350px; }
#QS-minPriceField { position: absolute; width: 100px; height: 12px; left: 92px; top: 9px; font-size:

10px; font-family: Arial; }
#QS-maxPriceField { position: absolute; width: 100px; height: 12px; left: 92px; top: 29px; font-size:

10px; font-family: Arial; }
#QS-minRoomsField { position: absolute; width: 50px; height: 12px; left: 272px; top: 29px; font-size:

10px; font-family: Arial; }
#QS-minBathsField { position: absolute; width: 50px; height: 12px; left: 272px; top: 9px; font-size:

10px; font-family: Arial; }
#QS-labelMinPrice { text-align: left; position: absolute; width: 85px; height: 22px; left: 20px; top:

10px; font-size: 10px; font-family: Arial; }
#QS-labelMinRooms { text-align: left; position: absolute; width: 50px; height: 22px; left: 229px; top:

30px; font-size: 10px; font-family: Arial; }
#QS-labelMinBaths { text-align: left; position: absolute; width: 50px; height: 22px; left: 229px; top:

10px; font-size: 10px; font-family: Arial; }
#QS-labelCityList { text-align: left; position: absolute; width: 100px; height: 22px; left: 20px; top:

51px; font-size: 10px; font-family: Arial; }
#QS-buttonSearch { position: absolute; width: 60px; height: 22px; left: 269px; top: 50px; font-size:

10px; font-family: Arial; }
#QS-selectCityList { position: absolute; width: 105px; height: 17px; left: 92px; top: 49px; font-size:

10px; font-family: Arial; }
#backLink {position:absolute; top:110px;}
</style>
<div id="IDX-quickSearchForm">
<form action="http://www.blablabla.com/form.php" method="get">
<input type="text" name="lp" id="QS-minPriceField" value="Min">
<input type="text" name="hp" id="QS-maxPriceField" value="Max">
<input type="text" name="bd" id="QS-minRoomsField" value="1">
<input type="text" name="ba" id="QS-minBathsField" value="1">
<div id="QS-labelMinPrice"<span style="color:#E5B65A;">Select Price:</div>
<div id="QS-labelMinRooms"<span style="color:#E5B65A;">Rooms:</div>
<div id="QS-labelMinBaths"<span style="color:#E5B65A;">Baths:</div>
<div id="QS-labelCityList"<span style="color:#E5B65A;">Select Town:</div>
<input id="QS-buttonSearch" type="submit" name="searchSubmit" value="Search" />
<select id="QS-selectCityList" name="city[]" value="Search" >
<option value="487">Albertson</option>
<option value="1017">Amagansett</option>
<option value="1115">Amity Harbor</option>
<option value="1116">Amityville</option>
<option value="1410">Aquebogue</option>
</select>
</form>
</div>
pandy
I don't know if I understand what the problem is, but just remove the text inputs and add the number of SELECT you want.
Jeff11214
The problem is I don't know exactly what to change.

Where it shows "Min" - I want that to be a combo box.
Where it shows "Max" - I want that to be a combo box.
Where it shows "1" - I want that to be a combo box.
Where it shows "1" - I want that to be a combo box.

Darin McGrew
You text input fields look like this:
CODE
<input type="text" name="lp" id="QS-minPriceField" value="Min">
And like this:
CODE
<input type="text" name="hp" id="QS-maxPriceField" value="Max">
And like this:
CODE
<input type="text" name="bd" id="QS-minRoomsField" value="1">
And like this:
CODE
<input type="text" name="ba" id="QS-minBathsField" value="1">


Your select field (what you're calling a "combo box", although it isn't quite) looks like this:
CODE
<select id="QS-selectCityList" name="city[]" value="Search" >
<option value="487">Albertson</option>
<option value="1017">Amagansett</option>
<option value="1115">Amity Harbor</option>
<option value="1116">Amityville</option>
<option value="1410">Aquebogue</option>
</select>


You need to replace each text input field with a corresponding select field.
Jeff11214
Thanks for the detailed explanation. I got it now. smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.