How do I add HTML form data to a mailto link - javascript

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>

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>

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

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

Related

Alert return url path while alert variable in jquery

<script>
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
key = $('#myInput').val();
location = $('#location').val();
alert(key);
alert(location);
});
});
</script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs" type="submit"><i class="la la-search"></i></button>
</div>
In this question I have create an autocomplete which is working fine. Now, what am I doing here? When I click on search-jobs it alert myInput value then alert url path like http://localhost/jobportal/index.php then redirect me on other page and url of other page is like localhost/jobportal/noida where noida is location. I don't know what is the problem is this? Please help me.
Thank You
since your variable location is not defined inside the function, it is hoisted on top in window scope. So your location variable is actually window.location, to which you are providing a value. Simple solution is try changing the name of variable or defining it inside the function with let var or const.
It is because you did not declare your variables properly.
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
let key = $('#myInput').val();
let location = $('#location').val();
alert(key);
alert(location);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs" type="submit"><i class="la la-search"></i>test</button>
</div>
</form>
let key = $('#myInput').val();
let location = $('#location').val();
try this code, here I have also updated the url with the url you have given in the description like "localhost/jobportal/noida"
<script>
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
key = $('#myInput').val();
alert(key);
loc = location.host;
newloc = loc+"/jobportal/"+$('#location').val();
alert(newloc);
return false
});
});
</script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs"><i class="la la-search"></i></button>
</div>

addEventListener with a form element

I'm new with Javascript and I'm learning by myself. I have a problem with a form on my page. I just want to test with a simple javascript code that I can manipulate my input "type=submit" by adding a function to it to console.log a string when the form is submitted (I watched it on a video and I wanted to do it by myself).
Here is my code:
(function() {
"use strict";
document.getElementById('enviar').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
and this is my HTML code:
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>
The problem that I'm having here is that is not working at all.. my ID element is selected properly but I don't know what is wrong with my code. I created a variable and console my ID selected to see if I was getting the right element from the DOM and I'm getting in the console the right input element. please if someone knows why is not working.
plus: On my text input field I have a regular expression but I'm not getting the output I want.. the goal is that the user has to write at least two names (First and Last), so when they write just one it will be incorrect.. the problem that I'm having with this regular expression if when someone writes more than two names (First, Middle and Last) I DON'T want to make that an incorrect answer because technically is correct. So I need to make a better regular expression to get that result (when the user writes two or more names, not just two) but I don't know too much about Regular Expressions.
You are getting the element with the id enviar which is the submit button element. You need to be querying based on the form's element id which is escribenos. Try running the snippet below and you can see that it has the expected outcome.
(function() {
"use strict";
document.getElementById('escribenos').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>

Cant get the text value from input text

when i try to get the text value from the input text, the value returned is "undefined". This function return: "username: undefined" and my input text have a value.
this.loadForm = function() {
$("#response-container").load("formLogin.php", function() {
$("#formLogin").submit(function(event) {
var user = $("#username").val();
alert("username: "+user);
event.preventDefault();
});
});
}; //END loadForm FUNCTION
formLogin.php
<form id="formLogin" method="get" action="20.html">
USERNAME:
<br>
<input type="text" name="username" />
<br> PASSWORD:
<br>
<input type="password" name="password" />
<br>
<br>
<input type="submit" value="Log in" name="login" id="btnInputLogin" onsubmit="return false" />
</form>
Check Your Selector
You need to use an id attribute if you are using the $('#id') syntax in jQuery as the # indicates that you are explicitly targeting an element with the id attribute that follows the # character:
<input type="text" id='username' name="username" />
If you want to reference something by a name, you would need to use an attribute equals selector to explicitly target the name attribute :
var user = $('[name="username"]').val();
There is no input with #username. Either add that id attribute or use
$('input[name="username"]')
Replace:
<input type="text" name="username" />
To
<input type="text" name="username" id="username"/>
Looks like your jquery here: $("#username").val(); is trying to get an id that doesn't exist.
You could add an id to the password input <input id="password"> which should work.
Or you can get it with the current name $('[name="password"]').val()

How to write validation for below code in jQuery?

Here, In my code First name and Last name fields placed side by side how to write a validation for that 2 fields i tried but am not getting correct.I attached image and my code below
jQuery code:
jQuery(function(){
jQuery("#fName").validate({
expression: "if (VAL.match(/^[a-zA-Z]{2,30}$/)) return true; else return false;",
message: "Please enter the First Name Last Name"
});
});
signup.html
<div class="form-fullname">
<input class ="first-name"type="text" id="fName" name="firstname" placeholder="First name" required="">
<input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" required="">
</div>
The full page is an error image.
Error:
in this signup form when am entered numbers in first name it should show error message at below, but it is showing beside first name as shown in picture. So can you tell me how can i get error message in below.
Try to add the regex on input tag Instead:
<form action="register_page">
<div class="form-fullname">
<input class ="first-name" type="text" id="fName" name="firstname" placeholder="First name" pattern="^\w{2,30}$" required>
<input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" pattern="^\w{2,30}$" required>
</div>
<input type="submit" value="Register">
</form>
Note that you can use \w on regex instead of [a-zA-Z]. This way you don't need jquery validation in this case.
You can use test function on the regular expression in JavaScript to know whether the input is in valid format.
Use css function to display or hide the error messages.
If you want to show error for first name field when last name field is focused you can write an on focus event in jQuery.
$(document).ready(function () {
var NAME_REGEX = /^[a-zA-Z]{2,30}$/;
$('#signupBtn').click(signupBtnClick);
$('input[name="lastname"]').focus(lastNameOnFocus);
function signupBtnClick() {
validateFirstName();
validateLastName();
}
function lastNameOnFocus() {
validateFirstName();
}
function validateFirstName() {
var firstName = $('input[name="firstname"]').val();
if(NAME_REGEX.test(firstName)) {
$('#firstnameerror').css('display', 'none');
} else {
$('#firstnameerror').css('display', 'block');
}
}
function validateLastName () {
var lastName = $('input[name="lastname"]').val();
if(NAME_REGEX.test(lastName)) {
$('#lastnameerror').css('display', 'none');
} else {
$('#lastnameerror').css('display', 'block');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<h3>Sign Up</h3>
</div>
<div>
<input type="text" name="firstname" placeholder="First Name">
<span id="firstnameerror" style="color: red; display: none;">First Name is required</span>
</div>
<div style="margin-top: 1%;">
<input type="text" name="lastname" placeholder="Last Name">
<span id="lastnameerror" style="color: red; display: none;">Last Name is required</span>
</div>
<div style="margin-top: 2%;">
<button type="button" id="signupBtn">Submit</button>
</div>

Issue with javascript retrieve form data for url

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}
Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

Categories