將所選值傳遞給PHP表單使用<a>鏈接而不是選擇/選項

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 
}); 

這樣的事情應該這樣做。