I must admit to being clueless on Java. Having spent from 1976 to retirement working on IBM kit. I have never used it. However I do enjoy writing PHP for a website. But integrating reCaptcha is driving me insane. (I have changed the site keys in the example below) I have reduced the code to a minimum in an attempt to get this to work but ironically including a duff line of code elicits a response. In the following having removed all the PHP code, I accidentally left the echo in! and that produced the following echo in LDA108.php.
'108 Name: John Watt Email: watt#foddl.org.uk
Phone: 0121 644 5167 Message: Please please send the forms
Please check the captcha form.'
And yes that is me begging. Clearly I am missing something. Can onyone please put me out of my misery?
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="noindex, nofollow" />
<head>
<title>Display League Contact Details</title>
<!-- External Style sheets -->
<link rel="stylesheet" type="text/css" media="screen, print, handheld" href="LDA.css" />
<style type="text/css">
textarea {
font-size: 10pt;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render='6LdW3V8hLPANABXKYnPSjhyF6nG4SrbRYbGlBdMPt'"></script>
</head>
<body id="LDA107C">
<fieldset id="contactform1">
<legend id="legend">To Contact us Please enter the following :</legend>
<form id="subform" name="subform" method="post" action="LDA108.php">
<p><label for="name" class="label1">Your Name</label>
<input type="text" name="name" id="name" value=" " />
</p>
<p><label for="email" class="label1">Email address</label>
<input type="text" name="email" id="email" value=" " />
</p>
<p><label for="phoneno" class="label1">Phone Number (Optional)</label>
<input type="text" name="phoneno" id="phoneno" value=" " size="25" />
</p>
<p><label for="message" class="label1">Text Message/Request</label>
<textarea name="message" rows="5" id="message" cols="65" value=" "></textarea>
<p><input type="submit" name="Submit" id="submit" value="Submit" /></p>
</form>
</fieldset>
</body>
</html>
<script>
$('#subform').submit(function () {
// we stoped it
event.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var phoneno = $('#phoneno').val();
var message = $("#message").val();
echo '<p>107 Name='.$name. ' email='.$email.' Phone='.$phoneno. ' Message='.$message.'</p>';
// needs for recaptacha ready
grecaptcha.ready(function () {
// do request for recaptcha token
// response is promise with passed token
grecaptcha.execute('6LdW3V8hLPANABXKYnPSjhyF6nG4SrbRYbGlBdMPt', { action: 'Submit' }).then(function (token) {
// add token to form
$('#subform').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
$.post("LDA108.php", { name: name, email: email, phoneno: phoneno, message: message, token: token }, function (result) {
console.log(result);
});
});
});
});
</script>
On the day I asked this question 25/8/2022 I ran 18 tests on the program. Today on google the I have checked and received an average score of 0.9. However the data is not getting to LDA108.php. The
problem appears to be with the post only working when their is an error in the above program?
Related
I have been trying to solve the problem that I am having with this email validation in JavaScript, but all the code I have tried was having the same problem. When I used the developer tool in google chrome I didn't see any error message, so I don't understand why is this happening. I want to show the error message if an email is not valid.
What am I missing?
link full code - https://jsfiddle.net/lmanhaes/cq1g5dyt/14/
Thanks.
function checkEmail(validate) {
let re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let email = validate.userName.value;
if (email === re)
return true;
else {
error.setAttribute("class", "error");
error.innerHTML = ("Email is not correct. Please retype.");
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
<h1></h1>
<ul>
</ul>
<h1>Register</h1>
<p>* = Required Field</p>
<div id="formcontainer">
<form id="registerDetails" action="lmanha01_fma_t3confirm.html">
<div>
<label for="username">* Userame:</label>
<input type="text" id="userName" required>
<!--pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$"-->
<!--check that the user has in fact typed in an email address-->
<div id="error"></div>
</div>
<div>
<label for="password">* Password (must be 8 characters exactly and include one Uppercase, one
lowercase and
one number):</label>
<input type="password" id="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$"
required>
<input type="checkbox" id="showpasswords" onclick="Toggle()">
<!--This creates a toggle effect-->
<label id="showpasswordslabel" for="showpasswords">Show passwords</label>
</div>
<div>
<label for="retypedpassword">* Retype your password:</label>
<input type="password" id="retypedpassword">
<span id="passwordmatcherror"></span>
</div>
<div>
<button type="submit" id="registerButton">Register</button>
</div>
</form>
</div>
</section>
<!--moved to the bottom to load the page faster-->
<script src="scripts/exemple.js"></script>
</body>
</html>
You should use test() method of regex to return true or false if input value matches the email pattern.
if (re.test(email)){
//logic when it is valid
}
else{
//logic when it is invalid
}
const email = document.getElementById('email');
function validate(){
const regex=/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return regex.test(email.value) ?console.log("Valid"):console.log("Invalid");
}
<input type="email" id="email" />
<button onclick="validate()">
Validate
</button>
I am trying to redirect after form submission but even though the code seems correct it does not redirect. What could be the problem?
The below is the snippet. There's no error in my console when I try running this code. Any help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CHECK BOX</title>
<link rel="stylesheet" href="confirmation.css">
</head>
<body>
<script>
function confirm(){
if(document.getElementById('agree').checked) {
alert('Registration Successful');
setTimeout(function() { //This function set the time for redirecting to 2 seconds after user click ok
window.location("dashboard.html");
// window.location.href = "dashboard.html";
}, 3000);
return true;
} else {
alert('Please read and agree to the Terms and Conditions and Privacy Policy');
return false;
}
}
</script>
<form action="#" method="post" onsubmit="confirm()">
<label>Username</label><br />
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Username" maxlength="30" required="" />
<br />
<label>Phone Number</label><br />
<input type="number" class="form-control" name="phone" id="phoneNumber" placeholder="Enter your Phone Number" maxlength="14" required="" />
<br />
<input type="checkbox" name="checkbox" value="check" id="agree" /> I have read and agree to the Terms and Conditionsand Privacy Policy
<br />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
This is not the correct way to redirect after a form has been submitted. Currently, even if your redirect did work, the form data would not be transmitted anywhere. A form element has an action attribute for you to indicate where it should redirect and send the form data to.
Your code seems to just provide some form validation, which is handled differently than what you are attempting.
Here's how it should be set up. (Make sure to read all the HTML and JavaScript comments):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CHECK BOX</title>
<link rel="stylesheet" href="confirmation.css">
</head>
<body>
<!-- The action attribute is where you set the location of the redirect. -->
<!-- Don't use HTML event attributes to set up events. Do it in JavaScript. -->
<form action="dashboard.html" method="post">
<!-- A label should have a for attribute that points to the id of the element it is for. -->
<label for="username">Username</label><br>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Username" maxlength="30" required="" />
<br>
<label for="phoneNumber">Phone Number</label><br />
<input type="number" class="form-control" name="phone" id="phoneNumber" placeholder="Enter your Phone Number" maxlength="14" required="" />
<br>
<input type="checkbox" name="checkbox" value="check" id="agree"> I have read and agree to the Terms and Conditionsand Privacy Policy
<br>
<!-- Don't name any form elements "submit" as it will overwrite the form.submit() function -->
<input type="submit" name="btnSubmit" value="submit">
</form>
<!-- It's generally a best-practice to place script elements just before
the closing body tag so that the page doesn't get blocked while loading
and to ensure that the DOM will have been parsed by the time the script runs. -->
<script>
let frm = document.querySelector("form");
frm.addEventListener("submit", confirm);
// Event handling functions will always be passed a reference to the event
// they are handling. You should set up a function argument to capture that reference.
// Once you have captured the reference, you can cancel the event if needed.
function confirm(evt){
// Normally, we only want to cancel the form's submit event if validation fails
// but, since you want a delay, we need to do it.
evt.preventDefault();
if(document.getElementById('agree').checked) {
alert('Registration Successful');
setTimeout(function() {
frm.submit(); // Submit the form, which will allow it to redirect to the action
}, 3000);
} else {
alert('Please read and agree to the Terms and Conditions and Privacy Policy');
}
}
</script>
</body>
</html>
i'm testing a HTML using a to check what a servlet returned,
to choose which message i'll show. The app runs ok, the servlet returns correctly. The get what the servlet returned and chooses the message. But, the tag shows the message only for a second (like a flash) and erase shortly thereafter. Below you can see my code:
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<title> loginServlet2 </title>
<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
<link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>
<script>
function oMsg()
{
var wMsg1 = document.getElementById('wMsg').innerHTML;
if (wMsg1 == "Test OK!")
{
document.getElementById('wMsga').innerHTML="Test is OK";
}
else
{
document.getElementById('wMsga').innerHTML="Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="text" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<p id="wMsg"> Msg1 : <%=request.getAttribute("wMsg")%></p>
<p id="wMsga"> Msg2 : </p>
</body>
</html>
Could you help me, please? Thanks.
I'm not sure if I'm answering what you are looking for, but adding return false to onclick will keep you on the same page:
<input type="submit" value="Submit" name="B1" onclick="oMsg(); return false;">
I have a input form and want to save the data that I haved insert into a file. Should I use get and set for this? Anyone have any ideas on what I should do?
function myfunction() {
if (validation()) // Calling Validation Function
{
// Serializing Form Data And Displaying It In <p id="wrapper"></p>
document.getElementById("wrapper").innerHTML = serialize(document.forms[0]); // Serialize Form Data
document.getElementById("form").reset(); // Reset Form Fields
}
}
function validation() {
var name = document.getElementById("namn").value;
var number = document.getElementById("number").value;
}
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Write</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://form-serialize.googlecode.com/svn/trunk/serialize-0.2.min.js" type="text/javascript"></script> <!-- For Serialization Function -->
<script src="hej.js"></script> <!-- Include JavaScript File Here-->
</head>
<body>
<div id="main">
<div id="login">
<hr/>
<form action="" method="post">
<label>Name:</label>
<input type="text" name="name" id="name" required="required" placeholder="fill in your name"/><br /><br />
<label>Number :</label>
<input type="text" name="number" id="number" required="required" placeholder="0876856"/><br/><br />
<input onclick="myfunction()" type="submit"id= "submit" value=" Submit " name="submit"/><br />
</form>
</div>
</div>
</body>
</html>
Thanks in advance!
If you use the normal $_POST you can access the data over $_POST and write it with fopen, fwrite to a file. Over ajax you have to send the Data to a PHP File and do the same there. You cant access the local filesystem over Javascript.
<?php
if(isset($_POST) && !empty($_POST){
// reformat your data here and format it
$yourDataToWriteInTheData = $_POST['firstname'] . '|' . $_POST['lastname'] . PHP_EOF;
// Open the file (or create it, read the fopen manual)
$fileHandler = fopen('file1.txt', 'a+');
fwrite($fileHandler, $yourDataToWriteInTheData);
fclose($fileHandler);
}
I am trying to validate a simple form with JavaScript but cannot get the script to validate. When the Submit button is pressed there is no validation being run. If one of the boxes is left blank, the error message does not pop up to notify the user. However I am not seeing anything out of place. I am wondering if it isthe submit button is not working? Can anyone lend a hand?
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert.("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange(); {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="theName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="theAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick></p>
</form>
<span id="results"></span>
</body>
</html>
Your code had SO many typo's. This works.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
}
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange() {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="txtName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="txtAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick()"></p>
</form>
<span id="results"></span>
</body>
</html>
However be noted that you haven't used txtAge_onBlur or txtName_onChange functions anywhere. Also I suggest to add a numerical check to age field.
onclick="btnSubmit_onclick></p>
to
onclick="btnSubmit_onclick();"></p>
and
function btnSubmit_onclck() {
to
function btnSubmit_onclick() {
You have onsubmit="return validate();" yet I don't see validate() anywhere in your script.
Then in your script you have btnSubmit_onclck(), yet in your HTML you have onclick="btnSubmit_onclick.
So it's missing an i and in the HTML you are missing the closing ".
You also need to check the missing closing } on txtAge_onblur and btnSubmit_onclick