How do I add a dropdown menu that when you select an option and click send it shows the option in th-CodePudding

I have a website that I am making and I am adding a email portion that emails me their email and their message. I want to add another section that is a dropdown. It will have the three different pricing options, basic, pro, and premium. Then, whichever option they selected is put into the email so I can see it at the bottom of it. here is the code I have so far:

<form action="https://postmail.invotes.com/send"
    method="post" id="email_form">

    <input type="text" name="subject" placeholder="Email" />
    <textarea name="text" placeholder="Message">
      
    </textarea>
    <input type="hidden" name="access_token" value="0i7j9jp18jinjtx8mhlqvg8k" />
      <!-- return urls can be fully qualified -OR-
         start with / for root relative -OR-
         start with . for url relative --> 
    <input type="hidden" name="success_url" value=".?message=Email Successfully Sent!&isError=0" />
    <input type="hidden" name="error_url" value=".?message=Email could not be sent.&isError=1" />
   

    <!-- set the reply-to address -->
    <!-- <input type="text" name="reply_to"
                placeholder="Your Email" /> -->

    <!-- to append extra fields, use the extra_ prefix.
        Entries will be appended to your message body. -->
    <!-- <input type="text" name="extra_phone_number"
                placeholder="Phone Number" /> -->

    <!-- to split your message into 160 chars
         for an sms gateway -->
    <!-- <input type="hidden"
                name="sms_format" value="true" /> -->
   
    <input id="submit_form" type="submit" value="Send" />
    <!-- not required, but we'd appreciate it if you'd link to us somewhere on your site -->
    <p>Powered by <a href="https://postmail.invotes.com" target="_blank">PostMail</a></p>
</form>
     
<!-- optional, prevents the submit button from being pressed more than once -->
<script>
    var submitButton = document.getElementById("submit_form");
    var form = document.getElementById("email_form");
    form.addEventListener("submit", function (e) {
        setTimeout(function() {
            submitButton.value = "Sending...";
            submitButton.disabled = true;
        }, 1);
    });
</script> 
<style>/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
   width: 100%; /* Full width */
   padding: 12px; /* Some padding */ 
   border: 1px solid #ccc; /* Gray border */
   border-radius: 4px; /* Rounded borders */
   box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
 }

 /* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
 /* When moving the mouse over the submit button, add a darker green color */
 input[type=submit]:hover {
   background-color: #45a049;
 }

 /* Add a background color and some padding around the form */
 .container {
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
 }</style>

CodePudding user response：

You can have your dropdown inside the form, then when it's time to submit, intercept that and append the dropdown value to the user's text.

For this SOLUTION, I do the interception by not having a button that sends the form to the server directly. Instead a script is called on it's behalf to then append the dropdown value.

All other explanations are in the code comments.

function validateThenSend() {
    // Write a script that appends the "plan" to the message body, then sends the form to the server.
  
    // Optional validation code
    // ...
    
    // If validated, then continue:
    
    // Append the user selected Plan to the textarea.
    
    var curText = document.getElementById("text").value;
    curText  = "\n\nPLAN: "   document.getElementById("plans").value;
    document.getElementById("text").value = curText;
    
    // Submit the form
    
    // Uncomment the next line for the actual Send.
    // I have it commented for testing here in SO.
    
    // document.getElementById("email_form").submit();
    
}

<form action="https://postmail.invotes.com/send"
    method="post" id="email_form">

    <!-- Add in your dropdown, and give it an id but it wont need a name attribute -->
    
    <select id="plans">
        <option value="Plan 1">Plan 1</option>
        <option value="Plan 2">Plan 2</option>
        <option value="Plan 3">Plan 3</option>
    </select>
    
    <br/>
    <br/>
    
    <input type="text" name="subject" placeholder="Email" />
    
    <br/>
    <br/>
    
    
    <!-- Give the textarea an id -->
    <textarea name="text" placeholder="Message" id="text" cols=30 rows=10></textarea>
    
    <input type="hidden" name="access_token" value="0i7j9jp18jinjtx8mhlqvg8k" />
      <!-- return urls can be fully qualified -OR-
         start with / for root relative -OR-
         start with . for url relative --> 
    <input type="hidden" name="success_url" value=".?message=Email Successfully Sent!&isError=0" />
    <input type="hidden" name="error_url" value=".?message=Email could not be sent.&isError=1" />
   

    <!-- set the reply-to address -->
    <!-- <input type="text" name="reply_to"
                placeholder="Your Email" /> -->

    <!-- to append extra fields, use the extra_ prefix.
        Entries will be appended to your message body. -->
    <!-- <input type="text" name="extra_phone_number"
                placeholder="Phone Number" /> -->

    <!-- to split your message into 160 chars
         for an sms gateway -->
    <!-- <input type="hidden"
                name="sms_format" value="true" /> -->
   
    <!-- hide your Send button or simply remove it -->
    <input id="submit_form" type="submit" value="Send" style="display:none"/> 
    
    <!-- Make a fake Send button the user will see. -->
    <button type="button" onclick="validateThenSend()">Send</button>
    
    <!-- not required, but we'd appreciate it if you'd link to us somewhere on your site -->
    <p>Powered by <a href="https://postmail.invotes.com" target="_blank">PostMail</a></p>
</form>