Pulling the value of a form "select" and use it in the "action" of the form

Question

I am trying to use the dropdown box to choose the correct first part of the e-mail to send it to.

<html>

<head>
  <script language="JavaScript">
    <!-- \/ Not sure if this part is formatted right \/ -->
    var mailpre = ("MAILTO:" + document.getElementById("cusub").value + "@cmputers.ca");
     <!-- /\ Not sure if this part is formatted right /\ -->
  </script>
</head>

<body>

  <!-- \/ Not sure if the action part is formatted right \/ -->
  <form action=mailpre method="post" enctype="text/plain" autocomplete="on" id="contact">
    <!-- /\ Not sure if the action part is formatted right /\ -->
    <fieldset>
      <legend>Contact Information</legend>
      Name:
      <br>
      <input type="text" name="clientname" autofocus required>
      <br>E-mail:
      <br>
      <input type="email" name="clientemail" required>
      <br>Telephone Number:
      <br>
      <input type="text" name="clientphone">
      <br>
    </fieldset>
    <fieldset>
      <legend>Subject</legend>
      <select id="cusub" name="subject">
        <option value=""></option>
        <option value="booking">Booking An Appointment</option>
        <option value="support">Technical Support</option>
        <option value="feedback">Feedback</option>
      </select>
      <br>
      <textarea name="message" rows="10" cols="30"></textarea>
      <br>
      <input type="submit" value="Send">
    </fieldset>
  </form>


</body>

</html>

Hopefully someone can help, as it seems screwy to me.

var e = document.getElementById("cusub"); var text = e.options[e.selectedIndex].text; and use text in mailto — uzaif, Apr 05 '16 at 04:49

score 0 · Answer 1 · edited May 23 '17 at 11:50

To change form action attribute with select :

function premail(){
  document.getElementById('contact').setAttribute('action', "mailto:" + document.getElementById("cusub").value + "@cmputers.ca");
}

<form action="" method="post" enctype="text/plain" autocomplete="on" id="contact">
    <fieldset>
      <legend>Contact Information</legend>
      Name:
      <br>
      <input type="text" name="clientname" autofocus required>
      <br>E-mail:
      <br>
      <input type="email" name="clientemail" required>
      <br>Telephone Number:
      <br>
      <input type="text" name="clientphone">
      <br>
    </fieldset>
    <fieldset>
      <legend>Subject</legend>
      <select id="cusub" onchange="premail()" name="subject">
        <option value=""></option>
        <option value="booking">Booking An Appointment</option>
        <option value="support">Technical Support</option>
        <option value="feedback">Feedback</option>
      </select>
      <br>
      <textarea name="message" rows="10" cols="30"></textarea>
      <br>
      <input type="submit" value="Send">
    </fieldset>
  </form>

P.S.: You can not send email using JavaScript alone. You'd need a server-side handler to connect with the SMTP server to actually send the mail.

Read details in this thread:

How to send email by using javascript or jquery

Rayon · Answer 2 · 2016-04-05T04:55:47.133

You are not setting action attribute. Use FORMELEMENT.action to set the action property.

Note: Place your script as a last child of the body or inside window.onload hander otherwise it will not be accessible by DOM API

Edit: To update action attribute on every change event, use .addEventListener('change'

var setActionValue = function(value) {
  var mailpre = ("MAILTO:" + value + "@cmputers.ca");
  document.getElementById('contact').action = mailpre;
  alert(document.getElementById('contact').action);
};
document.getElementById('cusub').addEventListener('change', function() {
  setActionValue(this.value);
});
setActionValue(document.getElementById('cusub').value);

<form action=mailpre method="post" enctype="text/plain" autocomplete="on" id="contact">
  <fieldset>
    <legend>Contact Information</legend>
    Name:
    <br>
    <input type="text" name="clientname" autofocus required>
    <br>E-mail:
    <br>
    <input type="email" name="clientemail" required>
    <br>Telephone Number:
    <br>
    <input type="text" name="clientphone">
    <br>
  </fieldset>
  <fieldset>
    <legend>Subject</legend>
    <select id="cusub" name="subject">
      <option value=""></option>
      <option value="booking">Booking An Appointment</option>
      <option value="support">Technical Support</option>
      <option value="feedback">Feedback</option>
    </select>
    <br>
    <textarea name="message" rows="10" cols="30"></textarea>
    <br>
    <input type="submit" value="Send">
  </fieldset>
</form>

Demo

Pulling the value of a form "select" and use it in the "action" of the form

2 Answers2