I am very new to programming. I would like to add a phone number and text message to the below code using values from text boxes, How to do that? Pls see the code below. in the user interface I need two text boxes and a send button. Send button will trigger this below code.
<a href="sms://+15552345678?body=Hello,%20World">Phone(+1) and ?body (sms://)
If you’re on a supported mobile platform, you can try this way:
Send a SMS message
<input type="text" id="phone" placeholder="Type Phone" />
<input type="text" id="msg" placeholder="Type Message" />
<script>
var PhoneNumber = document.getElementById("phone")
var Msg = document.getElementById("msg")
function handleSendMsg() {
document.getElementById("btn").onclick = function () {
this.href = "sms:" + PhoneNumber.value + "?body=" + encodeURI(Msg.value);
// console.log(btn)
};
}
</script>
Related
I'm new to HTML/CSS and have created a simple contact form to enter a name, number, and have a populated textarea with a short message but would like to automatically populate the name area within the text field with whatever was put into the name's input field previously in the contact form. What is the best way to do this?
<fieldset>
<h1>Contact Form</h1>
<label for="name">Patient Name:</label>
<input name="name" id="name" type="text" size="40" maxlength="100">
<label for="number">Patient Number:</label>
<input name="number" id="number" type="text" size="40" maxlength="12">
<label for="message">Text Messge:</label>
<textarea name="message" id="message" cols="40" rows="10">
Hi [name], thank you for visiting us!
</textarea>
<input class="btn" name="submit" type="submit" value="Send">
</fieldset>
Some JavaScript should solve your problem.
Insert this script tag into your HTML file after the form.
<script>
// save the location of the name field
var name_field = document.getElementById('name');
//add an event listener to activate if the value of the field changes
name_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = name_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>
For dynamic behavior you are gonna need some javascript.
<input name="number" id="number" type="text" oninput="getNumber()" size="40" maxlength="12">
<script>
var getNumber = function() {
document.getElementById("message").innerHTML = "Hi " + document.getElementById("name").value + ", thank you for visiting us";
}
</script>
And as it looks right now, you probably shouldn't be using a textArea to display this message, rather use a paragraph element.
AngularJS is perfect for a scenario like this if you are more interested.
A customer of ours has a register.html page with a very simple form that allows users to enter their details for registration to the clients website.
The form action is set to "mailto:clientsemail.client.com?subject=subject". The enctype of the page is set to text/plain and the method is post.
What should happen is that the users email client opens with a new email, with the subject set and the forms text boxes posted into the body of the form. Then the website visitor can simply send the email.
It's not very elegant I know, but its how they have it set up.
Now, this all works as expected and sends a rather clunky looking email to the correct address using the web visitors email client, but only in Firefox, chrome and opera. Safari bugs out completely, and internet explorer opens the email client and populates the address and subject fields, but the form inputs are not copied to the body.
Does anyone know why this is? its driving me nuts. Been looking at it all day and every post I find on the subject states its setup correctly and should work. Theres no mention of it not working in IE.
mailto: form actions depend on browsers and local email clients playing together nicely. They do this so rarely that mailto: form actions are unusable on the WWW.
Replace it with a server side program that sends the email.
The mailto tag should only accept the following parameters:
cc=name#email.com carbon copy e-mail address
bcc=name#email.com blind carbon copy e-mail address
subject=subject text subject of e-mail
body=body text
All other input parameters are discarded (i.e. FirstName, LastName, etc...)
As a workaround, you can add a hidden body input to the form, and populate it with whatever text you want in the submit event.
Example:
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function beforeSubmit() {
var firstName = document.getElementById("FirstName");
var lastName = document.getElementById("LastName");
var body = document.getElementById("body");
body.value = firstName.value + lastName.value;
}
</script>
<form action="mailto:me#myemailaddress.com" enctype="text/plain" onsubmit="beforeSubmit()">
<input name="Subject" id="Subject" type="text" value="" /><br/>
<input name="FirstName" id="FirstName" type="text" value="" /><br />
<input name="LastName" id="LastName" type="text" value="" /><br />
<input name="body" id="body" type="hidden" value="" /><br />
<input name="Submit" id="submit" type="submit" value="Submit" /><br/>
<input name="Reset" id="Reset" type="reset" value="Reset" /><br />
</form>
</body>
For some reason IE doesn't like this POST form to email option (works at FF and Chrome)
You should do something like that:
function sendFormToEmail() {
var inputs = $('#infoForm :input');
var bodyStr = "";
inputs.each(function(index, value) {
bodyStr += value.name + " = " + value.value + " , ";
});
window.location = "mailto:Example#gmail.com?subject=subject&body=" + bodyStr;
}
and in your form:
<input type="button" class="button" value="Send Information" onclick="sendFormToEmail()" />
Hi I have created a pop up window containing a form asking the user to enter email and password.And there is a log in button.Usually in most of the forms, after entering all details and pressing 'enter', the submit button will be automatically clicked.But in this case,only when I click the login button it works.I want it to work on pressing 'enter' in keyboard.I know that this is a simple question.But I can't figure it out why is this happening.Please help me
Here is my userinfo.html(pop up window)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<b>Enter your Email ID and Password</b><br><br>
<form id="userinfo">
<label for="user"> Email : </label>
<input type="text" id="user" /><span id="semail"></span>
<br><br>
<label for="pass">Password : </label>
<input type="password" id="pass" />
<br>
<br>
<input type="button" id="login" value="Log In"/>
</form>
</body>
</html>
Here is my test.js
window.addEventListener('DOMContentLoaded', function() {
var user = document.querySelector('input#user');
var pwd = document.querySelector('input#pass');
var login = document.querySelector('input#login');
login.addEventListener('click', function() {
var userStr = user.value;
var pwdStr = pwd.value;
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage.login(userStr,pwdStr); });
window.close();
});
});
In order for a submit event to be triggered on ENTER the form must have a submit button.
In your particular case, you need to revent the default behaviour of your form, since you want to handle it "manually" using the background-page.
In summary, the following steps are required:
Change the button type from button to submit.
Register a listener for the form's submit event. (Note: this will be triggered on both button-click and ENTER.)
Prevent the default behaviour on form-submit.
Delegate the login-handling to the background-page (through its login method.
Here is the new code:
test.html
<h4>Enter your Email ID and Password</h4>
<form id="userinfo">
<label for="user">E-mail: </label>
<input type="text" id="user" required />
<br />
<label for="pass">Password: </label>
<input type="password" id="pass" required />
<br />
<br />
<input type="submit" id="login" value="Log In" />
</form>
test.js
window.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('form#userinfo');
var user = document.querySelector('input#user');
var pass = document.querySelector('input#pass');
/* Register a listener on the form's `submit` event */
form.addEventListener('submit', function (evt) {
/* Prevent the event from being handled by the browser */
evt.preventDefault();
var userStr = user.value;
var passStr = pass.value;
/* Delegate login-handling to background-page */
chrome.runtime.getBackgroundPage(function (bgPage) {
bgPage.login(userStr, passStr);
});
window.close();
});
});
See, also, this short demo.
I have the following:
<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />
When I enter just one character I get a message saying:
"Please match the requested format"
Is there a way I can customize this message to say something like "Please enter at least 5 characters"
You can do a quick and dirty way with this trick:
<form>
<label for="username">Username:</label><br/>
<input id="username" type="text" pattern=".{6,}" autofocus required title="Please enter at least 5 characters">
<input id="submit" type="submit" value="create">
</form>
Use: setCustomValidity
First function sets custom error message:
$(function(){
$("input[name=Password]")[0].oninvalid = function () {
this.setCustomValidity("Please enter at least 5 characters.");
};
});
Second function turns off custom message. Without this function custom error message won't turn off as the default message would:
$(function(){
$("input[name=Password]")[0].oninput= function () {
this.setCustomValidity("");
};
});
P.S. you can use oninput for all input types that have a text input.
For input type="checkbox" you can use onclick to trigger when error should turnoff:
$(function(){
$("input[name=CheckBox]")[0].onclick= function () {
this.setCustomValidity("");
};
});
For input type="file" you should use change.
The rest of the code inside change function is to check whether the file input is not empty.
P.S. This empty file check is for one file only, feel free to use any file checking method you like as well as you can check whether the file type is to your likes.
Function for file input custom message handling:
$("input[name=File]").change(function () {
let file = $("input[name=File]")[0].files[0];
if(this.files.length){
this.setCustomValidity("");
}
else {
this.setCustomValidity("You forgot to add your file...");
}
//this is for people who would like to know how to check file type
function FileType(filename) {
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
}
if(FileType(file.name)!="pdf"||FileType(file.name)!="PDF"){
this.setCustomValidity("Your file type has to be PDF");
//this is for people who would like to check if file size meets requirements
else if(file.size/1048576>2){
// file.size divided by 1048576 makes file size units MB file.size to megabytes
this.setCustomValidity("File hast to be less than 2MB");
}
else{
this.setCustomValidity("");
}
});//file input custom message handling function
HTML5 form required attribute. Set custom validation message?
JSFiddle: http://jsfiddle.net/yT3w3/
Non-JQuery solution:
function attachHandler(el, evtname, fn) {
if (el.addEventListener) {
el.addEventListener(evtname, fn.bind(el), false);
} else if (el.attachEvent) {
el.attachEvent('on' + evtname, fn.bind(el));
}
}
attachHandler(window, "load", function(){
var ele = document.querySelector("input[name=Password]");
attachHandler(ele, "invalid", function () {
this.setCustomValidity("Please enter at least 5 characters.");
this.setCustomValidity("");
});
});
JSFiddle: http://jsfiddle.net/yT3w3/2/
I'd add another attribute oninvalid.
oninvalid="setCustomValidity('Please enter at least 5 characters')"
<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" oninvalid="setCustomValidity('Please enter at least 5 characters')"/>
I found that, chrome at least, adds to the message the title of the input automatically, so no extra js is required, see this:
the input looks like this:
<input type="text" title="Number with max 3 decimals" pattern="^\d+(\.\d{1,3})?$">
It is very simple without javascript or jQuery validation. We can achieve it by HTML5
Let suppose we have HTML field:
<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />
Just change the HTML as
<input required pattern=".{6,}" class="big medium-margin" title="Please enter at least 5 characters." name="Password" placeholder="Password" size="25" type="password" />
If you observe, just add title = "Error message"
Now whenever form will be post, the given messages will be appeared and we did not need JavaScript or jQuery check.
This solution works for me.
I simply use oninvalid to set the custom validty error message and then use onchange to reset the message so the form can submit.
<input type="number" oninvalid="this.setCustomValidity('Please enter an INTEGER')" onchange="this.setCustomValidity('')" name="integer-only" value="0" min="0" step="1">
You'd need to use the setCustomValidity function. The problem with this is that it'd only guarantee a custom message for users who have JavaScript enabled.
<input required pattern=".{6,}" ... oninput="check(this)">
^^^^^^^^^^^^^^^^^^^^^
function check (input) {
if (input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0) {
// Input is fine. Reset error message.
input.setCustomValidity('');
} else {
input.setCustomValidity('Your custom message here.');
}
}
https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/
<input id="gfg" type="number" min="101" max="999" required>
<button onclick="myFunction()">Try it</button>
<p id="geeks"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("gfg");
if (!inpObj.checkValidity()) {
document.getElementById("geeks")
.innerHTML = inpObj.validationMessage;
} else {
document.getElementById("geeks")
.innerHTML = "Input is ALL RIGHT";
}
}
</script>
I am trying to create a very simple form with a little bit of extra code to get the results as described below: the problem is I don't know how to go about doing it.
What I am trying to achieve:
I have a form which has one text input box with the name 'url'. I want the user to be able to input a number into the box. When the user submits the form they should be redirected to a new website. The new website's URL will be based on the number inputted into the form.
The first part of the URL will always be: http://name.com/
Then the number that the user inputted will be attached to the end. So if 123456 is entered into the form then on submission of the form the user would be taken to http://name.com/123456
How can I get this working? I am guessing it will require JavaScript or something.
<script>
function process()
{
var url = "http://name.com/" + document.getElementById("url").value;
location.href = url;
return false;
}
</script>
<form onSubmit="return process();">
URL: <input type="text" name="url" id="url">
<input type="submit" value="go">
</form>
You can add onsubmit="this.action='http://google.com/'+this.fieldName.value;" to your tag.
This should do it:
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://name.com/" + page;
}
</script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />