使用 <a> 链接而不是选择/选项将选定的值传递给 PHP 表单

Question

我正在创建一个下拉菜单，其中每个选择都包含在链接中。选择的值需要传递给 php 联系表单，但我不知道该怎么做。

通常，我只使用选择选项方法，但我想完全从头开始设置菜单样式，那么是否可以从常规的 html 下拉菜单中获得相同的功能？

有问题的期望值在“你是谁？”中。部分...

<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

您将需要 javascript 来执行此操作。正如您所说，您的 javascript 不是那么流利，我将在这里使用 jQuery 以一种简单的方式说明您需要做什么。请注意，它可以使用纯 javascript 或使用其他库来完成。

首先，您需要添加一个隐藏字段，该字段将包含您要与表单的其余部分一起提交的值，然后您需要使用 javascript 获取所选选项的值/单击并将其放入隐藏字段：

我还将在表格单元格中添加一个 ID，以便选择正确的元素并更轻松地捕获事件：

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（假设包含 jQuery）：

$("#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
});

应该这样做。