(Help) Get results from multiple dropdown with one submit button

Question

I make four horizontal dropdown menu. Here is my code :

<div class="MenuSearching" id="Searching">
    <div class="Menu1" id="Menu1">
        <p> Lembaga</p>
            <form style="margin-top:-20px;margin-left:-2px;">
                <select name="DropLembaga" autofocus required id="DropLembaga">
                    <option value="no" selected="selected">---Choose one---</option>
                    <option value="FlashCom">FlashCom</option>
                    <option value="InterNusa">InterNusa</option>
                    <option value="HexaCompare">HexaCompare</option>
                </select> 
            </form>
    </div>
    <div class="Menu2" id="Menu2">
        <p> Paket Kursus</p>
            <form style="margin-top:-20px;margin-left:-2px;">
                <select name="DropBahasa" autofocus required id="DropBahasa">
                    <option value="no" selected="selected">---Choose one---</option>
                    <option value="web">Kursus Web Design</option>
                    <option value="flash">Kursus Flash Animation</option>
                    <option value="marketing">Kursus Internet Marketing</option>
                </select> 
            </form>
    </div>
    <div class="Menu3" id="Menu3">
        <p> Lokasi</p>
            <form style="margin-top:-20px;margin-left:-3px;">
                <select name="DropLokasi" autofocus required id="DropLokasi">
                    <option value="no" selected="selected">---Choose one---</option>
                    <option value="timur">Surabaya Timur</option>
                    <option value="barat">Surabaya Barat</option>
                    <option value="utara">Surabaya Utara</option>
                    <option value="selatan">Surabaya Selatan</option>
                </select> 
            </form>
    </div>
    <div class="Menu4" id="Menu4">
        <p> Harga</p>
            <form style="margin-top:-20px;margin-left:-2px;">
                <select name="DropHarga" autofocus required id="DropHarga">
                    <option value="no" selected="selected">---Choose one---</option>
                    <option value="harga1"> kurang dari Rp.750.000</option>
                    <option value="harga2">Rp.750.000 - Rp.1.500.000</option>
                    <option value="harga3">Rp.1.500.000 - Rp.2.500.000</option>
                    <option value="harga4">lebih dari Rp.2.500.000</option>
                </select> 
            </form>
    </div>
    <div>
    <input name="submitbutton" type="submit" id="submitbutton" formmethod="POST" value="search">
    </div>
</div>

My question, how to make the submit button from these multiple dropdown (and get the results)?

Is my code above efficient?

Thank you for the answer!

Answer 1

First thing would be to change your form tags to divs to keep your formatting.

<div class="Menu1" id="Menu1">
    <p> Lembaga</p>
    <div style="margin-top:-20px;margin-left:-2px;">
        <select name="DropLembaga" autofocus required id="DropLembaga">
            <option value="no" selected="selected">---Choose one---</option>
            <option value="FlashCom">FlashCom</option>
            <option value="InterNusa">InterNusa</option>
            <option value="HexaCompare">HexaCompare</option>
        </select> 
    </div>
</div>

Next you will need to surround your entire form with <form></form> tags. I would place the open form tag just below the opening of your first div.

<div class="MenuSearching" id="Searching">
    <form action="" method="post">
    <div class="Menu1" id="Menu1">
        .
        .
        .
    </div>
    <div class="Menu2" id="Menu2">
        .
        .
        .
    </div>
    <div class="Menu3" id="Menu3">
        .
        .
        .
    </div>
    <div class="Menu4" id="Menu4">
        .
        .
        .
    </div>
    <div>
        <input name="submitbutton" type="submit" id="submitbutton" formmethod="POST" value="search">
    </div>
    </form>
</div>