使用<；a>；链接，而不是选择/选项 - Passing selected value to PHP form using <a> links instead of select/option

Passing selected value to PHP form using <a> links instead of select/option

本文关键字：选择选项链接 lt gt 使用 | 更新日期: 2023-10-07

我正在创建一个下拉菜单，其中每个选择都将封装在链接中。所选的值需要传递到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>

您将需要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
});

应该这样做。