show/hide dynamic error messages and prevent default - javascript

I've got a simple form to validate and I can't use jQuery validate().
I've made two error messages - one for a checkbox group and one for an email confirmation mismatch.
Here is the form
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>testForm</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container main">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 logo">
<p class="text-center">Use this form to request more information.</p>
<div class="well">
<form name="enrol" id="enrol" xmp-register class="form-horizontal">
<div class="form-group" id="checkboxGroup">
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="flexi" name="checkBoxes"> Yes, email me more information about Scheme 1</label>
</div>
</div>
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="kiwi" name="checkBoxes"> Yes, email me more information about Scheme 2</label>
</div>
</div>
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="protect" checkBoxes="protect"> Yes, email me more information about Scheme 3</label>
</div>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-md-3 col-lg-4 control-label"> First name </label>
<div class="col-md-8 col-lg-7">
<input type="text" name="firstName" maxlength="42" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-md-3 col-lg-4 control-label"> Last name </label>
<div class="col-md-8 col-lg-7">
<input type="text" name="lastName" maxlength="42" class="form-control" required>
</div>
</div>
<div id="emailGroup">
<div class="form-group">
<label for="email" class="col-md-3 col-lg-4 control-label"> Email address </label>
<div class="col-md-8 col-lg-7">
<input type="email" id="email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="confirmEmail" class="col-md-3 col-lg-4 control-label"> Confirm email address </label>
<div class="col-md-8 col-lg-7">
<input type="email" id="confirmEmail" name="confirmEmail" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-number" class="col-md-3 col-lg-4 control-label"> Contact number </label>
<div class="col-md-4">
<input type="text" name="contactNumber" class="form-control" pattern="\d+">
</div>
<div class="col-md-4 col-lg-3">
<select name="contactNumberType" class="form-control">
<option value="" disabled="disabled" selected="selected">Type</option>
<option value="mobile">Mobile</option>
<option value="business-hours">Business Hours</option>
<option value="after-hours">After Hours</option>
</select>
</div>
</div>
<div class="form-group">
<label for="memberNumber" class="col-md-3 col-lg-4 control-label" style="padding-top:0px;"> Member number
<br>(if you already have one)</label>
<div class="col-md-8 col-lg-7">
<input type="number" name="memberNumber" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-md-offset-1">
<input id="submitBtn" name="submitBtn" type="submit" value="Complete" class="form-control btn btn-primary">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--[if lte IE 7]>
<script src="https://raw.github.com/mattpowell/localstorageshim/master/localstorageshim.min.js" type="text/javascript"></script>
<![endif]-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- WM coding -->
<script src="so.js"></script>
</body>
</html>
and here is the JS
$(document).ready(function () {
// set flags to control error messages
var emailError = false;
var selectionError=false;
$("#submitBtn").click({
// validation checks performed on submit:
// 1. check that at least one checkbox is checked
emailError,selectionError // passing parameters to click function
}, function (event) {
var flexibox = document.getElementById("flexi");
var kiwibox = document.getElementById("kiwi");
var protectbox = document.getElementById("protect");
var mainEmail = document.getElementById("email").value;
var confirmEmail = document.getElementById("confirmEmail").value;
var noSelection = checkRequest(); // check if selection made
var emailMismatch = checkEmails(mainEmail, confirmEmail);
console.log(noSelection);
if (noSelection || emailMismatch) { // checks the first element of variable returned
event.preventDefault();
}
function checkRequest() {
if (protectbox.checked == false && (kiwibox.checked == false && flexibox.checked == false)) { //no option selected
if (selectionError === false) { // if no error message showing
$("#checkboxGroup").after( // add error message
'<div id="noSelect" class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8"><p style="color:red;">Please select at least one option.</p></div>'
);
selectionError = true; //update flag to avoid multiple error messages on repeated submit attempts
}
return selectionError; // exit
} else { // something is selected
$("#noSelect").remove(); // remove error message
selectionError=false; //reset flag
return selectionError; //exit
}
}
function checkEmails(mainEmail, confirmEmail) {
if (mainEmail != confirmEmail) { //2. email addresses don't match
if (emailError === false) { // if no error message showing
$("#emailGroup").after( // add error message
'<div id="emailMismatch" class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8"><p style=color:red;">Please ensure the email addresses match.</p></div>'
);
emailError = true; //update flag to avoid multiple error messages on repeated submit attempts
}
return true;
} else if (mainEmail == "" || confirmEmail == "") { // to stop email error message showing when the fields haven't been filled
return emailError;
} else {
return emailError;
}
}
});
});
// force Sarari to honour required attributes
jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.7/minified/polyfiller.js')     .done(function () {         
webshims.polyfill('forms');          
});
The problem I'm having is that the checkbox group error message hides and shows each time a submit attempt is made - works OK, but the email mismatch error shows once and then can't be removed and the form won't submit, even when an email mismatch has been corrected.
When I inspect the page in Chrome and step through the code, I can see that the two variables for the email check, "mainEmail" and "confirmEmail" do match, but the following statements are skipped as if they do not match.
If anyone could give me some help with this I'd be really grateful. I'm sure that the code is unnecessarily lengthy - I'm pretty much a beginner.
Thanks and regards,
Malcolm

You're not unsetting the error message nor setting emailError to false . Change the else block of checkEmail to
else {
emailError = false;
$("emailMismatch").remove();
return emailError;
}

Related

Radio button validation alert not showing - works on everything else

I'm creating a cfmail form for a nonprofit to allow potential vendors to request a spot at the next fundraiser. All fields are required but the radio buttons are not showing the validation alert if not selected.
EDIT:
I need the user to check either Yes or No when asked "Will vendor be selling at the event?" If the user checks "Yes", we'll display additional fields (State Tax ID and a textarea asking for more details on their product) that will be REQUIRED. If the user selects "NO" the TaxID and Details will NOT be required but we will be eventually be adding questions as to if they're a 501c3 or not.
I'm javascript illiterate so I had someone else write the JS but she had to move on to other obligations before getting the radio buttons working and I need this working before she'll have time to get back to it. Any help would be greatly appreciated.
Here's the Code:
// phone number
function phoneFormat(input) { //returns (###) ###-####
input = input.replace(/\D/g, '');
var size = input.length;
if (size > 0) {
input = "(" + input
}
if (size > 3) {
input = input.slice(0, 4) + ") " + input.slice(4, 11)
}
if (size > 6) {
input = input.slice(0, 9) + "-" + input.slice(9)
}
return input;
}
$(document).ready(function() {
$("#submitall").click(function() {
if (oked) {
$('#submitall').prop('disabled', true);
$("#submitall").html("Sending...");
$("#submitall").submit();
}
});
$('#salesyes').click(function() {
if ($('#salesyes').is(':checked')) {
$("#statesales").css("display", "block");
$("#StateTaxNumber").prop('required', true);
$("#Details").prop('required', true);
} else {
$("#statesales").css("display", "none");
$("#StateTaxNumber").prop('required', false);
$("#Details").prop('required', false);
}
});
$('#salesno').click(function() {
if ($('#salesno').is(':checked')) {
$("#statesales").css("display", "none");
$("#StateTaxNumber").prop('required', false);
$("#Details").prop('required', false);
} else {
$("#statesales").css("display", "block");
$("#StateTaxNumber").prop('required', true);
$("#Details").prop('required', true);
}
});
});
function countChecked() {
//$("#validateSend").bind('change', function() {
console.log("validateSend clicked");
var cBox = $("#validateSend");
console.log(cBox);
console.log(cBox.prop('checked'));
if (cBox.prop('checked')) {
$('#submitall').prop('disabled', false);
} else {
$('#submitall').prop('disabled', true);
}
}; //end countchecked
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false || $('input[name="Sales"]:checked').length == 0) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- vendor app -->
<div class="container mt-2">
<div class="row justify-content-center mt-5">
<div class="col-sm-12 col-md-10 Sponsors text-center">
<form class="needs-validation" action="/Vendors/index.cfm" id="Vendors" method="post" novalidate>
<input type="hidden" name="Vendors_submit" value="yes">
<!-- company name -->
<div class="form-group row">
<label for="Company" class="form-label text-right">Business/Organization:<sup class="text-danger">*</sup></label>
<input id="Company" name="Company" placeholder="Business/Organization Name" type="text" class="form-control" style="text-transform: capitalize;" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter the name of the company or individual interested in the Vendor spot.
</div>
</div>
<!-- phone -->
<div class="form-group row">
<label for="Phone" class="form-label text-right">Phone:<sup class="text-danger">*</sup></label>
<input id="phone" name="phone" type="tel" placeholder="(555) 555-5555" class="form-control input-md" onInput="this.value = phoneFormat(this.value)" />
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter your phone number.
</div>
</div>
<!-- is vendor selling? -->
<div class="form-group row mt-5">
<div class="col-12 text-center">
<strong>Will vendor be selling at the event?<sup class="text-danger">*</sup></strong>
</div>
</div>
<div class="form-group row">
<div class="col-12 text-center my-auto">
<input class="align-left" type="radio" name="Sales" id="salesyes" value="Yes" required> Yes
<input class="align-left ml-5" type="radio" name="Sales" id="salesno" value="No"> No
</div>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-center">
Please select Yes or No.
</div>
</div>
<!-- State Sales Tax certificate -->
<div id="statesales" style="display:none">
<div class="form-group row">
<div class="col-12 text-left font-italic text-danger mb-4">
Some notice stuff here.
</div>
</div>
<div class="form-group row">
<label for="StateTaxNumber" class="form-label text-left">State Sales Tax Number:<sup class="text-danger">*</sup></label>
<input id="StateTaxNumber" name="StateTaxNumber" placeholder="State Sales Tax Number if applicable" type="text" class="form-control">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter State sales tax number.
</div>
</div>
<!-- details -->
<div class="form-group row">
<label for="Details" class="form-label">Please describe product or service for sale:<sup class="text-danger">*</sup></label>
<textarea id="Details" name="Details" cols="40" rows="5" class="form-control"></textarea>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter your details.
</div>
</div>
</div>
<!--./end display-none -->
<!-- agree to regulations / restrictions -->
<div class="form-group row justify-content-center">
<div class="col-10 text-center my-auto text-danger">
<input type="checkbox" name="validateSend" id="validateSend" value="1" onclick="countChecked();" /><sup class="text-danger">*</sup>
<i>I have read and understand all the Park's rules and regulations as well as the Requirements and Restrictions listed above.<sup class="text-danger">*</sup>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback text-left">
Please enter your details.
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<button name="submitall" id="submitall" type="submit" class="btn btn-lg btn-danger mt-4 ml-2 text-center" disabled="disabled">Send Request</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Grab input from HTML and pass it to GS

Context
I'm adding different functionalities to a Google Spreadsheet through Google Scripts. One of these functionalities I'd like to add is for a form to pop up, details to be added in and an email to be sent. The form (see below) is WIP and fields are yet to be fully defined.
UPDATED based on Alessandro's feedback.
New form in HTML following the same principles.
< Script > within HTML updated based on feedback
JS updated based on feedback
Doesn't work yet.
HTML
<p>To add new tasks for a specific campaign setup, please start specifying what project, campaign, platform and phase you want to add tasks for.</p>
<p>PROJECT</p>
<form id="briefForm" onsubmit="handleFormSubmit(this)">
<div class="container">
<div class="row">
<div class="col-6"><!--left side -->
<div class="form-group row">
<label for="fname" class="col-sm-6 col-form-label">Project:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="project">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Platform:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="platform">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="campaign" class="col-sm-6 col-form-label">Campaign:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="campaign">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Phase:</label>
<div class="col-sm-6">
<div class="row">
<div class="col">
<select name="Month" class="custom-select">
<option value="march">None</option>
<option value="january">Awar.</option>
<option value="february">Cons.</option>
<option value="march">Both</option>
</select>
</div>
</div>
</div>
</div>
</div><!--right side -->
</div><!-- form for teacher/student-->
</div>
<p>TASKS</p>
<div class="container">
<p>Select the relevant tasks to add to this project.</p>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Review assets</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Send brief</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">Set up</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4">Quality check</label>
</div>
</div>
<br>
<input type="submit" id="submitbtn" class="btn btn-primary">
</form>
<!-- Script down here -->
<script>
window.closeDia = function() {
var formObject = {
platform: document.getElementById('platform').value,
project: document.getElementById('project').value,
// other form input fields...
}
google.script.run.sendBrief(formObject);
};
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
JS (contains both openBrief and sendBrief)
function openBrief() {
var s=SpreadsheetApp.getActive();
var htmlDlg = HtmlService.createHtmlOutputFromFile('tasksHTML')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(750)
.setHeight(450);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'New tasks for new campaign setup 📝');
}
function sendBrief(formObject) {
var project = formObject.project;
var platform = formObject.platform;
// and so on...
var s = SpreadsheetApp.getActiveSpreadsheet();
var ss = s.getSheetByName("Support"); // Enter sheet name
var rangeProject = ss.getRange('AA2');
rangeProject.setValue(project)
}
Considerations
You are trying to reference the DOM in a server-side script. This won't be possible. In this case you will have to pass the forms values to the server-side script called by the google.script.run method.
Solution
I see that you are using a click event handler for the submit button. In this case you can update the closeDia function and create a JSON Object with the forms fields values.
To do so pick each element by their id and put their values in a JSON Object, then pass it to the server-side function.
<script>
window.closeDia = function() {
var formObject = {
email: document.getElementById('email').value,
project: document.getElementById('project').value,
// other form input fields...
}
google.script.run.sendBrief(formObject);
};
</script>
Now you can easily parse the JSON you passed to the server-side as follows:
// Server Side: Code.gs
function sendBrief(formObject) {
var project = formObject.project;
var email = formObject.email;
// and so on...
}
Reference
Client-to-Server Communication: Forms

Need Password and username validation for login page

I am having a login page where the i have entered script to check the empty username and password, now want to change the class of password input to "has- error" and also do the same for username if the data entered by he user is wrong, ie if the username entered by the user does not exist in my database then the username field must show error and if the password is wrong the password field must show error. I am new to php and bootstrap which i have used for my page
javascript code is
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/formValidation.min.js"></script>
<script src="../dist/js/formValidation.js"></script>
<script type="text/javascript">
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.addClass("has-error");
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
return true;
}
}
$(document).ready(function()
{
$("#custbtn").click(function()
{
if(!validateText("cusername"))
{
return false;
}
if(!validateText("cpassword"))
{
return false;
}
$("form#loginfom").submit();
});
});
</script>
the page code is:
<div class="row">
<div class=" col-lg-offset-3 col-lg-3">
<div class=" login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">Customer Login</h3>
</div>
<div class=" panel-body">
<form role="form" id="loginfom" action="../Connections/Logincust.php" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" id="cusername" name="cusername" type="username" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" id="cpassword" name="cpassword" type="password" value="" autofocus>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<button type="button" id="custbtn" class="btn btn-primary btn-lg btn-block"> Login </button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
the code for logincust.php

Disable form Button

I have the following form. The 'continue' button is meant to be disabled until all fields have been completed. I have tried this on jfiddle and the form works as intended, but on the actual .html file online it does not work. For example the button is always disabled even when the fields have been completed, any ideas?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Payment Gateway</title>
<link rel="stylesheet" type="text/css" href="ue1.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="UE.js"></script>
<script type="text/javascript" language="javascript">
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
</script>
</head>
<body>
<header id="header">
<div class="header1">
Accessibility Tools | Skip to Navigation | Skip to Content | Website A-Z | Sitemap | Report a Problem | Help
</div>
</header>
<div id="mainwrapper">
<div id="contentwrapper">
<div id="content">
<div id="bulogo">
<img src="bulogo.png" alt="BU Logo" style="width:220px;height:128px;">
<div id="bulogo1">
Payment Gateway
</div>
</div>
<p>
<div id="processorder">
Process Order
</div>
<div id="viewordersummary">
View Order Summary
</div>
<div id="lefthelp">
Help
</div>
<div id="progressbar">
<img src="PersonalProgressBar.png" alt="This is your progress">
</div>
<form action="ue.html" method="post" id="nameform">
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Account information</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">Username*:</label>
<input type="text" id="username" class="form-control" placeholder="Username" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters.">
<input type="text" id="password" class="form-control" placeholder="Password" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Password*:</label>
<input type="text" id="password1" class="form-control" placeholder="Password" required="">
</div>
</div>
</div>
<div id="form2">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Contact information</legend>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Title</label>
<select name="title" id="title" class="form-control">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Names(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Email*:</label>
<input type="text" id="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Email*:</label>
<input type="text" id="email1" class="form-control" placeholder="Email" required="">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="form3"
</div>
<input type="submit" id="continue" disabled value="Continue"/>
</div>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
Wrapping your code in document.ready might help.
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
If it's WordPress, be aware that you can't use $ for jQuery. You have to use jQuery('body input') instead, or wrap you code in the following:
$(function(){
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
})(jQuery);
Are you seeing any errors in the console?
Place your code in $(document).ready(function(){ // here }) function as below
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled())
$('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
I would try:
$('#continue').prop('disabled',!allFilled());
instead of
if(allFilled()) $('#continue').removeAttr('disabled');
Users may fill out all fields, and then delete one.

Data entered in the form is not being sent to the Oracle Database

I am trying to create a registration form in Bootstrap and then connecting it to the Oracle Database but the data entered by the user isn't sending any value to the database. Please suggest what editing I should do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home - Student Registration Form</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<style>
.error{
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<form id="regform" class="form-horizontal" action="NewFile.jsp">
<fieldset>
<!-- Form Name -->
<legend>Student Registration</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstname">First Name</label>
<div class="col-md-4">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastname">Last Name</label>
<div class="col-md-4">
<input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="dob">Date of birth</label>
<div class="col-md-4">
<input id="dob" name="dob" type="text" placeholder="Date of birth" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="age">Age</label>
<div class="col-md-4">
<input id="age" name="age" type="text" placeholder="Age" class="form-control input-md" disabled>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sex">Sex</label>
<div class="col-md-4">
<label class="radio-inline"><input type="radio" name="sex" value="Male">Male</label>
<label class="radio-inline"><input type="radio" name="sex" value="Female">Female</label>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="subjects">Subjects</label>
<div class="col-md-4">
<select id="subjects" name="subjects" class="form-control">
<option value="1">Database</option>
<option value="2">ADA</option>
<option value="3">Networking</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="localaddress">Local Address</label>
<div class="col-md-4">
<textarea class="form-control" id="localaddress" name="localaddress"></textarea>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="localaddresscheckbox">Permenant address</label>
<div class="col-md-4">
<label class="checkbox-inline" for="localaddresscheckbox">
<input type="checkbox" name="localaddresscheckbox" id="localaddresscheckbox" value="1">
Copy Local Address to permanent Address
</label>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="permenantaddress">Permenant Address</label>
<div class="col-md-4">
<textarea class="form-control" id="permenantaddress" name="permenantaddress"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
(function() {
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");
$("#regform").validate({
rules: {
dob: "required",
localaddress: "required",
permenantaddress: "required",
firstname: {
lettersonly: true,
required: true
},
lastname: {
lettersonly: true,
required: true
}
},
submitHandler: function(form) {
form.submit();
}
});
//init datepicker
$('#dob').datepicker({
'format': 'yyyy-mm-dd',
'autoclose': true
});
//copy localaddress to permenant address on checkbox click
$('#localaddresscheckbox').click(function(){
if($(this).is(':checked')) {
var localaddress = $('#localaddress').val();
$('#permenantaddress').val(localaddress); //copy local address to permenant address box
}
else {
$('#permenantaddress').val('');
}
});
//age handler
$('#dob').datepicker().on('changeDate', function (ev) {
//get current date
var today = new Date();
var currentYear = today.getFullYear(); //current year
var selectedYear = $(this).val().split('-')[0]; //selected dob year
var age = Number(currentYear) - Number(selectedYear);
$('#age').val(age);
});
})();
</script>
</body>
</html>
now the data from the local address is not being copied to the permanent address.
The server side code is as follows:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
String firstname=request.getParameter("firstname");
System.out.println("First name="+firstname);
String lastname=request.getParameter("lastname");
System.out.println("Last name="+lastname);
String dob=request.getParameter("dob");
System.out.println("Date of Birth="+dob);
String age=request.getParameter("age");
System.out.println("Age="+age);
String sex=request.getParameter("sex");
System.out.println("Sex="+sex);
String subjects=request.getParameter("subjects");
System.out.println("Subject="+subjects);
String localaddresscheckbox=request.getParameter("localaddresscheckbox");
System.out.println("Local Address="+localaddresscheckbox);
String permanentaddress=request.getParameter("permanentaddress");
System.out.println("Permanent Address="+permanentaddress);
try
{
//System.out.println(0);
//Class.forName("oracle.jdbc.driver.OracleDriver");
Class.forName("oracle.jdbc.driver.OracleDriver");
System.out.println(1);
Connection con=DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:xe","Subhankar","oracle07");
System.out.println(2);
Statement st= con.createStatement();
//String sql = "INSERT INTO STUDENT_DETAILS VALUES (firstname,lastname,dob,age,sex,subjects,localaddresscheckbox,permanentaddress)";
String sql="INSERT INTO STUDENT_DETAILS (first_name,last_name,date_of_birth,age,sex,subject,local_address,permanent_address) VALUES ('"+firstname+"','"+lastname+"','"+dob+"','"+age+"','"+sex+"','"+subjects+"','"+localaddresscheckbox+"','"+permanentaddress+"')";
st.executeUpdate(sql);
//
//ResultSet rs=st.executeQuery("select * from studentdetails where studentid="+studentId);
}catch(Exception e)
{
e.printStackTrace();
}
%>
</body>
</html>
You have not set the action attribute.
If you want to submit form to the same page Use
action="<?php echo $_SERVER['REQUEST_URI'] ?>"

Categories