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

Question

我正在创建一个下拉菜单，其中每个选择都将包装在链接中。 所选的值需要传递到php联系人表单，但我不确定如何执行此操作。

通常，我只使用select-option方法，但是我想完全从头开始设置菜单样式，因此是否可以从常规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
});

这样的事情应该做。