I am trying to submit a form in HTML after loading the page. It works when the form is refreshed. Otherwise, the form can't submit. My HTML page, complaint.html is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jquery.mobile-1.4.5/demos/_assets/css/jqm-demos.css">
<script src="jquery.mobile-1.4.5/demos/js/jquery.js"></script>
<script src="jquery.mobile-1.4.5/demos/_assets/js/index.js"></script>
<script src="jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
$(document).ready(function() {
$('#submt4').removeClass('ui-btn');
});
</script>
</head>
<body>
<div class="center container-fluid">
<div class="row">
<div class="col-xs-12">
<h2 align="center">COMPLAINTS</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12"><input type="text" placeholder="Name" name="name" id="name">
</div>
</div>
<div class="row">
<div class="col-xs-12"><input type="text" placeholder="Mobile" name="mobile" id="mobile"></div>
</div>
<div class="row">
<div class="col-xs-12"><input type="text" placeholder="Vehicle No" name="vehicleno" id="vehicleno"></div>
</div>
<div class="row">
<div class="col-xs-12"><textarea rows="4" cols="50" name="complaint" id="complaint">Enter your complaint here...</textarea></div>
</div>
<div class="row">
<div class="col-xs-12" align="center">
<button class="btn btn-primary btn-lg " type="button" id="submt4" onClick="funComplaint();">SUBMIT</button></div>
</div>
</div>
</div>
<script type="text/javascript">
function funComplaint() {
var name = document.getElementById("name").value;
var mobile = document.getElementById("mobile").value;
var vehno = document.getElementById("vehicleno").value;
var complaint = document.getElementById("complaint").value;
var letters = /^[A-Za-z, ]+$/;
var numbers = /^[0-9]+$/;
var alphanum = /^[0-9a-zA-Z]+$/;
if (name == "" || mobile == "" || vehno == "" || complaint == "") {
alert("Please fill all fields........");
return false;
}
if (name.match(letters)) {} else {
alert("Name must have alphabet characters only");
document.getElementById('name').focus();
return false;
}
if (mobile.match(numbers)) {} else {
alert("Mobile number must have numeric characters only");
document.getElementById('mobile').focus();
return false;
}
if (mobile.length == 0 || mobile.length > 12 || mobile.length < 10) {
alert("Mobile number should not be empty / length be between 10 to 12");
document.getElementById('mobile').focus();
return false;
}
if (vehno.match(alphanum)) {} else {
alert("Vehicle number must have alphanumeric characters only");
document.getElementById('vehicleno').focus();
return false;
}
var x = new XMLHttpRequest();
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
var msg = x.responseText.trim();
if (msg == "Complaint Received") window.location = "home.html";
} else {
alert(msg);
}
}
}
x.open("GET", "http://localhost:8087/CarRental/com/selcar/getComplaint.jsp?name=" + name + "&mobile=" + mobile + "&vehno=" + vehno + "&complaint=" + complaint, true);
x.send();
}
</script>
</body>
</html>
After x.onreadystatechange definition you have one too many }.
Just remove one } before x.open(....
Related
for some reason this does not work, its so simple and i see a million examples of this working. This is basic validation just to see if they did not click in one of the examples to not submit the form. I have validation for the first, last name and email. The text area i was going to validate using this function.
***********************EDITED************************
***************So i am adding more of my code so yall can see the issue better. NOTE: Some code in script and other places have been modified. I will add a CODECHANGED so you know its a intentional mistake. Also, the css is huge and mostly unnecessary im sure you can guess whats going on here.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title Undetermined</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/hammerFavicon.ico" type="image/gif">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" CODECHANGED >
<link rel="stylesheet" href = "css/custom/siteStyle.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" CODECHANGED ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" CODECHANGED "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" CODECHANGED ></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Header include -------------------------------------------------------------------------------------- -->
<?php include("includes/header.php"); ?>
<!-- Navigation include ---------------------------------------------------------------------------------- -->
<?php include("includes/navigation.php"); ?>
<!-- Main Content section -------------------------------------------------------------------------------- -->
<main role="main" class="container">
</div>
<div class="jumbotron">
<!-- Paragraph for text if needed ---------------------------------------------------------------- -->
<p class="lead">
<h2>Ask Us A Question</h2>
<br />
<!-- Question submission form ---------------------------------------------------------------- -->
<form id="myForm" action="" onsubmit="return validForm()">
<div class="form-group">
<div class="col">
<label for="fN">First Name</label>
<input type="text" onblur="validateName(fN)" class="form-control" placeholder="First Name" id="fN">
</div>
</div>
<!--Last Name -------------->
<div class="form-group">
<div class="col">
<label for="lN">Last Name</label>
<input type="text" onblur="validateName(lN)" class="form-control" placeholder="Last Name" id="lN">
</div>
</div>
<!-- Email -->
<div class="form-group">
<div class="col">
<label for="eMail">Email</label>
<input type="email" onblur="validateEmail(eMail)" class="form-control" placeholder="Email" id="eMail">
</div>
</div>
<br/>
<!--Question Topic----------------------------------------------------------------------->
<h5>Select Question Category</h5>
<div class="form-group form-control">
<select id="qCategory" required>
<option selected>Select Category</option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<br>
<br>
<!-- Question Details text field ------------------------------------------------------ -->
<h5>Enter your question:</h5>
<div class="form-group">
<textarea id="txtArea" class="form-control" rows = "6" cols = "65"></textarea>
</div>
<br>
</div>
<br />
<div class="form-group">
<div>
<h5 id="formError">Please fill in entire form</h5>
<button onclick="return validForm()" type="submit" class="button button-block" id="cTModal">Create Ticket</button>
</div>
</form>
</p>
</div>
</main>
<!-- Footer include -------------------------------------------------------------------------------------- -->
<?php include("includes/footer.php"); ?>
</body>
</html>
--------BEGIN JAVASCRIPT-------------------------------------
//Checks if user has pressed update without entering fields
function validateName(x){
var re = /[A-Za-z]$/;
if (x.value == ""){
x.style.background = '#e35152';
x.style.color = 'white';
fN.value = "Please enter your first name";
lN.value = "Please enter your last name";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please use only characters";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
function validateEmail(x){
var 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,}))$/;
if (x.value == ""){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please fill in email";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "You must enter a valid email";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
function validForm(){
var eMail = document.getElementById('eMail').value;
var lastName = document.getElementById('fN').value;
var firstName = document.getElementById('lN').value;
var formError = document.getElementById('formError');
if(firstName == ''){
formError.style.display = 'block';
return false;
} else if (lastName == ''){
formError.style.display = 'block';
return false;
} else if (eMail == ''){
formError.style.display = 'block';
return false;
} else {
formError.hide();
return true;
}
}
The first thing I notice is that your formError variable is the value of the formError element not the element itself. So your call to .style will fail.
So the title pretty much says it all. The function validateForm is the one im having trouble with. Im trying to check to see if a field has not been entered then post a message (span tag) already there, yet i hide it using css. So i want that span tag that is hidden to show if one of the input fields have not been touched. I have functions to do the first name, last nam, email and phone number. I was also going to validate the check boxs and text areas in the validateform function as well. As this is a rather large website, some code will not be shown. But if you can spot the error i would greatly appreciate it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>NONEYA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt EI 9]>
<script src= "http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link rel="icon" href="images/hammerFavicon.ico" type="image/gif">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href = "css/custom/siteStyle.css">
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" "></script>
</head>
<body>
<!-- Header include -------------------------------------------------------------------------------------- -->
<?php include("includes/header.php"); ?>
<!-- Navigation include ---------------------------------------------------------------------------------- -->
<?php include("includes/navigation.php"); ?>
<!-- Main Content section -------------------------------------------------------------------------------- -->
<main role="main" class="container">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Is this information correct?</p>
<div class="myButton">
<input type="submit" value="Yes" class="btnSize"/>
<input type="button" value="No" class="btnSize"/>
</div>
</div>
</div>
<div class="jumbotron">
<!-- Paragraph for text if needed ---------------------------------------------------------------- -->
<p class="lead">
<h2>Ask Us A Question</h2>
<br />
<!-- Question submission form ---------------------------------------------------------------- -->
<form action="" onsubmit="return validateForm()">
<div class = "fiftypercentofwidth">
<!--- First Name ------------->
<div class="form-group">
<div class="col">
<label for="fN">First Name</label>
<input type="text" onblur="validateFName(fN)" class="form-control" placeholder="First Name" id="fN">
</div>
</div>
<!--Last Name -------------->
<div class="form-group">
<div class="col">
<label for="lN">Last Name</label>
<input type="text" onblur="validateLName(lN)" class="form-control" placeholder="Last Name" id="lN">
</div>
</div>
<!-- Email -->
<div class="form-group">
<div class="col">
<label for="eMail">Email</label>
<input type="text" onblur="validateEmail(eMail)" class="form-control" placeholder="Email" id="eMail">
</div>
</div>
<br>
<!-- Phone Number -->
<div class="form-group">
<div class="col">
<label for="phoneNumber">Phone number</label>
<input type="text" onblur="validatePhoneNum(phoneNumber)" class="form-control" placeholder="Phone number" id="phoneNumber">
</div>
</div>
<br>
<!--Client Question Topic----------------------------------------------------------------------->
<h5>Select Question Category</h5>
<div class="form-group form-control">
<select id="qCategory">
<option disabled selected value>select an option</option>
<option value="Family Law">Family Law</option>
<option value="Housing Issues">Housing Issues</option>
<option value="Landlord/Tennant">Landlord/Tennant</option>
<option value="Social Security & Other Benefits">Social Security & Other Benefits</option>
<option value="Consumer Law">Cosnumer Law</option>
<option value="Education Law">Education Law</option>
<option value="Elder Law">Elder Law</option>
<option value="Immigration">Immigration</option>
<option value="Veterans">Veterans</option>
<option value="Post-conviction Issues">Post-Conviction Issues</option>
<option value="Driver's License/Id Issues">Driver's License/ ID Issues</option>
<option value="Criminal Law">Criminal Law</option>
<option value="Probate Matters">Probate Matters</option>
<option value="Estate Planning">Estate Planning</option>
<option value="Small Business Development">Small Business Development</option>
</select>
<br><br>
<!-- Client Question Details text field ------------------------------------------------------ -->
<h5>Enter your question:</h5>
<div class="form-group">
<textarea class="form-control" rows = "6" cols = "65"></textarea>
</div>
<br>
</div>
<br>
<div>
<span id="formError">Please Fill in Entire Form</span>
<button onclick="validateForm()" class="button button-block" id="cTModal">Create Ticket</button>
</div>
</div>
</form>
</p>
</div>
</main>
<!-- Footer include ---------------------------------------------------------------------------------------->
<?php include("includes/footer.php"); ?>
<!--Popup validation----------------------------------------------------------------------------------------
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("cTModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
---------------------------------------------------------------------------------------------------------->
</body>
</html>
**BEGINNING OF MY JAVASCRIPT CODE**
//Checks if user has pressed update without entering fields
function validateForm(){
if($('fN').innerHTML == ''){
$('formError').style.display = 'block';
return false;
} else if ($('lN').innerHTML == ''){
$('formError').style.display = 'block';
return false;
} else if ($('eMail').innerHTML == ''){
$('formError').style.display = 'block';
return false;
} else {
$("formError").hide();
return true;
}
}
function validateFName(x){
var re = /[a-zA-Z]$/;
if (x.value == ""){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please Fill in First Name";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please Use Only Letters";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
function validateLName(x){
var re = /[a-zA-Z]$/;
if (x.value == ""){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please Fill in Last Name";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please Use Only Letters";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
function validateEmail(x){
var 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,}))$/;
if (x.value == ""){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please Fill in Email";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "You must enter a valid Email";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
function validatePhoneNum(x) {
var re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(x.value == "") {
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please enter phone number xxx-xxx-xxxx";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please enter phone number xxx-xxx-xxxx";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
Use .value (not .innerHTML) to get the value of an input element. Also, to select by ID, you need to include '#' before the string. (Also, it's better to prefer strict equality over loose equality)
You can also clean up the code some by following DRY. Example:
function validateForm() {
const inputIDs = ['fN', 'lN', 'eMail'];
const formError = document.querySelector('#formError');
if (inputIDs.some(inputID => document.getElementById(inputID).value.length === 0)) {
formError.style.display = 'block';
return false;
} else {
formError.style.display = 'none';
return true;
}
}
I am having trouble figuring out how to display values from a JavaScript to a table in HTML. I am trying to display just the even numbers between a starting number and a ending number. I believe my functions are correct but for some reason the values do not display on the page when submitted. Any help would be awesome. Thanks
function clearErrors() {
for (var loopCounter = 0; loopCounter < document.forms["displayEvens"].elements.length; loopCounter++) {
if (document.forms["displayEvens"].elements[loopCounter]
.parentElement.className.indexOf("has-") != -1) {
document.forms["displayEvens"].elements[loopCounter]
.parentElement.className = "form-group";
}
}
}
function resetForm() {
clearErrors();
document.forms["displayEvens"]["startingNumber"].value = "";
document.forms["displayEvens"]["endingNumber"].value = "";
document.forms["displayEvens"]["step"].value = "";
document.getElementById("results").style.display = "none";
document.getElementById("submitButton").innerText = "DisplayEvens";
document.forms["displayEvens"]["startingNumber"].focus();
}
function displayEvens(startingNumber, endingNumber, step) {
var startingNumber =
parseInt(document.getElementById("startingNum").value);
var endingNumber = parseInt(document.getElementById("endingNum").value);
var step = parseInt(document.getElementById("stepNum").value);
var evenNums = [];
for (var i = startingNumber; i < endingNumber; i += step) {
if (i % 2 == 0) {
evenNums.push(i);
}
}
document.getElementById("evens").innerText = evenNums;
}
function validateItems() {
clearErrors();
displayEvens(startingNumber, endingNumber, step);
console.trace("got here!");
//var startingNumber = document.forms["displayEvens"]
["startingNumber"].value;
//var endingNumber = document.forms["displayEvens"]
["endingNumber"].value;
//var step = document.forms["displayEvens"]["step"].value;
if (startingNumber == "" || isNaN(startingNumber)) {
alert("Starting Number must be filled in with a number.");
document.forms["displayEvens"]["startingNumber"]
.parentElement.className = "form-group has-error";
document.forms["displayEvens"]["startingNumber"].focus();
return false;
}
if (endingNumber == "" || isNaN(endingNumber)) {
alert("Ending Number must be filled in with a number.");
document.forms["displayEvens"]["endingNumber"]
.parentElement.className = "form-group has-error"
document.forms["displayEvens"]["endingNumber"].focus();
return false;
}
if (endingNumber <= startingNumber) {
alert("Ending Number must be greater than the Starting number.");
document.forms["displayEvens"]["endingNumber"]
.parentElement.className = "form-group has-error"
document.forms["displayEvens"]["endingNumber"].focus();
return false;
}
if (step == "" || isNaN(step)) {
alert("Step Number must be filled in with a number.");
document.forms["displayEvens"]["step"]
.parentElement.className = "form-group has-error"
document.forms["displayEvens"]["step"].focus();
return false;
}
if (step < 0) {
alert("Step Number must be filled in with a positive number.");
document.forms["displayEvens"]["step"]
.parentElement.className = "form-group has-error"
document.forms["displayEvens"]["step"].focus();
return false;
}
//document.getElementById("results").style.display = "block";
//document.getElementById("submitButton").innerText = "Recalculate";
document.getElementById("startingNum").innerText =
Number(startingNumber);
document.getElementById("endingNum").innerText = Number(endingNumber);
document.getElementById("stepNum").innerText = Number(step);
document.getElementById("evens").innerText = Number(evenNums);
return false;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript" src="displayEvens.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Display Evens</h1>
<form name="displayEvens" onsubmit="return validateItems();" onreset="resetForm();">
<div class="form-group row">
<label for="startingNumber" class="col-sm-2 col-form-
label">Starting Number</label>
<div class="col-sm-10">
<input type="number" class="form-control" ` id="startingNumber" ` placeholder="Enter a number" />
</div>
</div>
<div class="form-group row">
<label for="endingNumber" class="col-sm-2 col-form-`
label">Ending`
Number</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="endingNumber" placeholder="Enter a number" />
</div>
</div>
<div class="form-group row">
<label for="step" class="col-sm-2 col-form-
label">Step</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="step" placeholder="Enter a number" />
</div>
</div>
<button type="submit" id="submitButton" class="btn btn-
default">Display Evens</button>
<button type="reset" id="resetButton" class="btn">Reset</button>
</form>
</br>
<table id="results" class="table table-striped">
<thead>
<tr>
<td>Even numbers between <span id="startingNum"></span> and
<span id="endingNum"></span> by <span id="stepNum"></span></td>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><span id="evens"></span></td>
</tbody>
</table>
</div>
<!--<div id="results" style="display:none;">
<h3>Results:</h3>
<span id="evens"></span>
<h3>Your Starting Number:</h3>
<span id="start"></span></br>
<h3>Your Ending Number:</h3>
<span id="end"></span></br>
<h3>Your Step Number:</h3>
<span id="step"></span>
</div>-->
</body>
</html>
There's a fundamental issue wrong with your html. You are using the same id attribute on multiple elements. The id attribute should be used only on one element because it is a unique identifier.
Also when you have cleaned that up you can change your line
document.getElementById("endingNum").innerText = Number(endingNumber);
replace it with
document.getElementById("endingNum").append(Number(endingNumber))
instead
i want pass the 45 second quickly using console or java script.form a page now how can I do tis ..
the page Html is
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Appointment Login</title>
<link href="css/Online_regular.css" rel="stylesheet" type="text/css">
<link href="css/jquery_theme_tvoa.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/declarations.js?rev=05082016"></script>
<style>
#form_info{
display:none;
position: fixed;
margin:0 auto;
top: 1%;
left: 50%;
margin-left: -25%;
width: 50%;
height: 50%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 1;
z-index: 10000;
}
#overlay{
width:100%;
height:100%;position: fixed;
z-index:0;
top: 0;
left:0;
background:rgba(0,0,0,0.5);
}
ul.form_info_list {
font-weight: bold;
}
ul.form_info_list li {
font-weight: normal;
}
.know_req_info_span{
color:#2080c9;
font-size: 1.1em;
cursor:pointer;
}
ul.errorMessage li{
list-style-type: none;
color:red;
}
</style>
<script>
function refreshCaptcha()
{
try
{
var d = new Date();
var n = d.getTime();
//document.getElementById("capt").src="images/1.jpg";
//alert("hi");
document.getElementById("capt").src = "captcha?rand=" + n;
}
catch (e)
{
alert(e);
}
return false;
}
function image_loaded() {
var width = $('#capt').css('width');
if (width === 200 || width === "200px" || width === '200px') {
$('#label1').html("Access Code");
$('#label2').html("Enter Access Code");
}
else {
$('#label1').html("Question");
$('#label2').html("Answer");
}
}
window.onload = function () {
document.onkeydown = function (e) {
return (e.which || e.keyCode) != 116;
}
}
$(document).ready(function () {
});
</script>
</head>
<body onload="backButtonOverride()">
<br>
<div class="wrapper">
<div class="pageHeader"></div>
<div class="pageHeading1 text_center">
Appointment Login
<img src="./images/home.png" style=" width: 30px; height:26px;" align="right">
</div>
<div class="container">
<div class="form_container">
<form method="post" autocomplete="off" action="Get_Appointment" onsubmit="return validate_appointmentLogin_form();">
<!--onsubmit="return validate_appointmentLogin_form()" -->
<div class="row text_center" id="generate_otp_msg" style="font-weight:bold;font-size: 14px;padding-bottom: 10px;color:#BF0D0D">
</div>
<div class="row">
<div class="col-31"></div>
<div class="col-32">
<input name="otp_required" value="generate_otp" id="generate_otp" onclick="otpmgt()" type="radio"> I want to Generate OTP
<br>
<input name="otp_required" value="have_otp" id="have_otp" onclick="otpmgt()" type="radio">I have received OTP
<br><input name="otp_required" value="send_alotment_sms" id="send_alotment_sms" onclick="otpmgt()" type="radio"> Re-send Appointment Confirmation SMS.</div>
<div class="col-33"></div>
</div>
<div class="row">
<div class="col-31 mandatory">Application Id</div>
<div class="col-32"><input name="filerfno" id="application_id" size="50" maxlength="12" title="Please Enter your Application Id" value="" type="text"></div>
<div class="col-33">Please enter application id</div>
</div>
<div class="row">
<div class="col-31 mandatory">Passport Number</div>
<div class="col-32"><input name="passport_no" id="passport_no" size="50" maxlength="14" title="Please Enter your Passport No. As in Passport" value="" type="text"></div>
<div class="col-33">Please enter passport no</div>
</div>
<div class="row">
<div class="col-31 mandatory"> <img src="DisplayDynamicField1"></div>
<div class="col-32"><input name="121658" class="textBoxDashed app_field" size="20" maxlength="50" onkeyup="chkString(this)" onblur="trim1(this);" type="text"></div>
<div class="col-33"></div>
</div>
<div class="row">
<div class="col-31 mandatory"> <img src="DisplayDynamicField2"></div>
<div class="col-32"><input name="813988" class="textBoxDashed app_field" size="20" maxlength="50" onkeyup="chkString(this)" onblur="trim1(this);" type="text"></div>
<div class="col-33"></div>
</div>
<div class="row cotp" style="">
<div class="col-31 mandatory ">OTP</div>
<div class="col-32"><input name="otp" id="otp" size="50" maxlength="6" value="" type="password"></div>
<div class="col-33"></div>
</div>
<div class="row">
<div class="col-1" id="label1">Question</div>
<div class="col-2"> <img src="captcha" id="capt" onload="image_loaded();" style="display: inline">
</div>
<div class="col-3"><img src="images/refresh.png" style="width:30px;height:30px;display: inline"></div>
</div>
<div class="row">
<div class="col-1 mandatory" id="label2">Answer</div>
<div class="col-2"><input name="captcha" id="captcha" maxlength="20" type="text"></div>
<div class="col-3 errorify" style="list-style-type: none"> <ul class="errorMessage">
<li><span>Invalid Captcha</span></li> </ul>
You can submit request after 32 seconds
</form>
</div>
<br><br>
<b>Instructions for Appointment</b>
<ul class="instructions_ul text_bold">
<li>Applicants for tourist visa need an appointment date to submit their applications at IVACs</li>
<li> A one-time password (OTP) will be sent to mobile phone of the applicant which is required for securing the appointment date.</li>
<li>Applicants should fill in their details carefully and provide the correct mobile number.</li>
<li>The appointment will be sent as an SMS on the mobile phone of the applicant. This SMS should be shown by the applicant at the IVAC Center to enter and deposit the application</li>
<li>OTP can be generated only after the appointment time starts. </li>
<li>Appointment can be booked only after logging in using OTP. </li>
<li>OTP is valid for 20 minutes.</li>
<li>Maximum 3 OTPs can be generated on a given day for a File Number.</li>
</ul>
</div>
</div>
<script>
function generate_otp(filerfno_var,passport_no_var) {
$('#error_msg').html('');
var value1_var=document.getElementsByClassName("app_field")[0].value;
var value2_var=document.getElementsByClassName("app_field")[1].value;
if(document.getElementById('generate_otp').checked == true)
var otp_required_var="generate_otp";
else if(document.getElementById('have_otp').checked == true)
var otp_required_var="have_otp";
else if(document.getElementById('send_alotment_sms').checked == true)
var otp_required_var="send_alotment_sms";
var otp_var=document.getElementById("otp").value;
var captcha_var=document.getElementById("captcha").value;
//http://localhost:8084/struts_bgd/json/GenerateOtp?filerfno=BGDDV0004116&passport_no=PASS123&value1=TEST&value2=TEST
$.ajax({
type: "POST",
url: "json/GenerateOtp",
dataType: "json",
data: {filerfno : filerfno_var,passport_number:passport_no_var,value1:value1_var,value2:value2_var,otp_required:otp_required_var,otp:otp_var,captcha:captcha_var},
success: function (data) {
//alert(data['sms_output']);
alert(data);
$('#generate_otp_msg').text(data);
refreshCaptcha();
$('#captcha').val('');
$('#have_otp').prop('checked', false);
$('#generate_otp').prop('checked', false);
$('#send_alotment_sms').prop('checked', false);
}
})
.done(function (data) {
})
.fail(function () {
alert("Some problem occurred");
})
.always(function () {
});
}
var refreshIntervalId;
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? minutes : minutes;
seconds = seconds < 10 ? seconds : seconds;
// display.text(minutes + ":" + seconds);
display.text(seconds);
$('#timer_msg').html('You can submit request after '+seconds+' seconds');
if (--timer < 0) {
$('#timer_msg').html('<input name="submit_btn" id="btn1" type="submit" class="btn btn-primary" value="Submit">');
return;
}
}, 1000);
}
function otpmgt() {
var otp_check = null;
$('#error_msg').html('');
if (document.getElementById('have_otp').checked == true)
{
otp_check = document.getElementById('have_otp').value;
$('.cotp').css('display', '');
$('#otp').prop('disabled', false);
//call timer function
$('#timer_msg').html('');
startTimer(45, $('#btn_time'));
document.getElementById("otp").disabled = false;
}
else if (document.getElementById('generate_otp').checked == true)
{ //submit request through ajax
clearInterval(refreshIntervalId);
alert("OTP will be sent to your registered mobile number.");
otp_check = document.getElementById('generate_otp').value;
$('.cotp').css('display', 'none');
$('#otp').val('');
$('#otp').prop('disabled', true);
$('.cappt_mobile').css('display', '');
$('#btn1').val('Generate OTP');
document.getElementById("otp").disabled = true;
//display submit button now
$('#timer_msg').html('<input name="submit_btn" id="btn1" type="submit" class="btn btn-primary" value="Generate OTP" >');
} else if (document.getElementById('send_alotment_sms').checked == true)
{
clearInterval(refreshIntervalId);
otp_check = document.getElementById('send_alotment_sms').value;
$('.cotp').css('display', 'none');
$('#otp').val('');
$('#otp').prop('disabled', true);
$('.cappt_mobile').css('display', 'none');
document.getElementById("otp").disabled = true;
$('#timer_msg').html('<input name="submit_btn" id="btn1" type="submit" class="btn btn-primary" value="Send Allotment SMS" >');
}
}
function validate_appointmentLogin_form() {
var f1 = document.getElementsByClassName('app_field')[0].value;
var f2 = document.getElementsByClassName('app_field')[1].value;
var otp_value = document.getElementById("otp").value;
var otp_length = otp_value.length;
var otp_required_val = "";
var otp_required_check = ($('input[type=radio]:checked').size() > 0);// false
var submit = true;
var result = "";
if (document.getElementById('application_id') != undefined) {
result = validate_filenumber($('#application_id').val(), 1);
if (result != "true")
{
errorify($('#application_id'), result);
submit = false;
}
else
{
correctify($('#application_id'), "Please enter application id");
}
}
if (document.getElementById('passport_no') != undefined) {
result = validate_passportNo($('#passport_no').val(), 1);
if (result != "true")
{
errorify($('#passport_no'), result);
submit = false;
}
else
{
correctify($('#passport_no'), "");
}
}
//if(f1 == null || f1.value == "" || isEmpty(f1)||f1.length==0)
if (f1 == "" || f1.length == 0)
{
result = validate_passportNo(f1, 1);
errorify($(document.getElementsByClassName('app_field')[0]), "Please enter all mandatory details");
submit = false;
} else
{
correctify($(document.getElementsByClassName('app_field')[0]), "");
}
if (f2 == "" || f2.length == 0)
{
//alert("Please Enter All mandtory fields"+document.getElementsByClassName('app_field')[1]);
errorify($(document.getElementsByClassName('app_field')[1]), "Please enter all mandatory details");
submit = false;
}
else
{
correctify($(document.getElementsByClassName('app_field')[1]), "");
}
if (otp_required_check)
{
correctify($('#have_otp'), "");
if (document.getElementById('have_otp').checked == true && otp_value.length == 0) {
errorify($('#otp'), "Please enter otp");
submit = false;
// alert("Have OTP and Length= 0. Submit = " + submit);
}
else
{
correctify($('#otp'), "");
}
if (document.getElementById('have_otp').checked == true && otp_value.length < 6) {
errorify($('#otp'), "Please enter correct otp");
submit = false;
// alert("Have OTP and Length< 6. Submit = " + submit);
}
else
{
correctify($('#otp'), "");
}
}
else
{
errorify($('#have_otp'), "Please select at least one option.");
submit = false;
}
if (document.getElementById('captcha') != undefined) {
result = validate_captcha($('#captcha').val(), 1);
if (result != "true")
{
errorify($('#captcha'), result);
submit = false;
}
else
{
correctify_lowercase($('#captcha'), "");
}
}
//if generate otp is clicked then submit function by ajax else submit to action
if(document.getElementById('generate_otp').checked == true && submit == true){
//call ajax function to generate otp
//disable submit button here
generate_otp($('#application_id').val(),$('#passport_no').val());
submit=false;
}
return submit;
}
</script>
enter image description here
please help me to do this..
// store the current time (when the script loads)
var start = new Date();
// in the form submit event
function submit(e) {
if (new Date() - start < 45000) {
// stop the form submitting
e.preventDefault();
// show the message
msg45secs.style.display = "block";
}
else {
// whatever you want to do if the time checks out
// if you want to just let it submit, you don't need to do anything. you can remove the `else` if you like.
}
}
So the two Functions (chForumular() and validate_user_text()) have both to be true to submit the form. Right now you cant send the form without fil in the username, age(in the code Alter) and your E-Mail. but the second function (validate_user_text) should check if there is any swear word in the message (=Nachricht) right know it submits the form after you fil in the three fields (e-mail, name and age). iven if you type in an swearword in the textarea. (something like: sorry ((asshole)))
If you dont understand a Word you think could be important just write the word to me so I can translate...(German and Swissgerman Words in the Code)
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/kontakt.css" media="screen">
<title>Kontaktseite</title>
<meta charset="utf-8">
<script type="text/javascript">
function chkFormular () {
if (document.Formular.User.value == "") {
alert("Enter your Name, Please!");
document.Formular.User.focus();
return false;
}
// if (document.Formular.Ort.value == "") {
// alert("Bitte Ihren Wohnort eingeben!");
// document.Formular.Ort.focus();
// return false;
// }
if (document.Formular.Mail.value == "") {
alert("Enter your E-Mail, please!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("#") == -1) {
alert("No valid E-Mail, address!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Alter.value == "") {
alert("Enter your Age, please!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
alert("Your Age is not a Number!");
document.Formular.Alter.focus();
return false;
}
}
</script>
<script language="JavaScript1.2">
// Word Filter
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// http://javascript.qik.cjb.net
var swear_words_arr=new Array("arschloch","idiot","terror", "wixer", "wixxer", "hure", "hurensohn", "hurenson", "motherfucker", "neger", "sauhund", "arsch", "fuck", "fucking", "shit", "satan",
"satanus", "figge", "ficken", "scheiss", "drecksjude", "drecksjud", "i hoff du stirbsch", "geh sterben", "verrecken", "verreck doch", "chrüppel", "krüppel", "chrüpel", "krüpel", "saftsack",
"sackratte", "god damit", "goddamit", "godvertammi", "gopfetammi", "chrüzsatan", "gottvertammi", "gottpfertami", "gopfeteckel", "verflucht", "verfluecht", "damisiech", "ich hoffe du stirbst",
"stirb", "geh sterben", "ass", "asshole", "cunt"); //corrected commas
var swear_alert_arr=new Array;
var swear_alert_count=0;
function reset_alert_count()
{
swear_alert_count=0;
}
function validate_user_text()
{
reset_alert_count();
var compare_text=document.Formular.user_text.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="\n" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("The following Words are not allwoed:\n_______________________________\n" + alert_text + "\n_______________________________");
document.Formular.user_text.select();
}
else
{
document.Formular.submit();
}
}
function select_area()
{
document.Formular.user_text.select();
}
window.onload=reset_alert_count;
</script>
</head>
<body>
<h1>Kontaktformular</h1>
<nav>
<ul class="nav">
<li>Zurück</li>
</ul>
</nav>
<div id="part1">
<form name="Formular" action="http://www.formular-chef.de/fc.cgi" enctype="multipart/form-data" method="post" onSubmit="return chkFormular()">
<input type="hidden" name="empfaenger" value="benjamin.laubeX§Xbrueggli.ch">
<!--<input type="hidden" name="empfaenger" value="dominik.widmerX§Xbrueggli.ch">-->
</div>
<div id="part2">
<pre>
Name: <input type="text" size="40" name="User"><br>
E-Mail: <input type="text" size="40" name="Mail"><br>
Alter: <input type="text" size="40" name="Alter"><br>
Geschlecht: <select name="geschlecht">
<option selected>-</option>
<option>männlich</option>
<option>weiblich</option>
</select>
</div>
<p id="nachricht">Deine Nachricht:</p>
<div id="part3">
<textarea rows="10" cols="40" name="user_text" onclick="select_area()" placeholder="Ihre Nachricht..."></textarea>
</div>
<div id="part4">
Zum Absenden muss eine Internet-Verbindung bestehen!
<br><br>
<input type="submit" value="Absenden" onclick="validate_user_text();"><input type="reset" value="Abbrechen">
</div>
</pre>
</form>
</body>
</html>
This should do the trick:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/kontakt.css" media="screen">
<title>Kontaktseite</title>
<meta charset="utf-8">
<script type="text/javascript">
function chkFormular () {
if (document.Formular.User.value == "") {
alert("Enter your Name, Please!");
document.Formular.User.focus();
return false;
}
// if (document.Formular.Ort.value == "") {
// alert("Bitte Ihren Wohnort eingeben!");
// document.Formular.Ort.focus();
// return false;
// }
if (document.Formular.Mail.value == "") {
alert("Enter your E-Mail, please!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("#") == -1) {
alert("No valid E-Mail, address!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Alter.value == "") {
alert("Enter your Age, please!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
alert("Your Age is not a Number!");
document.Formular.Alter.focus();
return false;
}
return true;
}
</script>
<script language="JavaScript1.2">
// Word Filter
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// http://javascript.qik.cjb.net
var swear_words_arr=new Array("arschloch","idiot","terror", "wixer", "wixxer", "hure", "hurensohn", "hurenson", "motherfucker", "neger", "sauhund", "arsch", "fuck", "fucking", "shit", "satan",
"satanus", "figge", "ficken", "scheiss", "drecksjude", "drecksjud", "i hoff du stirbsch", "geh sterben", "verrecken", "verreck doch", "chrüppel", "krüppel", "chrüpel", "krüpel", "saftsack",
"sackratte", "god damit", "goddamit", "godvertammi", "gopfetammi", "chrüzsatan", "gottvertammi", "gottpfertami", "gopfeteckel", "verflucht", "verfluecht", "damisiech", "ich hoffe du stirbst",
"stirb", "geh sterben", "ass", "asshole", "cunt");
var swear_alert_arr=new Array;
var swear_alert_count=0;
function reset_alert_count()
{
swear_alert_count=0;
}
function validate_user_text()
{
reset_alert_count();
var compare_text=document.Formular.user_text.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="\n" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("The following Words are not allwoed:\n_______________________________\n" + alert_text + "\n_______________________________");
document.Formular.user_text.select();
}
else
{
return true;
}
}
function select_area()
{
document.Formular.user_text.select();
}
window.onload=reset_alert_count;
</script>
</head>
<body>
<h1>Kontaktformular</h1>
<nav>
<ul class="nav">
<li>Zurück</li>
</ul>
</nav>
<div id="part1">
<form id="frmFormular" name="Formular" action="http://www.formular-chef.de/fc.cgi" enctype="multipart/form-data" method="post">
<input type="hidden" name="empfaenger" value="benjamin.laubeX§Xbrueggli.ch">
<!--<input type="hidden" name="empfaenger" value="dominik.widmerX§Xbrueggli.ch">-->
</div>
<div id="part2">
<pre>
Name: <input type="text" size="40" name="User"><br>
E-Mail: <input type="text" size="40" name="Mail"><br>
Alter: <input type="text" size="40" name="Alter"><br>
Geschlecht: <select name="geschlecht">
<option selected>-</option>
<option>männlich</option>
<option>weiblich</option>
</select>
</div>
<p id="nachricht">Deine Nachricht:</p>
<div id="part3">
<textarea rows="10" cols="40" name="user_text" onclick="select_area()" placeholder="Ihre Nachricht..."></textarea>
</div>
<div id="part4">
Zum Absenden muss eine Internet-Verbindung bestehen!
<br><br>
<input type="submit" id="sendButton" value="Absenden">
<input type="reset" value="Abbrechen">
<script>
document.getElementById('sendButton').onclick = function() {
if (chkFormular() && validate_user_text()) {
document.formular.submit();
return true;
} else {
return false;
}
}
</script>
</div>
</pre>
</form>
</body>
</html>
Just change the submit part.
onSubmit="return chkFormular() && validate_user_text()"