I like to add confirmation dialog. like"confirm adding (the amount)?" if yes it will proceed to addcontribution.php and if no it will go back to itself and reset the field.
<form form="CONTRIFORM" name='contribution' method="POST" Action="addcontribution.php" onSubmit="return formvalidation2();">
<center>
Amount:
<input type="text" name="contriamnt" id="contriamnt" size="15" placeholder=" Amount"></br></br>
<button id="searchbutton" type="submit" name="submit" value="Submit">ADD</button></br>
</center>
</form>
<script>
function formvalidation2() {
var amntDATA = document.contribution.contriamnt;
if(allnumber(amntDATA)) {
if(ChangeText()) {
if(new_tab()) {
}
}
}
return false;
}
function allnumber(amntDATA) {
var x = /^[0-9]+$/;
if(amntDATA.value.match(x)) {
return true;
} else {
alert('Invalid Amount.');
return false;
}
}
</script>
Example
if (confirm('Confirm Adding (the amount)?')){
window.location = "http://www.google.com/"; // your Custom Link
}else{
document.getElementById('contriamnt').value="";
}
Related
I have a webform with name 'audit-form' and it has a column in which we have to enter the number of observations.
<form id="audit-form" action="action.php" method="post">
<label for="observ_count">Number of Observations</label>
<textarea id="observ_count" name="Number_of_Obsevations"></textarea>
<input type="submit" value="Add Obsevations" id="audit_form_submit"/>
</form>
<script>
const auditForm=document.getElementById("audit_form");
const auditButton=document.getElementById("audit_form_submit");
auditButton.addEventListener("click",(e) => {
e.preventDefault();
var noo = auditForm.Number_of_Observations.value;
for(i=0;i<noo;i++)
{
if(i<noo-1)
{
window.location.assign('observ.html'); //html page to enter obsevations and next button at bottom
}
else
{
window.location.assign('observ1.html'); //html page to enter obsevations and submit button at bottom
}
}
});
</script>
I tried to do this but directly observ1.html is opening up not observ.html
Please help
You simple wrong here:
Look at name
<textarea id="observ_count" name="Number_of_Obsevations"></textarea>
And now look what you write in js:
var noo = auditForm.Number_of_Observations.value;
Number_of_Obsevations is not equal to Number_of_Observations
const auditForm=document.getElementById("observ_count");
const auditButton=document.getElementById("audit_form_submit");
auditButton.addEventListener("click",(e) => {
e.preventDefault();
var noo = auditForm.value;
for(i=0;i<noo;i++)
{
if(i<noo-1)
{
console.log('1');
}
else
{
console.log('2');
}
}
})
<form id="audit-form">
<label for="observ_count" Number of Obsevations</label>
<textarea id="observ_count" name="Number_of_Obsevations"></textarea>
<input type="submit" value="Add Obsevations" id="audit_form_submit">
</form>
I have a form which validates password null/blank or not using onblur. And I use a submit button to submit the form. However the submit button needs to be clicked twice before to work. It does not work on the first click after something has been filled in the password box. Below is the code.
With respect to Jquery, I require solution in pure Javascript.
I have tried onkeyup, but that is not a good solution as it will put strain on system, and server (for ajax).
<!DOCTYPE html>
<html>
<body>
<script>
var error_user_password = false;
function checkpw(){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall() {
checkpw()
if(error_user_password == false) {
return false;
} else {
return true
}
}
</script>
</body>
<form id="joinform" method="post" name="joinform" action="#hello" onsubmit="return submitall()" >
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password" onblur="checkpw()" />
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>
</html>
OnBlur Validation Requires Onsubmit Button to Be Clicked Twice in Pure Javascript
This happens because the blur event is captured from the onblur event handler and not bubbled to the form submit button.
A full javaScript solution is based on:
addEventListener
activeElement: inside the blur event I check after 10 milliseconds if the submit button get the focus.
My snippet:
var error_user_password = false;
function checkpw(ele, e){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall(ele, e) {
checkpw();
if(error_user_password == false) {
e.preventDefault();
} else {
console.log('form submitted');
}
}
window.addEventListener('DOMContentLoaded', function(e) {
document.getElementById('user_password').addEventListener('blur', function(e) {
checkpw(this, e);
setTimeout(function() {
if (document.activeElement.id == 'join') {
document.activeElement.click();
}
}, 10);
}, false);
document.getElementById('joinform').addEventListener('submit', function(e) {
submitall(this, e);
}, false);
});
<form id="joinform" method="post" name="joinform" action="#hello">
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password"/>
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>
I want to prevent the user from accessing the next page if there is an empty
inputField. The alert does show when the field is empty and i click the button, but i can click 'ok' and i get taken to the next page.
<script type="text/javascript">
window.onload = function(){
function checkFilled(inputField) {
if(inputField.value.length > 1) {
return true;
}
else {
alert('field1 is not filled in');
$("#button1").click(function(e){
e.preventDefault();
});
return false;
}
};
document.getElementById('button1').onclick = function() {
var field1 = document.getElementById('field1');
checkFilled(field1);
};
};
</script>
<input type="text" name="field1" id="field1"/>
<a href="nextpage.html">
<div id="button1"></div>
</a>
You used an a tag where the href attribute is set and gets you immediately to the next page, although the inputField is empty. This should do what you want:
window.onload = function(){
function checkFilled(inputField) {
if(inputField.value.length > 1) {
return true;
}
else {
alert('field1 is not filled in');
return false;
}
};
document.getElementById('button1').onclick = function() {
var field1 = document.getElementById('field1');
return checkFilled(field1);
};
};
<input type="text" name="field1" id="field1"/>
<form action="nextpage.html">
<input id="button1" type="submit" value="next">
</form>
Or if you prefer to use an a tag instead of a button:
function checkFilled() {
if(document.getElementById("field1").value.length > 1) {
window.location.href="nextpage.html";
}
else {
alert('field1 is not filled in');
return false;
}
}
<input type="text" name="field1" id="field1"/>
next
I added this code to my website:
<script>
function checkPassword(name, pwd) {
if (name == "jamie") {
if (pwd == "198237645") {
window.location = "member.html"
} else {
document.write("Wrong Password!")
}
} else {
document.write("Wrong Name!")
}
}
</script>
<form action="">
Login Name : <input type="text" name="loginname"><br>
Login Pwd : <input type="password" name="loginpwd"><br>
<input type="submit" onclick="checkPassword(this.form.loginname.value,this.form.loginpwd.value)" value="Login">
</form>
However, after i inserted the correct password & name, i only see the link became:
http://tool-box.weebly.com/test.html?loginname=jamie&loginpwd=198237645
What should i do? if i change window.location="member.html" to document.write("Password Correct!"), it worked correctly.
Please help.
You need to cancel the click action so the form does not submit
onclick="checkPassword(this.form.loginname.value,this.form.loginpwd.value); return false;"
I hope you realize this is NOT secure.
Couple of error in code
a) onclick of submit button doesn't return anything hence the form is submitted each time
b) use window.location.href
<script>
function checkPassword(name, pwd) {
if (name == "jamie") {
if (pwd == "198237645") {
window.location.href = "memeber.html"
} else {
document.write("Wrong Password!")
}
} else {
document.write("Wrong Name!")
}
return false;
}
</script>
<form action="" >
Login Name : <input type="text" name="loginname"><br>
Login Pwd : <input type="password" name="loginpwd"><br>
<input type="submit" onclick = "return checkPassword(this.form.loginname.value,this.form.loginpwd.value)" value="Login">
</form>
I've read many posts considering this problem and for some reason none of the solutions work for me. I have several js functions for validation that are called in the main one that is appointed to the onSubmit tag in the form. Here is the js code:
<script type="text/javascript">
function validacijaForme() {
var username = document.getElementById('usname');
var email = document.getElementById('email');
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
if(validacijaUsername(username) && validacijaEmail(email) && validacijaSifri(pass1,pass2))
{
alert('success');
return true;
}
return false;
}
</script>
<script type="text/javascript">
function validacijaSifri(fieldId1, fieldId2)
{
var two = document.getElementById(fieldId1).value;
var three = document.getElementById(fieldId2).value;
if(two == three) { return true; }
alert("Warning!! passcodes must match!!!");
return false;
}
</script>
<script type="text/javascript">
function validacijaUsername(usname)
{
var letters = /^[A-Za-z]+$/;
if(letters.test(usname.value))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
document.getElementById('usrname').focus();
return false;
}
}
</script>
<script type="text/javascript">
function validacijaEmail(email)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailformat.test(email))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
document.getElementById(email).focus();
return false;
}
}
and here is the html form code
<form class="form-signin" onSubmit="return validacijaForme();" name="registerForm" method = "POST" action="test.php" enctype="multipart/form-data">
<h2 class="form-signin-heading">Registracija</h2>
<input type="text" class="form-control" placeholder="Username" name="usrname" id="usname" autofocus>
<input type="text" class="form-control" placeholder="E-mail" name="email" id="email">
<input type="password" class="form-control" placeholder="Password" name="pass" id="pass1">
<input type="password" class="form-control" placeholder="Confirm password" id="pass2">
<button class="btn btn-lg btn-primary btn-block" name="dugme" type="submit">Register</button>
The problem is that all the alerts are working, meaning that those functions do validate the fields, and should return false, but the onSubmit tag doesn't seem to accept that value from the function.
The form doesn't submit and doesn't pass to test.php only if I type this:
<form class="form-signin" onSubmit="return false" name="registerForm" method = "POST" action="test.php" enctype="multipart/form-data">
submit the form with javascript submit()
<form id="myform" class="form-signin" onSubmit="validacijaForme();" name="registerForm"
method = "POST" action="test.php" enctype="multipart/form-data">
And in your function:
function validacijaForme() {
var username = document.getElementById('usname');
var email = document.getElementById('email');
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
if(validacijaUsername(username) && validacijaEmail(email) && validacijaSifri(pass1,pass2))
{
alert('success');
document.getElementById("myform").submit();
return false;
}
return false;
}
Your problem is related to your username id/name consistency. Use the console (F12) to debug this kind of thing.
<input type="text" class="form-control" placeholder="Username" name="usRname" id="usname" autofocus>
Change:
document.getElementById('usrname').focus();
To:
document.getElementById('usname').focus();
There are lots of errors in your code buddy | WORKING DEMO
function validacijaForme() {
var username = document.getElementById('usname');
var email = document.getElementById('email');
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
if(validacijaUsername(username) && validacijaEmail(email) && validacijaSifri(pass1,pass2))
{
alert('success');
return true;
}
return false;
}
function validacijaSifri(fieldId1, fieldId2)
{
var two = fieldId1.value;
var three = fieldId2.value;
if(two == three) { return true; }
alert("Warning!! passcodes must match!!!");
return false;
}
function validacijaUsername(usname)
{
var letters = /^[A-Za-z]+$/;
if(letters.test(usname.value))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
document.getElementById('usname').focus();
return false;
}
}
function validacijaEmail(email)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailformat.test(email.value))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
document.getElementById('email').focus();
return false;
}
}