CODEWITHSUNDEEP
javascripthtmlforms
kevinuulong
kevinuulong

Reputation: 550

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:[email protected]?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname"");
    }
    </script>
</div>

Upvotes: 0

Views: 3045

Answers (3)

Jan
Jan

Reputation: 458

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:[email protected]?subject=Test%20Email&body=First%20Name:%20"+fname+"%20Last%20Name:"+lname);
}
</script>

Upvotes: 2

user2575725
user2575725

Reputation:

Try this

function submitForm(form) {
  window.open("mailto:[email protected]?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

Upvotes: 2

Erlisar Vasquez
Erlisar Vasquez

Reputation: 460

Edited: Cleaned your javascript

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

Upvotes: 1

Related Questions