How do I add HTML form data to a mailto link

问题

I am trying to create a form that allows the user to type their first and last name, then submit it. I want to take the first and last name they entered and put that data in a mailto link. The code below is what I have. What am I doing wrong?

<div class="form">
    <form>
        <input type="text" name="firstname" placeholder="First Name">
        <input type="text" name="lastname" placeholder="Last Name">
        <button type="submit" class="submit" onclick="submitForm()"><i class="material-icons md-24">play_circle_filled</i></button>
    </form>
    <script>
    function submitForm{
        var fname = get.getElementsByName("firstname").value;
        var lname = get.getElementsByName("lastname").value;
        window.open("mailto:someone@example.com?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname"");
    }
    </script>
</div>

回答1:

Try this

function submitForm(form) {
  window.open("mailto:someone@example.com?subject=Test%20Email&body=First%20Name:%20" + form.firstname.value + "%20Last%20Name:" + form.lastname.value);
  return false; /* cancel submit or else page reloads */
}

<form onsubmit="return submitForm(this);">
  <input type="text" name="firstname" placeholder="First Name" />
  <input type="text" name="lastname" placeholder="Last Name" />
  <button type="submit" class="submit"><i class="material-icons md-24">play_circle_filled</i></button>
</form>

BTW, below are mistakes in your code.

:"+lname""); /*unwanted "" at the end*/

Here, you have multiple corrections:

get.getElementsByName("firstname").value

It is not get. instead it is document., also getElementsByName() will return you NodeList instead of just one HTML Element, so likewise you will need to use index, so you end up with document.getElementsByName("firstname")[0].value

回答2:

First, you forgot the parenthesis after the functions name (like Erl V stated). Funktions always have these parentheses. You can use them, to give the functions parameters. Read more about functions here.

Second, you forgot a plus sign in the concatenated string of the window.open parameter. I removed the last part, cause it was unnecessary.

Third, you was using get.getElementsByName("firstname").value instead of document.getElementsByName("firstname")[0].value.

This is tested and should work:

<form>
    <input type="text" name="firstname" placeholder="First Name">
    <input type="text" name="lastname" placeholder="Last Name">
    <button type="submit" class="submit" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm(){
    var fname = document.getElementsByName("firstname")[0].value;
    var lname = document.getElementsByName("lastname")[0].value;
    window.open("mailto:someone@example.com?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname);
}
</script>

回答3:

Edited: Cleaned your javascript

function submitForm(){
    var fname = document.getElementsByName("firstname").value;
    var lname = document.getElementsByName("lastname").value;
    window.open("mailto:someone@example.com?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname);
}

来源：https://stackoverflow.com/questions/52637406/how-do-i-add-html-form-data-to-a-mailto-link

标签

javascript

html

forms