I have a form , There's a button called "submit" (form3) where when it's clicked the stuff that was entered in the form should be sent to the database or something else . Although when I click "Submit" nothing happens :
===> see form :
<?php
header('Content-Type: text/html; charset=utf-8'); // it's use Firefox.... it's set UTF-8 character setting
?>
<!DOCTYPE html>
<!-- Author: Salhi Fadhel -->
<!--[if IE 8]><html class="ie8 no-js" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9 no-js" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- start: HEAD -->
<head>
<title>RefactorErl</title>
<!-- start: META -->
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description" />
<meta content="" name="author" />
<!-- end: META -->
<!-- start: MAIN CSS -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/style.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/main-responsive.css">
<link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">
<link rel="stylesheet" href="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/css/theme_light.css" id="skin_color">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
<!-- end: MAIN CSS -->
<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
</head>
<!-- start: MAIN JAVASCRIPTS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
<script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js"></script>
<script src="assets/js/main.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/js/login.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Login.init();
});
</script>
<!-- end: HEAD -->
<!-- start: BODY -->
<body class="login example2">
<div class="main-login col-sm-4 col-sm-offset-4">
<div class="logo" color="red">RefactorErl
</div>
<!-- start: LOGIN BOX -->
<div class="box-login">
<h3>Sign in to your account</h3>
<p>
Please enter your name and password to log in.
</p>
<form class="form-login" id="form1" method="post" action="">
<div class="errorHandler alert alert-danger no-display">
<i class="icon-remove-sign"></i> You have some form errors. Please check below.
</div>
<fieldset>
<div class="form-group">
<span class="input-icon">
<input type="text" class="form-control" name="username" placeholder="Username or Email">
<i class="icon-user"></i> </span>
</div>
<div class="form-group form-actions">
<span class="input-icon">
<input type="password" class="form-control password" name="password" placeholder="Password">
<i class="icon-lock"></i>
<a class="forgot" href="#">
I forgot my password
</a> </span>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-bricky pull-right" name="login" id="login">
Login <i class="icon-circle-arrow-right"></i>
</button>
</div>
<div class="new-account">
Don't have an account yet?
<a href="#" class="register">
Create an account
</a>
</div>
</fieldset>
</form>
</div>
<!-- end: LOGIN BOX -->
<!-- start: FORGOT BOX -->
<div class="box-forgot">
<h3>Forget Password?</h3>
<p>
Enter your e-mail address below to reset your password.
</p>
<form class="form-forgot" id="form2" method="post" action="">
<div class="errorHandler alert alert-danger no-display">
<i class="icon-remove-sign"></i> You have some form errors. Please check below.
</div>
<fieldset>
<div class="form-group">
<span class="input-icon">
<input type="email" class="form-control" name="email" placeholder="Email">
<i class="icon-envelope"></i> </span>
</div>
<div class="form-actions">
<button class="btn btn-light-grey go-back">
<i class="icon-circle-arrow-left"></i> Back
</button>
<button type="submit" class="btn btn-bricky pull-right">
Submit <i class="icon-circle-arrow-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
<!-- end: FORGOT BOX -->
<!-- start: REGISTER BOX -->
<div class="box-register">
<h3>Sign Up</h3>
<p>
Enter your personal details below:
</p>
<form class="form-register" id="form3" method="post" >
<div class="errorHandler alert alert-danger no-display">
<i class="icon-remove-sign"></i> You have some form errors. Please check below.
</div>
<div class="successHandler alert alert-success no-display">
<i class="icon-ok"></i> Your form validation is successful!
</div>
<fieldset>
<div class="form-group">
<input type="text" class="form-control" name="full_name" id="full_name" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="address" id="address" placeholder="Address">
</div>
<div class="form-group">
<input type="text" class="form-control" name="city" id="city" placeholder="City">
</div>
<p>
Enter your account details below:
</p>
<div class="form-group">
<span class="input-icon">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
<i class="icon-envelope"></i> </span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
<i class="icon-lock"></i> </span>
</div>
<div class="form-group">
<span class="input-icon">
<input type="password" class="form-control" name="password_again" placeholder="Password Again">
<i class="icon-lock"></i> </span>
</div>
<div class="form-actions">
<button class="btn btn-light-grey go-back">
<i class="icon-circle-arrow-left"></i> Back
</button>
<button type="submit" class="btn btn-bricky pull-right" id="submit" >
Submit <i class="icon-circle-arrow-right"></i>
</button>
</div>
</fieldset>
</form>
</div>
<!-- end: REGISTER BOX -->
<!-- start: COPYRIGHT -->
<div class="copyright">
© <?php echo date("Y")?> ELTE IK</i>
</div>
<!-- end: COPYRIGHT -->
</div>
</body>
<!-- end: BODY -->
</html>
<?php
if (isset($_POST['submit']))
{
echo "<script>alert(\"Just a test .\");</script>";
}
?>
I added name='login' in each submit button of each <form></form>
<div class="form-actions">
<button type="submit" class="btn btn-bricky pull-right" name="login" id="login">
Login <i class="icon-circle-arrow-right"></i>
</button>
</div>
<button type="submit" class="btn btn-bricky pull-right" name='login'>
Submit <i class="icon-circle-arrow-right"></i>
</button>
<button type="submit" class="btn btn-bricky pull-right" id="submit" name='login' >
Submit <i class="icon-circle-arrow-right"></i>
</button>
And, it worked for me for all 3 forms.
Success Screenshot.
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
I'm trying to make some form validation. If you click the radio button, you can go to the next step, but if you don't click it, you can't proceed. Here's my code:
<!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>Bootstrap Multi Step Registration Form Template</title>
<link rel="stylesheet" href="<?=base_url()?>assets/bootstrap/css/bootstrap.min.css">
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/form-elements.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/style.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="<?=base_url()?>assets/multiplesteps/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-57-precomposed.png">
</head>
<body background="<?=base_url()?>assets/multiplesteps/img/backgrounds/green.jpg">
<?php //$this->load->view($view) ?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong>KUISIONER RAWAT JALAN</strong></h1>
<div class="description">
<p>
<b>RUMAH SAKIT UMUM DAERAH TEBET</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action="" method="post" class="registration-form">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Langkah 1 / 3</h3>
<p>Keterangan Responden</p>
</div>
<div class="form-top-right">
<img src="<?=base_url()?>assets/multiplesteps/img/logorsudtebet.png">
<!--<i class="fa fa-user"></i>-->
</div>
</div>
<div class="form-bottom">
<div class="form-group col-md-12">
<label class="col-sm-6">Usia Responden</label>
<input class="form-control col-md-6" type="text" placeholder="Isi Usia Anda" name="usia">
</div>
<div class="form-group col-md-12">
<label class="col-md-6">Status Perkawinan</label>
<div class="col-md-12">
<input class="radio" type="radio" name="gender" value="male"> Belum Kawin
<input type="radio" name="gender" value="male"> Kawin
<input type="radio" name="gender" value="male"> Cerai Hidup
<input type="radio" name="gender" value="male"> Cerai Mati
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 2 / 3</h3>
<p>Set up your account:</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<div class="form-group">
<label class="sr-only" for="form-repeat-password">Repeat password</label>
<input type="password" name="form-repeat-password" placeholder="Repeat password..."
class="form-repeat-password form-control" id="form-repeat-password">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 3 / 3</h3>
<p>Social media profiles:</p>
</div>
<div class="form-top-right">
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-facebook">Facebook</label>
<input type="text" name="form-facebook" placeholder="Facebook..." class="form-facebook form-control" id="form-facebook">
</div>
<div class="form-group">
<label class="sr-only" for="form-twitter">Twitter</label>
<input type="text" name="form-twitter" placeholder="Twitter..." class="form-twitter form-control" id="form-twitter">
</div>
<div class="form-group">
<label class="sr-only" for="form-google-plus">Google plus</label>
<input type="text" name="form-google-plus" placeholder="Google plus..." class="form-google-plus form-control" id="form-google-plus">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn">Sign me up!</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="<?=base_url()?>assets/multiplesteps/js/jquery-1.11.1.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/bootstrap/js/bootstrap.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/jquery.backstretch.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/retina-1.1.0.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/scripts.js"></script>
</body>
</html>
Here's my jQuery code:
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"], .registration-form input[type="password"], .registration-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
How can I achieve this functionality?
In my below code only angular validation is working. When I click on login button, then no angular script works. Can some body help me? Where is my mistake?
HTML code:
<!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">
<title>Talkiedo</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrapValidator.min.css" rel="stylesheet">
<link href="assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<script src="assets/bootstrap/js/angular.js"></script>
<script src="assets/bootstrap/js/angular-route.min.js"></script>
<script src="assets/bootstrap/js/angular-resource.min.js"></script>
<script src="assets/bootstrap/js/angular-messages.js"></script>
<script src="loginController.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- 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]-->
<style>
.form-group.required .control-label:after {
content:"*";
color:red;
}
</style>
</head>
<body style="background-color:#EEF2F5;" ng-app="loginApp" ng-controller="loginController">
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-4 col-md-4 well" style="padding-left:50px;padding-right:50px">
<h1>Login</h1>
<form class="form-horizontal" name="adminForm" role="form" ng-submit="submitLogin()" novalidate="novalidate">
<div class="form-body">
<div class="form-group required" ng-class="{'has-error': adminForm.admin_username.$touched && adminForm.admin_username.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="email" class="form-control" name="admin_username" id="admin_username" ng-model="admin.admin_username" required style="padding-top: 0px;" placeholder="Enter Your Email Id">
</div>
<div class="help-block" ng-messages="adminForm.admin_username.$error" ng-if="adminForm.admin_username.$touched && adminForm.admin_username.$invalid" >
<p ng-message="required">Your email is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{'has-error': adminForm.admin_password.$touched && adminForm.admin_password.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="password" class="form-control" name="admin_password" id="admin_password" ng-model="admin.admin_password" required style="padding-top: 0px;" placeholder="Enter Your Password">
</div>
<div class="help-block" ng-messages="adminForm.admin_password.$error" ng-if="adminForm.admin_password.$touched && adminForm.admin_password.$invalid" >
<p ng-message="required">Your Password is required.</p>
</div>
</div>
<span class="help-block" id="wrong_password" name="wrong_password"></span>
<div class="form-group">
<div class="input-group">
<div class=" col-sm-6">
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
</div>
<div class="col-sm-6">
<button type="" class="btn btn-default btn-cancel center-block">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="assets/jquery/jquery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrapValidator.min.js"></script>
<script src="assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js"> </script>
<script src="assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/bootbox.min.js"></script>
<script src="assets/js/custome.js"></script>
</body>
</html>
AngularJS code:
// Defining angularjs application.
var loginApp = angular.module('loginApp', ['ngMessages']);
// Controller function and passing $http service and $scope var.
loginApp.controller('loginController', function($scope, $http) {
// create a blank object to handle form data.
$scope.admin = {};
// calling our submit function.
$scope.submitLogin = function() {
// Posting data to php file
alert('dasdas');
if ($scope.adminForm.$valid) {
$http({
method : 'POST',
url : 'http://localhost/talk/admin/login',
data : $scope.admin, //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
if (data.errors) {
// Showing errors.
// $scope.errorName = data.errors.address1;
// $scope.errorUserName = data.errors.address2;
// $scope.errorEmail = data.errors.address13;
} else {
$scope.message = data.message;
}
});
}else {
alert("There are invalid fields");
}
};
});
I think you have to change
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
with a submit type button
<button type="submit" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
So you can submit your form
The problem is that your button is not a submit, but a normal button, so it does not trigger the submit action.
Try to change the submit button type to submit
If you want to submit the form by using jQuery,than you can doing $('.formClass').submit
I submit form with only ONE invalid input, whole form becomes red?
If I change invalid input, it does not go green, but stay red.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/signin.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script>
$(function() {$("input,textarea,select").jqBootstrapValidation();});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="container">
<form class="form-signin" id="login" novalidate>
<h3 class="form-signin-heading">Sign up</h3>
<div class="control-group">
<label for="inputEmail" class="control-label">Email address</label>
<div class="controls">
<input type="email" id="inputEmail" class="form-control" required autofocus>
</div>
</div>
<div class="control-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="controls">
<input type="password" id="inputPassword" class="form-control" required required data-validation-required-message="Password is empty">
</div>
</div>
<button name="login" class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
</body>
</html>
I have a form which i validate via php. this is how i do it:(example is for one 1 field)
elseif (ctype_alpha($firstname) != true)
{
$err_alpha_firstname = "First Name cannot contain numbers";
}
If in case the user does use an alpha numeric firstname, i display the error as :
<p><input type="text" class="span2" maxlength = "20" name="firstname" required id="firstname" placeholder="First Name"></p>
<?php if (isset($err_alpha_firstname)) {echo $err_alpha_firstname;}?>
It all works fine. however since this validation is server side via php, inorder for the errors to show up, i have to submit the form, which then reloads( since the form submits to the page itself) and then the errors are displayed. Now I want those errors which are stored in a php variable ex:$err_alpha_firstname , to be displayed instantaneously via javascript or ajax (i dont know anything about either of the languages so pardon me please). Is there a simple script that would let me display those errors on the fly? I know php is server side and javascript is client side so there might be an issue.
html file:
<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.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Fantasy Football</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/jumbo.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Fantasy Football</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" method="post" action="checkuser.php" name="check_form">
<div class="form-group">
<input type="text" placeholder="Username" name ="username" id="username" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" id="password" class="form-control">
</div>
<input type="hidden" name="action" value="submit" />
<button type="submit" class="btn btn-success">Sign in</button>
Forgot Password?
</form>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Fantasy Football</h1>
<p>Bring out the football manager in you!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Register »
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">New User Registration</h4>
</div>
<div class="modal-body">
<form class="form-inline" method="post" action="<?php echo $_SERVER['PHP_SELF']?>" name="login_form">
<span id="formerror" class="error"></span>
<p><input type="text" class="span2" maxlength = "20" name="firstname" required id="firstname" placeholder="First Name"></p>
<?php if (isset($err_alpha_firstname)) {echo $err_alpha_firstname;}?>
<p><input type="text" class="span2" maxlength = "20" name="lastname" required id="lastame" placeholder="Last Name"></p>
<?php if (isset($err_alpha_lastname)) {echo $err_alpha_lastname;}?>
<p><input type="text" class="span2" maxlength = "20" name="username" required id="username" placeholder="Username"></p>
<?php if (isset($err_ln_username)) {echo $err_ln_username;}?>
<?php if (isset($err_empty_username)) {echo $err_empty_username;}?>
<?php if (isset($err_alnum_username)) {echo $err_alnum_username;}?>
<?php if (isset($err_unp)) {echo $err_unp;}?>
<p class="help-block" style="font-size:12px"> Username should be between 4-20 characters long.</p>
<p><input type="password" class="span2" name="password" placeholder="Password"></p>
<?php if (isset($err_unp)) {echo $err_unp;}?>
<?php if (isset($err_ln_password)) {echo $err_ln_password;}?>
<?php if (isset($err_alnum_password)) {echo $err_alnum_password;}?>
<p class="help-block" style="font-size:12px"> Password must be between 4-20 characters long. Must be alpha-numeric</p>
<p><input type="password" class="span2" name="password_conf" placeholder="Re - Enter Password"></p>
<?php if (isset($err_passwordconf)) {echo $err_passwordconf;}?>
<p><input type="email" class="span4" name="emailid" required id="emailid" placeholder="Email ID"></p>
<p><input type="text" class="span2" name="team_name" required id="team_name" placeholder="Team name"></p>
<p class="help-block" style="font-size:12px"> Select your Unique team name.</p>
<p>
<select class="secret_question">
<option>Select one of the below ....</option>
<option value ="0">The name of the city where you were born</option>
<option value ="1">The name of your first pet</option>
<option value ="2">What is your mother's maiden name</option>
</select>
</p>
<p><input type="text" class="span2" name="secret_answer" required id="secret_answer" placeholder="Secret Answer"></p>
<p><input type="hidden" value="submit" /><br />
<button type="submit" name="action" value = "submit" class="btn btn-primary">Register</button></p>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Rules</h2>
<p>Rules of the Game </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Meet The Developers</h2>
<p>Everyones name get mentioned here </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Contact Us</h2>
<p>have an issue with the game. Click here to contact us.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© B561 Project Fall 2013</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<?php include('newuseradd.php');?>
</body>
</html>
You could either use straight JavaScript or AJAX to PHP.
I'm going to show you the straight JS method.
You'd do something like this for each input.
var hint = $("#fname-hint");
var fname = $("#firstname");
fname.on("change", function(){
if (!this.value.match(/\d+/g)) { // dosen't contain numbers
hint.html("");
fname.removeClass("error");
}
else {
fname.addClass("error");
hint.html("Your name can't contain numbers!");
}
});
Now when the form is submitted, make sure there are no errors:
var form = $("#form");
form.submit(function(e) {
var inputs = form.children("input");
inputs.each(function(){
var input = $(this);
if (!input.hasClass("error")) {
alert("Errors in form!");
input.select();
e.preventDefault();
break;
}
});
});
I use the jQuery $.post() function and return json from my php code:
function fail ($message){
die(json_encode(array('status'=>'fail', 'message'=>$message)));
}
function success ($message){
die(json_encode(array('status'=>'success', 'message'=>$message)));
}