Question

I’m creating a dropdown menu where each selection will be wrapped in links. The value selected needs to be passed to a php contact form but I’m not sure how to do this.

Normally, I’d just use the select-option method but I want to style the menu completely from scratch so is it possible to get the same functionality from just a regular html dropdown menu?

The desired values in question are in the ‘Who are you?’ section…

<div id="contact_info">
    <form name="htmlform" method="post" action="./contact.php">
        <table>
            <caption>CONTACT</caption>
            <tr>
                <td valign="top">
                    <label for="your_name">Name:</label>
                </td>
                <td valign="top">
                    <input type="text" name="your_name" maxlength="50" size="23">
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <label for="email">Email:</label>
                </td>
                <td valign="top">
                    <input type="text" name="email" maxlength="50" size="23">
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <label>Who are you?:</label>
                </td>
                <td valign="top">
                    <a>
                        <p style="background:#ffffff;">I am...</p>
                    </a>
                    <a href="">
                        <p>an artist.</p>
                    </a>
                    <a href="">
                        <p>an educator.</p>
                    </a>
                    <a href="">
                        <p>a student.</p>
                    </a>
                    <a href="">
                        <p>a curator.</p>
                    </a>
                    <a href="">
                        <p>other...</p>
                    </a>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td style="width:120px !important;"></td>
                <td valign="top">
                    <label for="comments">Message:</label>
                </td>
            </tr>
            <tr>
                <td style="width:120px !important;">
                    <input type="submit" value="Submit">
                </td>
                <td valign="top">
                    <textarea name="comments" maxlength="1000" cols="44" rows="19"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>

Answer 1

You will need javascript to do this. As you have stated that your are not that fluent in javascript, I will use jQuery here to illustrate what you need to do in an easy way. Note that it can be done in plain javascript or using another library as well.

First you need to add a hidden field that will contain the value you want to submit with the rest of the form and then you need to use javascript to get the value of the selected option / click and put it in the hidden field:

I will also add an ID to the table cell to make selecting the right element and catching the events easier:

html:

<td valign="top" id="I_am_a">
    <input type="hidden" name="I_am_a">
    <a><p style="background:#ffffff;">I am...</p></a>
    <a href=""><p>an artist.</p></a>
    <a href=""><p>an educator.</p></a>
    <a href=""><p>a student.</p></a>
    <a href=""><p>a curator.</p></a>
    <a href=""><p>other...</p></a>
</td>

javascript (assuming jQuery is included):

$("#I_am_a a").on('click', function(e) {
  e.preventDefault();                    // prevent the default click action
  $("#I_am_a input")
      .val( $(this).find("p").text() );  // assign the text contents of the
                                         // paragraph tag in the clicked a
                                         // to the input element
});

Something like this should do it.