The "onsubmit" isn't working in this code. Can someone help me? It doesn't get to the function. I put there a alert but it didn't react. So it seems like the onsubmit just doesn't do it's work.
It's about the submit in the input
<form onSubmit="maakCookie('user',document.inlog.gebruiker.value,1); maakCookie('password',document.inlog.wachtwoord.value,1);"
name="inlog" action="inloggen.html" method="post"> email-adres:
<input type="text" size="20" id="gebruiker" />
wachtwoord: <input type="password" size="20"
id="wachtwoord" /> <hr /> <input type="
submit" onsubmit="checkEmail()" value="submit"/>
</form>
function maakCookie(naam, waarde, dagen)
{
if(dagen)
{
var datum = new Date();
datum.setTime(datum.getTime() + (dagen * 24 * 60 * 60 * 1000));
var verloopdatum = "; expires="+datum.toGMTString();
}
else
{
var verloopdatum = "";
}
document.cookie = naam+"="+waarde + verloopdatum + ";path=/";
}
function checkEmail()
{
alert("kijken of het werkt");
if(/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za- z]{2,4}$/.test(document.userform.email.value))
{
return (true)
}
else
{
alert("het e-mailadres is onjuist")
return (false)
}
}
onsubmit in not an attribute for an <input>. If you want to check if your onsubmit is firing, you can create a simple function first like below:
HTML:
<form onsubmit="tryalert();" action="" method="post">
<input type="submit" value="submit"/>
</form>
Javascript:
function tryalert()
{
alert("working");
}
If something like that works, there is something wrong with your maakCookie function.
I think you don't need the onsubmit event on your input at all.
Just try the following :
<form onsubmit="checkEmail(); maakCookie('user',document.inlog.gebruiker.value,1); maakCookie('password',document.inlog.wachtwoord.value,1);" name="inlog" action="inloggen.html" method="post">
email-adres: <input type="text" size="20" id="gebruiker" />
wachtwoord: <input type="password" size="20" id="wachtwoord" />
<hr />
<input type="submit" value="submit"/>
</form>
Related
I have a form that is simply a input with a zip code and a submit button.
I need some help on submitting the form according to the data inserted.
For example if someone inserts a number between 1000-000 and 2999-999 it will be forward to landing1.html, if the input is between 3000-000 to 4000-999 it will forward to landing2.html and so on.
This is a draft of my code my code for better understanding
$(document).ready(function() {
$(".postal-code").inputmask("9999-999", {
"placeholder": "0"
});
$(".postal-code").inputmask("9999-999", {
"onincomplete": function() {
alert('Insere um Código Postal válido');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.min.js"></script>
<div id="form-cp">
<form method="get" action="" onsubmit="" class="needs-validation">
<input type="text" name="cp" value="" size="8" maxlength="8" minlength="8" class="postal-code form-control-lg" aria-invalid="false" placeholder="0000-000" required>
<button type="submit" class="btn btn-primary">Send Data</button>
</form>
</div>
Hope someone can help me.
Many thanks!
Like this
We can make it more complex if you have many sets of post codes
$(function() {
$(".postal-code").inputmask("9999-999", {
"placeholder": "0"
});
$(".postal-code").inputmask("9999-999", {
"onincomplete": function() {
alert('Insere um Código Postal válido');
}
});
$(".needs-validation").on("submit",function() {
const cp = this.cp.value;
if (cp >= "1000-000" && cp <= "2999-999") this.action = "landing1.html";
else if (cp >= "3000-000" && cp <= "4000-999") this.action = "landing2.html";
// else this.action = "outofrange.html";
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.min.js"></script>
<div id="form-cp">
<form method="get" action="" onsubmit="" class="needs-validation">
<input type="text" name="cp" value="" size="8" maxlength="8" minlength="8" class="postal-code form-control-lg" aria-invalid="false" placeholder="0000-000" required>
<button type="submit" class="btn btn-primary">Send Data</button>
</form>
</div>
I have a form which has two scripts that run on submit; one to disable the submit button after being clicked once, the other to add the uk country code to the phoneNumber field. I can only get one of them to run at a time, how can i get them to both run?
<form action="https://123.com" method="post" onsubmit="return checkForm(this);">
<input name="PhoneNumber" type="tel" required="">
<input name="myButton" type="submit" value="Submit">
</form>
<script type="text/javascript">
function checkForm(form)
{
//
// validate form fields
//
form.myButton.disabled = true;
return true;
}
</script>
<script>
function checkForm(f) {
const phoneNumberField = f.querySelector("[name='PhoneNumber']");
if(phoneNumberField.value.startsWith("0")){
phoneNumberField.value = "44" + phoneNumberField.value.substring(1);
}
return true; // Just for demo to stop the form submitting
}
</script>
Don't use onclick attribute. Use Element.addEventListener() instead
document.getElementById('my-form').addEventListener('submit', checkForm)
function checkForm1(form) {
form.myButton.disabled = true;
}
function checkForm2(f) {
const phoneNumberField = f.querySelector("[name='PhoneNumber']");
if (phoneNumberField.value.startsWith("0")) {
phoneNumberField.value = "44" + phoneNumberField.value.substring(1);
}
}
function checkForm(e) {
checkForm1(e.target)
checkForm2(e.target)
// This stops the form from submitting
e.preventDefault()
e.stopPropagation()
return false;
}
<form id="my-form" action="https://123.com" method="post">
<input name="PhoneNumber" type="tel" required="">
<input name="myButton" type="submit" value="Submit">
</form>
OR
document.getElementById('my-form').addEventListener('submit', checkForm1)
document.getElementById('my-form').addEventListener('submit', checkForm2)
document.getElementById('my-form').addEventListener('submit', cancel)
function checkForm1(e) {
e.target.myButton.disabled = true;
}
function checkForm2(e) {
const phoneNumberField = e.target.querySelector("[name='PhoneNumber']");
if (phoneNumberField.value.startsWith("0")) {
phoneNumberField.value = "44" + phoneNumberField.value.substring(1);
}
}
function cancel(e) {
// This stops the form from submitting
e.preventDefault();
e.stopPropagation();
return false;
}
<form id="my-form" action="https://123.com" method="post">
<input name="PhoneNumber" type="tel" required="">
<input name="myButton" type="submit" value="Submit">
</form>
I'm working on a simple form verification system for my website - the Login() function - and want the small aesthetic of allowing users to just press enter to submit a form. However, I have two separate forms - both using the same tag attributes - but one and the other doesn't. What's wrong?
Working Code:
function Login() {
var id = document.login.id.value;
location.href = "users/" + id + ".html"
}
<form name="login" method="get" onsubmit="return Login();">
<input type="password" maxlength="7" name="id" id="id" placeholder="Session ID">
<br />
<input type="button" value="Join" onClick="Login()">
<button>Cancel</button>
</form>
Broken Code:
function Login() {
var done = 0;
var username = document.login.username.value;
username = username.toLowerCase();
var password = document.login.password.value;
if (username == "user1" && password == "password1") {
window.location = "../account/user1/index.html";
done = 1;
}
if (username == "user2" && password == "password2") {
window.location = "../account/user2/index.html";
done = 1;
}
if (username == "user3" && password == "password3") {
window.location = "../account/user3/index.html";
done = 1;
}
if (done == 0) {
alert("Incorrect username/password.")
}
}
<form name="login" method="get" onsubmit="return Login();">
Username:<input type="text" name="username">
<br /> Password:
<input type="password" name="password">
<br />
<br />
<input type="button" value="Login" onClick="Login()">
<input type="reset" value="Cancel" />
</form>
To make sure the browser or web client you are using knows what button to press on submit, you should use:
<input type="submit" value="Login" onClick="Login()">
instead of
<input type="button" value="Login" onClick="Login()">
(Note the type attribute difference).
I have this javascript code:
function othername() {
var input = document.getElementById("formName".value);
alert('Thanks for filling that out,' + ' ' + input + '!')
}
And this html code:
<form id="form" onsubmit="return false;">
<input type="text" id="formName"/>
<input type="submit" onclick="othername();" />
What did I do wrong?
<form id="form" onsubmit="return false;">
<input type="text" id="formName"/>
<input type="submit" onclick="othername();" />
</form>
<script>
function othername() {
var input = document.getElementById("formName").value;
alert('Thanks for filling that out, ' + input + '!')
}
</script>
Notice the closing parens.
In this HTML form that I have I would like to warn the user that he has to enter a level in the inputbox, if he clicks the button again I would like to clear off the error message and print it out again. I would like to also add more error messages but anything that I add as an error message appends to the end of the previous message.
function validateForm () {
var msg = ""
, result = true;
if (document.ExamEntry.name.value === "") {
msg = document.createTextNode("You Must Indicate Your Level");
document.getElementById('name-msg').appendChild(msg);
document.getElementById('name-msg').style.color="red";
}
}
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name">
<span id="name-msg"></span>
<input type="button" name="submit" value="Submit" onclick="validateForm();">
</form>
here's a jsbin
function validateForm () {
var result = true;
if (document.ExamEntry.name.value === "") {
document.getElementById('name-msg').innerHTML= "You Must Indicate Your Level";
document.getElementById('name-msg').style.color="red";
}
}
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name">
<span id="name-msg"></span>
<input type="button" name="submit" value="Submit" onclick="validateForm();">
</form>
Is this what are you looking for?
function validateForm(){
var result = true;
var msg = "";
if(document.ExamEntry.name.value===""){
msg = document.createTextNode("You Must Indicate Your Level");
var span = document.getElementById('name-msg');
while( span.firstChild ) {
span.removeChild( span.firstChild );
}
span.appendChild(msg)
document.getElementById('name-msg').style.color="red";
} else {
var span = document.getElementById('name-msg');
while( span.firstChild ) {
span.removeChild( span.firstChild );
}
}
}
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span id="name-msg"> </span>
<input type="submit" name="submit" value="Submit" onclick="validateForm();" />
</form>
You can clear the html like
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value === "") {
msg = document.createTextNode("You Must Indicate Your Level");
document.getElementById('name-msg').appendChild(msg);
document.getElementById('name-msg').style.color = "red";
} else {
document.getElementById('name-msg').innerHTML = '';
}
}
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span id="name-msg"></span>
<input type="button" name="submit" value="Submit" onclick="validateForm();" />
</form>
You may possibly use innerHTML:
function validateForm() {
var msg = "",
result = true;
if (document.ExamEntry.name.value === "") {
msg = "You Must Indicate Your Level";
}
document.getElementById('name-msg').innerHTML = msg;
}
#name-msg {
color: red;
}
<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name">
<span id="name-msg"></span>
<br/>
<input type="button" name="submit" value="Submit" onclick="validateForm();">
</form>