Create mailto from form with custom fields - javascript

I have a HTML form with 3 fields (Name, E-Mail and Message) and I want to create a custom mailto with this 3 fields but I don't want create a fixed content like this:
Send a mail
Is this possible? If it isn't, do I have another way to do a simple formulary? My page is a landing page and only have HTML, CSS and some JavaScript (Bootstrap too).
--- Edit ---
I found this, for example: http://www.techrepublic.com/article/set-up-an-html-mailto-form-without-a-back-end-script/
But it write too much information in the body, the result is literal:
Name=Your name
E-mail=mail#company.com
Comment=Testing textarea
Submit=Submit

I can answer myself, after a deep search I could fix my problem.
JavaScript:
function sendMail() {
var name = $('#contact #name').val();
var email = $('#contact #email').val();
var message = $('#contact textarea').val();
window.location.href = 'mailto:mail#company.com?subject=The subject - ' + name + ' (' + email + ')' + '&body=' + message;
};
HTML:
<form>
<input type="text" id="name" name="name" >
<input type="email" id="email" name="email">
<textarea rows="5"></textarea>
</form>
<button type="submit" class="btn btn-primary" onclick="sendMail()">Button Text</button>
We can't use a submit input, because window.location.href doesn't work with it; we need to use a button who will run a function.
And it's all, very simple :)

Related

How to add values from previous input to textarea

I am trying to add values from 2 of my inputs to the text area. I was able to find a solution to grab one of the inputs and hope someone can help me find a way to get another one. Also, is there a way to grab another element from the page for example php echo of student's first name?
Please see the picture
I would like this to say "Hey, student_first_name, my name is last_name from university_name, let's connect.
This is the code I have
<script>
// save the location of the name field
var message_field = document.getElementById('university');
var last_name_field = document.getElementById('last_name');
//add an event listener to activate if the value of the field changes
message_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = message_field.value;
// concatenate it with the desired message
var autoFill = 'Hi ' + name + ', thank you for visiting us!';
// and paste it into the message field.
document.getElementById('message').value = autoFill;
})
</script>
<script>
// save the location of the name field
var university = document.getElementById('university_name').value;
var last_name = document.getElementById('last_name').value;
var first_name = document.getElementById('student_first_name').value;
//add an event listener to activate if the value of the field changes
message_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = message_field.value;
// concatenate it with the desired message
var autoFill = autoFill + university;
autoFill = autoFill + last_name;
autoFill = autoFill + first_name;
// and paste it into the message field.
document.getElementById('message').value = autoFill;
})
</script>
it's a little bit confuse your HTML code, but i did an HTML code and adjusted your javascript code, I hope this helps you.
PS.: You can always group your inputs and textareas inside a FORM tag
https://www.w3schools.com/html/html_forms.asp
var form = document.getElementById("myForm");
form.addEventListener("input", function () {
var name = document.getElementById('name').value;
var lastName = document.getElementById('last_name').value;
var university = document.getElementById('university').value;
document.getElementById('message').value = 'Hey, ' + name + ', my name is ' + lastName + ' from ' + university + ', let\'s connect'
});
<form id="myForm">
<div>
<input type="text" placeholder="First Name" id="name">
</div>
<div>
<input type="text" placeholder="Last Name" id="last_name">
</div>
<div>
<input type="text" placeholder="University Name" id="university">
</div>
<div>
<input type="text" placeholder="Phone Number" id="phone">
</div>
<div>
<input type="email" placeholder="Email address" id="email">
</div>
<div>
<textarea name="Message" id="message" cols="30" rows="10" placeholder="Message (optional)"></textarea>
</div>
</form>

User input to build URL

I have a bit of experience with HTML but am very new to JavaScript. In essence, I would like for a user input to be part of a URL. For example, we could have something simple such as:
<script>
function get_cityname() {
var cityname = document.getElementById("cn").value;
alert(cityname);
}
</script>
<form>
Enter city name:
<input type = "text" size = "12" id = "cn">
<input type = "submit" onclick = "get_cityname();">
</form>
This will create a textbox where a user inputs their text (city name) and then click the 'submit' button next to it, and an alert should pop up based on the information they provided, just to make sure this works. However, this code only would seem to work (because of the 'onclick' command) to work for one user input. Therefore, I have 2 questions:
How could the above variable be included in a URL string? If it were something simple as:
URLstring = "https://sampleurl" + cityname + "moretext.html"
How could this be expanded if I want to include two or possibly even n number of inputs? For example, if I create more user prompt boxes and want to have the user also be able to input their zipcode, or state abbreviation, for example:
URLstring = "https://sampleurl" + cityname + "moretext" + zipcode + "moretext" + "stateabbreviation.html"
You could do something along these lines (it would be the same for one or more fields):
// Ensures the DOM (html) is loaded before trying to use the elements
window.addEventListener('DOMContentLoaded', function() {
var cnInput = document.getElementById("cn"),
zipInput = document.getElementById("zip"),
form = document.getElementById("myForm");
form.addEventListener('submit', getUrl); // On submit btn click, or pressing Enter
function getUrl(e) {
var cityname = cnInput.value,
zipcode = zipInput.value,
url = "https://sample.com/" + cityname + "/" + zipcode + ".html";
alert(url);
e.preventDefault(); // Prevent the form from redirecting?
}
});
<form id="myForm">
<label>Enter city name: <input type="text" size="12" id="cn"></label>
<label>Enter zip code: <input type="text" size="12" id="zip"></label>
<input type="submit">
</form>
First specify an action attribute for your form. This is where your form will be submitted. Then set your form's method attribute to GET. Finally, add as many fields as you like (I am assuming you are after a GET query such as https:url.com?key1=val1&key2=val2...):
<form method="GET" action="https://sampleurl">
Enter city name:
<input type="text" size="12" id="cn">
Enter zip code:
<input type="text" pattern="[0-9]{5}"
<input type="submit" ">
</form>

How to redirect users based on what they type in an input?

I have a form like this:
<form method="POST">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
And I want users to be redirected to a URL based on what they wrote in the URL input when they click the submit button.Is it possible?
Like this
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
var url = this.url.value;
if (url) location=url;
return false;
}
}
using
<form id="form1">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
You can check out the window.location for this specific case. You can throw any string in there and the browser will redirect to that page.
EDIT:
You do not need a whole form for that. The form is used to send data to the server - the thing you want here is client-sided and does not require a form. You can use a simple input field with a simple button that fires a bit of javascript code.
Yes jane it is possible. You can do that by javascript or php.
example on javascript:
// Put an id on your form and change the id below accordingly
var idForm = 'form';
var form = $('#' + idForm);
form.submit(function(e) {
e.preventDefault();
var redirectTo = form.find('input').val();
switch(redirectTo) {
case "INPUT_VALUE_EXAMPLE":
window.location = 'YOUR URL HERE';
break;
case "google"
window.location = 'http://www.google.com'
break;
}
});

How can I get text from a user using Google Spreadsheet?

I am trying to create an automatic mailing system for a Google Spreadsheet.
I want to create a menu button that the user can press and get a dialog box with a big (paragraph-size) textbox to write his message in.
My problem is creating the right instance to be able to pass the user text input:
I tried using Browser.inputBox("title"), but this only generates a 1-line text box.
I tried using the SpreadsheetApp.getUi().prompt method, but again this only generates a 1-line text box.
Any ideas on what class/method I should be using to be able to get the user's text message?
EDIT
here is another go, this time using shoeModalDialog() and html code.
i think its pretty close, but not working yet. Thoughts?
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('testHTML')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(600)
.setHeight(400);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
}
function jsGetText(text) {
//do something with the string object
}
<script>
function mySuccessFunction(textBox) {
jsGetText(textBox.value)
}
</script>
<form method="post" >
<textarea name="textBox" id="textBox" cols="60" rows="20" class="html-text-box"></textarea><br>
<input type="submit" value="send" class="html-text-box" onclick="google.script.run.withSuccessHandler(mySuccessFunction).withUserObject(document.getElementById('textBox')); google.script.host.close()">
<input type="reset" value="cancel" class="html-text-box" onclick="google.script.host.close()">
</form>
The showDialog function looks good. Don't put all the code into the onClick() attribute. Remove method="post" from the form tag. You don't want to send a POST request in this situation. Use Logger.log() statements, and console.log() statements, and constantly be checking the Execution Logs for server errors.
Code.gs
function jsGetText(text) {
Logger.log('text: ' + text);
Logger.log('text.length: ' + text.length);
for (var key in text) {
Logger.log('key: ' + key);
Logger.log('value: ' + text[key]);
};
var objFieldOne = text['textBox'];
Logger.log('objFieldOne: ' + objFieldOne);
//do something with the string object
return objFieldOne;
};
testHTML.html
<script>
function fncGetUserTxt() {
var objUsrInput = document.getElementById('idInputForm');
/* for (var key in objUsrInput) {
console.log('key: ' + key);
console.log('value: ' + objUsrInput[key]);
};
*/
google.script.run
.withSuccessHandler(mySuccessFunction)
.jsGetText(objUsrInput);
//google.script.host.close()
};
function mySuccessFunction(textBox) {
alert('Success! : ' + textBox);
};
</script>
<form id='idInputForm'>
<textarea name="textBox" id="textBox" cols="60" rows="20" class="html-text-box"></textarea><br>
<input type="submit" value="send" class="html-text-box" onmouseup='fncGetUserTxt()'>
<input type="reset" value="cancel" class="html-text-box" onclick="google.script.host.close()">
</form>

how do i get the info from a form using javascript?

i have a form which user enters some data, could be checkboxes, radio buttons, textfields, etc
when user click submit button, i want to refresh the page with whatever data that was entered
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body id="ref">
<form>
Please enter your name:<input type="text" id="name" />
Please enter your age:<input type="text" id="age" />
</form>
<input type="button" onclick="c()" value="submit">
<script type="text/javascript">
function c()
{
var o = document.getElementById('ref');
o.innerHTML = '';
var n = document.createElement('p');
var nam = document.getElementById('name');
n.innerHTML = "Your name is: " + nam;
o.appendChild(n);
var a = document.createElement('p');
var ag = document.getElementById('age');
a.innerHTML = "Your age is: " + ag;
o.appendChild(a);
//how do i get the info from the form? because both nam and ag are coming up null
}
</script>
</body>
</html>
my guess this is not working is because the page refreshes then tries to fetch the element by id which is not there anymore.. whats the correct way of doing this??
You're confusing objects with their properties. Here, you're getting the HTMLInputElement instance for the "age" field:
var ag = document.getElementById('age');
But here you're using that object as though it were a simple value:
a.innerHTML = "Your age is: " + ag;
The HTMLInputElement object has a value field you can use for that:
a.innerHTML = "Your age is: " + ag.value;
Separately, you're completely destroying the page by doing this:
var o = document.getElementById('ref');
o.innerHTML = '';
...because you've given the body element the ID "ref". Completely replacing the body element completely replaces the body element, so you can't rely on objects that only exist as subordinates of that element.
The usual thing is to have an element to fill in, and (optionally) to remove the elements you no longer need. For instance (live copy):
HTML:
<form id="theForm">
Please enter your name:<input type="text" id="name" />
Please enter your age:<input type="text" id="age" />
<input type="button" onclick="c()" value="submit">
</form>
<div id="result">
</div>
(Note I moved the button into the form for convenience.)
JavaScript:
function c() {
var form = document.getElementById("theForm"),
nameField = document.getElementById("name"),
ageField = document.getElementById("age"),
result = document.getElementById("result");
form.parentNode.removeChild(form);
result.innerHTML =
"Your name is " + nameField.value +
" and your age is " + ageField.value;
}
There, when the button is pressed, I remove the form and fill in the "result" div.
You could add the "result" div dynamically if you wanted (live copy):
HTML:
<form id="theForm">
Please enter your name:<input type="text" id="name" />
Please enter your age:<input type="text" id="age" />
<input type="button" onclick="c()" value="submit">
</form>
JavaScript:
function c() {
var form = document.getElementById("theForm"),
nameField = document.getElementById("name"),
ageField = document.getElementById("age"),
result;
result = document.createElement("div");
result.innerHTML =
"Your name is " + nameField.value +
" and your age is " + ageField.value;
form.parentNode.insertBefore(result, form);
form.parentNode.removeChild(form);
}
You can access the fields using a briefer and somewhat more natural syntax if you change your id values to name values instead (live copy):
HTML:
<form name="theForm">
Please enter your name:<input type="text" name="name" />
Please enter your age:<input type="text" name="age" />
<input type="button" onclick="c()" value="submit">
</form>
JavaScript:
function c() {
var form = document.theForm,
nameField = form.name,
ageField = form.age,
result;
result = document.createElement("div");
result.innerHTML =
"Your name is " + nameField.value +
" and your age is " + ageField.value;
form.parentNode.insertBefore(result, form);
form.parentNode.removeChild(form);
}
Further reading:
DOM2 Core (well-supported by most modern browsers)
DOM2 HTML
DOM3 Core (increasingly supported)
If you want to update your html using java-script only , you may use ".value" attribute of the input;
var a = document.createElement('p').value;
var ag = document.getElementById('age').value;
Usually the Form information is processed using server-side code , this is done by specifying the action attribute of the form:
<form action="processuserinfo.aspx">
...
</form>
I'm pretty sure this isn't doable javascript alone. You'll need to use a server-side language like php. Try to google php forms, and you should get some good results. :)

Categories