I need help, I am new to HTML5. I build a HTML5 web form and try to use mailto function to send out. But when I try to do it on my android device with chrome browser, it shows:
Webpage not available
Anyone can help ?
<form method="post" action="mailto:myname#gmail.com" enctype="text/plain">
<p>
<label for ="firstname" class="text">First Name:</label>
<input type="text" name="firstname" id="firstname" />
</p>
<p>
<label for ="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" />
</p>
<p>
<label for ="hkid">HK Identity Card:</label>
<input type="date" name="dob" id="dob" />
</p>
<p>
<label for="sex" class="select">Sex:</label>
<select name="sex" id="sex" data-native-menu="false">
<option value="option1">Male</option>
<option value="option2">Female</option>
</select>
</p>
<p>
<label for="mobile"> Mobile:</label>
<input type="tel" name="mobile" id="mobile" />
</p>
<p>
<label for="hometel">Resident Phone:</label>
<input type="tel" name="hometel" id="hometel" />
</p>
<p>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" />
</p>
<p>
<label for ="date">Appointment Date(DD-MM-YYYY)</label>
<input type="date" name="date" id="date" value="" />
</p>
<p>
<label for="session" class="select">Session :</label>
<select name="session" id="session" data-native-menu="false">
<option value="option1">AM</option>
<option value="option2">PM</option>
</select>
</p>
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</form>
mailto: as a form action simply is not well supported.
Use an HTTP(S) form action and send the email from your server instead of the user's (possibly non-existent) email client.
The solution is to use the control panel and go to folder options.
Open the "File Types" tab.
There find the entry "URL: MailTo Protocol" ... highlight it and click "advanced".
Now highlight "open" and click "edit".
You will probably find outlook express as the mailto program.
Change "application to use" as follows:
"C:\Documents and Settings\HP_Administrator\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" https://mail.google.com/mail?extsrc=mailto&url=%1
The path within the quote marks is whatever is the correct path on your machine to chrome.exe.
The Application: chrome
That's it.
Related
I'm making a signup page using HTML and javaScript and it was working fine until I added a function to take the user to the next page, the problem is, if the textboxes where blank and I click on the button, it sends him to the next page instead of showing a validation error to fill them out.
here is the code of the function:
function signup() {
window.location.replace("file:///C:/Users/hb/Desktop/web%20project/afterlogin.html");
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
here is the html code for the form:
<form method="post" class="info">
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<p>
<label for="password" required> Password:</label>
<input type="password" id="password" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="confirmpass">Confirm password:</label>
<input type="password" id="confirmpass" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="gender">Gender:</label>
<select id="gender">
<option id="male"> Male </option>
<option id="female"> Female </option>
</select><br /><br />
</p>
<p>
<label for="age">Age:</label>
<select id="age">
<option id="young">Young(12-18 years old) </option>
<option id="youth">Youth(19-40 years old) </option>
<option id="old">Old(more than 40 years) </option>
</select><br /><br />
</p>
<div class="terms">
<p>
<input type="checkbox" id="terms" checked="checked" required />
<label for="terms" id="terms">Agree to terms and conditions </label> <br />
</p>
</div>
<button id="button" class="signUpButton" name="SIGN UP" type="submit" onclick="signup();">SIGN UP</button> <br /><br /><br /><br />
<p class="outerAlt">Have an account already?</p>
<p class="alt">SIGN IN</p>
</form>
Instead of listening for a click on the button, listen for the form submission event
eg:
<form onsubmit="signup()">
required attribute stops the form from submitting if the field is empty, it does not stop arbitrary event handlers from changing the page.
If you want to only call your signup when the form is valid make it a form submit handler instead of a button click handler.
<form method="post" class="info" onsubmit="signup();return false;">
...
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button>
Attribute required is activating when you submit the form. You can click on any button or input inside the form, call event onclick, but it won't be submiting the form. To handle the event of submiting, you have to add onsubmit to your <form> elements and on the code below. Note, that the form submit will reload the page. To avoid this, you have to prevent default behavior by adding event.preventDefault().
function signup(event) {
event.preventDefault();
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
<form method="post" class="info" onsubmit="signup(event)">
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button>
</form>
onclick event will call the function when the button is clicked without validating the form. onsubmit event is called after the form is ready to submit (After the validation)
And you can use event.preventDefault(It will stop the page reloading after the submit. More About it) to instead of using return false;
function signup(event){
event.preventDefault();
}
document.getElementById().addEventListener("submit", signup);
Add addEventListener("submit", signup); to call the function onsubmit
Ex: document.getElementById("form1").addEventListener("submit", functionName);
Ex 2:
document.getElementById("form1").addEventListener("submit", function(){
// Code
});
function signup(event) {
event.preventDefault(); location.replace("LOCATION");
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
document.getElementById("form1").addEventListener("submit", signup);
<form method="post" id="form1" class="info" data-registerForm>
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<p>
<label for="password" required> Password:</label>
<input type="password" id="password" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="confirmpass">Confirm password:</label>
<input type="password" id="confirmpass" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="gender">Gender:</label>
<select id="gender">
<option id="male"> Male </option>
<option id="female"> Female </option>
</select><br /><br />
</p>
<p>
<label for="age">Age:</label>
<select id="age">
<option id="young">Young(12-18 years old) </option>
<option id="youth">Youth(19-40 years old) </option>
<option id="old">Old(more than 40 years) </option>
</select><br /><br />
</p>
<div class="terms">
<p>
<input type="checkbox" id="terms" checked="checked" required />
<label for="terms" id="terms">Agree to terms and conditions </label> <br />
</p>
</div>
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button> <br /><br /><br /><br />
<p class="outerAlt">Have an account already?</p>
<p class="alt">SIGN IN</p>
</form>
Below is the code of the form using which I'm trying to fetch the value for the query string.
<form id="form1">
<label for="allthesewords"> all these words</label>
<input type="text" id="allthesewords">
<br>
<label for="thisexactwordphrase">this exact word phrase</label>
<input type="text" id="thisexactwordphrase">
<br>
<label for="anyofthese">any of these</label>
<input type="text" id="anyofthese">
<br>
<label for="noneofthese">none of these</label>
<input type="text" id="noneofthese">
<br>
<input type="submit" value="Advance Search" onClick="advanceSearch()">
</form>
This one is the javascript function where I'm building my query string.
function advanceSearch(){
document.getElementById("form1").action="https://www.google.com/search?as_q="+document.getElementById("allthesewords").value+"&as_epq="+document.getElementById("thisexactwordphrase").value+"&as_oq="+document.getElementById("anyofthese").value+"&as_eq="+document.getElementById("noneofthese").value;
return true;
}
So, the actual problem is while clicking on the submit button it must redirect to this url
https://www.google.com/search?as_q=Harvard%20univeristy%20students&as_epq=students%20of%20Harvard%20Univeristy&as_oq=Harvard&as_eq=almamater
However, when I run my code it just redirects to this url:
https://www.google.com/webhp.
Thanks in advance!!!!!
<form action="https://www.google.com/search">
<p>Find page with</p>
<input class="input_bar" type="text" name="as_q" placeholder="all these words">
<input class="input_bar" type="text" name="as_epq" placeholder="this exact word or phrase">
<input class="input_bar" type="text" name="as_oq" placeholder="any of these words">
<input class="input_bar" type="text" name="as_eq" placeholder="none of these words">
<input id="btn" type="submit" value="Advance Search">
</form>
Use it!
I am trying to automate the login of a web page using vanilla JavaScript.
This is the form on the web page:
<form id="tbb_logon_form" class="login_form" method="post" action="https://www.btopenzone.com:8443/tbbLogon" name="login_form">
<fieldset class="username-field">
<label for="email" id="lbl-email">BT ID</label>
<input type="text" id="username" name="username" class="required" tabindex="3" value="username" placeholder="This is usually your email address">
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" id="password" name="password" class="required" value="password" tabindex="4">
</fieldset>
<input type="submit" value="Login" id="lgnbtn" tabindex="5" id="loginbtn" onclick="var s=s_gi('btiopenzone'); s.linkTrackVars='eVar19,prop50'; s.eVar19='OZ|Home Hub|Landing Page|Account selected:BT Broadband'; s.prop50='OZ|Home Hub|Landing Page|Account selected:BT Broadband'; s.tl(this,'o','OZ|Home Hub|Landing Page|Account selected:BT Broadband');">
<input name="xhtmlLogon" type="hidden" value="https://www.btopenzone.com:8443/tbbLogon">
</form>
The things have tried are:
document.getElementById("lgnbtn").submit();
document.getElementById("lgnbtn").click();
but neither are automating the click of the login button.
Please help me.
You can submit your form using:
document.forms[0].submit();
or
document.forms["login_form"].submit();
I am new to JavaScript, bought Jon Duckett's book, but am not a fan of the way he described creating/displaying error messages- Can someone please tell me how to just display an error message if the NAME field is left empty? Thank you. Below is the HTML for my form:
<form action="form.php" method="post">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name" required="required"><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
<label for="telephone">Telephone:</label><br>
<input type="text" name="telephone" id="telephone">
</fieldset>
<br>
<fieldset>
<legend>Your Information:</legend>
<p>
<label for="service">What service are you inquiring about?</label>
<select name="service" id="service">
<option value="Collision">Collision</option>
<option value="Mechanical">Mechanical</option>
<option value="Custom">Custom</option>
<option value="Other">Other</option>
</select>
</p>
<label for="comments">Comments:</label>
<br>
<textarea name="comments" id="comments" rows="4" cols="40"></textarea>.
<input type="submit" value="Submit"/>
</fieldset>
</form>
Checkout this link, this link shows how to do a simple JavaScript form validation
https://www.w3schools.com/js/js_validation.asp
HTML Code
<form name="myForm" onsubmit="return validateForm()" action="form.php" method="post">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
<label for="telephone">Telephone:</label><br>
<input type="text" name="telephone" id="telephone">
</fieldset>
<br>
<fieldset>
<legend>Your Information:</legend>
<p>
<label for="service">What service are you inquiring about?</label>
<select name="service" id="service">
<option value="Collision">Collision</option>
<option value="Mechanical">Mechanical</option>
<option value="Custom">Custom</option>
<option value="Other">Other</option>
</select>
</p>
<label for="comments">Comments:</label>
<br>
<textarea name="comments" id="comments" rows="4" cols="40"></textarea>.
<input type="submit" value="Submit"/>
</fieldset>
</form>
JavaScript Code
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x === "") {
alert("Name must be filled out");
return false;
}
}
Check functionality here
https://codepen.io/anon/pen/QvNGMZ
You have to create a new element ( span, div ... ), and write an error into it, and append that element after\before your form field, which ocured that error. As a good way, you may make an object, like {fieldName:{errorMessage,validationRule}} , where is fieldName - is your field name, that you need to validate, and errorMessage - is error, which you showing on error, and the validationRule - is regexp, for example, telling you how to validate that field. Or you just may hardcode all of these params. :)
P.s. There are a lot of ways to validate form, to get errors, and to show them. You may really easy search for it and choose the best for yourself.
What is wrong http://jsfiddle.net/qch1vtqc/
I'm trying to create an Automatic Log On another web page , without leaving the current page , beer somehow I have not succeeded.
<form id="loginForm" name="loginForm" method="post"
action="http://www.streamuj.tv/login">
<p>
<label for="name">Uživatel:</label>
<br>
<input type="text" name="username" value="examplename" size="22"
tabindex="3" id="name" class="logintext">
<br>
<label for="password">Heslo:</label>
<br>
<input name="password" type="password" value="exampepass"
class="logintext" id="password" tabindex="4" size="22">
<br>
<a href="http://www.streamuj.tv/recoverpassword"
title="Forgot!">Zapomněli jste heslo?</a><br>
<input type="hidden" name="action_login" value="Přihlásit se">
<input type="image" src="http://www.streamuj.tv/images/login.gif"
tabindex="5" class="loginbutton">
</p>
</form>
Please you have any idea how to create an automatic login with pre-defined values , but not without abandoning the current page? Thank you very much in advance for your help and sorry for my English .