I'm using Rapid API to save my users emails and passwords. My send function is being called onclick, but I don't think the program is running through the AJAX call.
I'm not sure what to do. Please help.
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ShapeBootstrap Clean Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
<!-- SCRIPT
============================================================-->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>
<script src = "script.js"></script>
</head>
<body>
...
<div class="container">
<div class="form-wrap">
<div class="tabs">
<h3 class="signup-tab"><a class="active" href="#signup-tab-content">Sign Up</a></h3>
<h3 class="login-tab">Sign In</h3>
</div><!--.tabs-->
<div class="tabs-content">
<div id="signup-tab-content" class="active">
<form class="signup-form">
<input type="email" class="input" id="user_email" autocomplete="on" placeholder="Email">
<input type="password" class="input" id="user_password" autocomplete="on" placeholder="Password">
<button onclick="send()" class="button">Sign Up</button>
</form><!--.login-form-->
<div class="help-text">
<p>By signing up, you agree to our</p>
<p>Terms of service</p>
</div><!--.help-text-->
</div><!--.signup-tab-content-->
<div id="login-tab-content">
<form class="login-form" action="" method="post">
<input type="text" class="input" id="user_login_email" autocomplete="off" placeholder="Email">
<input type="password" class="input" id="user_pass" autocomplete="off" placeholder="Password">
<input type="password" class="input" id="user_topic" autocomplete="off" placeholder="Your course choice">
<input type="submit" class="button" value="Login">
</form><!--.login-form-->
</div><!--.login-tab-content-->
</div><!--.tabs-content-->
</div><!--.form-wrap-->
</div>
<!--Footer
==========================-->
<footer>
<div class="container">
<div class="row">
<div class="span6">Copyright © 2013 Shapebootstrap | All Rights Reserved <br>
<small>Aliquam tincidunt mauris eu risus.</small>
</div>
<div class="span6">
<div class="social pull-right">
<img src="img/social/googleplus.png" alt="">
<img src="img/social/dribbble.png" alt="">
<img src="img/social/twitter.png" alt="">
<img src="img/social/dribbble.png" alt="">
<img src="img/social/rss.png" alt="">
</div>
</div>
</div>
</div>
</footer>
<!--/.Footer-->
<script>
jQuery(document).ready(function($) {
tab = $('.tabs h3 a');
tab.on('click', function(event) {
event.preventDefault();
tab.removeClass('active');
$(this).addClass('active');
tab_content = $(this).attr('href');
$('div[id$="tab-content"]').removeClass('active');
$(tab_content).addClass('active');
});
});
</script>
</body>
</html>
script.js
var emailInput;
var passwordInput;
function send() {
emailInput = document.getElementById("user_email").value;
passwordInput = document.getElementById("user_password").valu
e;
jQuery.ajax({
url: "",
type: "POST",
contentType: "application/x-www-form-urlencoded",
data: {
"email": emailInput,
"password": passwordInput,
},
})
.done(function(data, textStatus, jqXHR) {
console.log("HTTP Request Succeeded: " + jqXHR.status);
console.log(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("HTTP Request Failed");
})
.always(function() {
/* ... */
});
}
Use these changes:
1)Place your jquery.js script above bootstrap.min.js
2) Specify type attribute to button. Sign Up.This is coz different browsers interpret the button type differently when no type attribute is specified
3) Remove content-type in $.ajax. This is coz, by default jquery sends the request as 'application/x-www-form-urlencoded'
4) Remove double quotes of data values - eg. data: { email: emailInput, password: passwordInput, };
Related
I am new in the development of this map web application, and I want to implement a form with a map which can get the longitude and latitude through the search bar and put it in the database. I am using the Leaflet-Search plugin. I tried following the instructions, but I still can't understand how to implement it properly.
For reference, here is the form picture and code:
Picture: Form picture
Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HelpThePoor</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href={{url('css/main.css')}}>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css"/>
<!-- Styles -->
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
Kembali
<br>
<div class="container">
<form action="/createdonor" method = "post">
#csrf
<div class="form-row">
<div class="col">
<label>Nama:</label> <!--for getting the name-->
<input type="text" class="form-control" name="name" placeholder="Nama">
</div>
<div class="col"> <!--for getting the details of help-->
<label>Bantuan apa yang anda tawarkan?:</label>
<input type="text" class="form-control" name="help_offered" placeholder="Ceritakan secara lanjut bantuan anda">
</div>
<div class="col">
<label>Nombor Telefon:</label> <!--for getting the phone number-->
<input type="text" class="form-control" name="tel_number" placeholder="No. telefon anda">
</div>
<div class="col">
<div id="formmap"> <!--the supposedly searcheable map-->
</div>
</div>
<div class="col">
<label>Jenis bantuan:</label> <!--help type-->
<input type="text" class="form-control" name="help_type" placeholder="Sila pilih jenis bantuan anda">
</div>
<div class="col">
<label>Maklumat tambahan:</label> <!--additional details-->
<input type="text" class="form-control" name="add_info" placeholder="Maklumat tambahan">
</div>
</div>
<br>
<button type="submit" class="btn btn-success">Daftar Bantuan Saya!</button>
</form>
</div>
<script> <!--the JS for the searcheable map-->
const formmap = L.map('formmap').setView([1.465036, 830.428012], 13);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(formmap);
const search = new GeoSearch.GeoSearchControl({
//provider: new GeoSearch.OpenStreetMapProvider(),
});
formmap.addControl(search);
function searchEventHandler(result) {
console.log(result.location);
}
formmap.on('geosearch/showlocation', searchEventHandler);
</script>
</body>
</html>
And here's the database: Database picture
I am new in this type of web application, and I quite slow on getting the basics of JS currently.
This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 4 years ago.
I created a contact page.
When I click on the submit button, this form sends my form information to the server-side file (PHP), but the submit button does nothing.
I do not get an answer in the AJAX!
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
return false;
});
});
</script>
<!doctype html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<meta charset="utf-8">
<title>My Contact form</title>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="#contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="submit" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</body>
</html>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein#gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein#gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{ echo "Invalid Email, please provide an correct email.";
}
?>
Where do you think the problem is?
Can an error come from AJAX?
Found problems:
1) An error is raised: Error: Bootstrap's JavaScript requires jQuery. It means that the bootstrap's js file must be loaded after the jQuery's js file. So invert their positions:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
2) An error is raised: ReferenceError: $ is not defined for the line $(document).ready(function () {. This means that the jquery is not recognized inside your script. So bring all the js imports in the page head. The times for the js imports at the bottom of the page are long gone.
3) The form tag must be <form id="contactform">, not <form id="#contactform">.
4) If you are submitting through an ajax request, then you must use a button of type "button", not of type "submit". Then you can remove the return false; from the $('#submit').click(function (){...} function too.
Suggestions:
Define an "error" callback for the ajax request.
Define the meta tags as the first ones in the head tags.
Working code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>My Contact form</title>
<!-- CSS resources -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<!-- JS resources -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function () {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
});
});
</script>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="button" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
I have one html page "organization.html" and I want to get Java Object value into this html page.
My Java Object
public class User_Objects {
public String firstName;
public String lastName;
}
My organization.html page code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Organization</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
var reqfirstName = '${reqObj.firstName}';
alert("reqfirstName>>>>>>>"+reqfirstName);
var reqlastName = '${reqObj.lastName}';
alert("reqlastName>>>>>>>"+reqlastName);
});
</script>
</head>
<body>
<form name="orgname" action="org_name" method="post">
<div class="container-fluid orgdiv">
<div class=" text-center topbgimage">
<img src="images/bg.jpg" class="" style="max-width: 100%;">
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 heading text-center" style="text-align: center;">
<h1 class="">Hello <label id="lblfullname"></label> </h1>
<p>Enter your organization Name to determine if there is a current terms of service agreement with app.</p>
<label><span class="starred">*</span>Oraganisation:</label>
<input type="text" id="txtOrgName" name="txtOrgName"
class=" form-group" placeholder="enter your organisation"
style="float: none; margin-left: 8px;" />
</div>
</div>
</div>
<div class="col-md-12 text-center footerdiv"
style="text-align: center;">
<input type="submit" name="btnOrgName" id="btnOrgName" class="bg-primary btn"
value="Validate" onclick="return validateOrg();" />
<input type="hidden" name="myJObject" id="myJObject" value='${reqJSONObj}' />
</div>
</div>
</form>
</body>
My Java code is given below
JSONObject jObj = new JSONObject(fillObj);
request.setAttribute("reqJSONObj", jObj);
request.setAttribute("reqObj", fillObj);
forward = "/organization.html";
RequestDispatcher view = request.getRequestDispatcher(forward);
view.forward(request, response);
But When my organization.html page is loaded, I am getting reqfirstName>>>>>>>${reqObj.firstName} alert.
I am getting ${reqObj.firstName} not value of firstName of reqObj Object.
I am using Java with Eclipse Mars1.
I'm trying to send my form data of php file to js file but I can't sure that php file is called by js file.
<!DOCTYPE html>
<html class="hide-sidebar ls-bottom-footer" 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">
<meta name="description" content="">
<meta name="author" content="">
<title>Learning</title>
<link href="css/vendor.min.css" rel="stylesheet">
<script type ="text/javascript" src="api/serve.js"></script>
<link href="css/theme-core.min.css" rel="stylesheet">
<link href="css/module-essentials.min.css" rel="stylesheet" />
<link href="css/module-material.min.css" rel="stylesheet" />
<link href="css/module-layout.min.css" rel="stylesheet" />
<link href="css/module-sidebar.min.css" rel="stylesheet" />
<link href="css/module-sidebar-skins.min.css" rel="stylesheet" />
<link href="css/module-navbar.min.css" rel="stylesheet" />
<link href="css/module-messages.min.css" rel="stylesheet" />
<link href="css/module-carousel-slick.min.css" rel="stylesheet" />
<link href="css/module-charts.min.css" rel="stylesheet" />
<link href="css/module-maps.min.css" rel="stylesheet" />
<link href="css/module-colors-alerts.min.css" rel="stylesheet" />
<link href="css/module-colors-background.min.css" rel="stylesheet" />
<link href="css/module-colors-buttons.min.css" rel="stylesheet" />
<link href="css/module-colors-text.min.css" rel="stylesheet" />
<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>
</head>
<body class="login">
<div id="content">
<div class="container-fluid">
<div class="lock-container">
<div class="panel panel-default text-center paper-shadow" data-z="0.5">
<h1 class="text-display-1">Create account</h1>
<div class="panel-body">
<!-- Signup -->
<form id="signup" action="" method="POST">
<div class="form-group">
<div class="form-control-material">
<input id="firstName" type="text" class="form-control" name="firstname" value="">
<label for="firstName">First name</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="lastName" type="text" class="form-control" name="lastName" value="">
<label for="lastName">Last name</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="email" type="email" class="form-control" name="email" value="">
<label for="email">Email address</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="password" type="password" class="form-control" name="password" value="">
<label for="password">Password</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="passwordConfirmation" type="password" class="form-control" placeholder="Password Confirmation">
<label for="passwordConfirmation">Re-type password</label>
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<input type="checkbox" id="agree" />
<label for="agree">* I Agree with Terms & Conditions!</label>
</div>
</div>
<div class="text-center">
<button id="submit" class="btn btn-primary" type="submit" >Create an Account</button>
</div>
</form>
<!-- //Signup -->
</div>
</div>
</div>
</div>
</div>
<script>
var colors = {
"danger-color": "#e74c3c",
"success-color": "#81b53e",
"warning-color": "#f0ad4e",
"inverse-color": "#2c3e50",
"info-color": "#2d7cb5",
"default-color": "#6e7882",
"default-light-color": "#cfd9db",
"purple-color": "#9D8AC7",
"mustard-color": "#d4d171",
"lightred-color": "#e15258",
"body-bg": "#f6f6f6"
};
var config = {
theme: "html",
skins: {
"default": {
"primary-color": "#42a5f5"
}
}
};
</script>
<!-- Separate Vendor Script Bundles -->
<script src="js/vendor-core.min.js"></script>
<script src="js/vendor-countdown.min.js"></script>
<script src="js/vendor-tables.min.js"></script>
<script src="js/vendor-forms.min.js"></script>
<script src="js/vendor-carousel-slick.min.js"></script>
<script src="js/vendor-player.min.js"></script>
<script src="js/vendor-charts-flot.min.js"></script>
<script src="js/vendor-nestable.min.js"></script>
<script src="js/module-essentials.min.js"></script>
<script src="js/module-material.min.js"></script>
<script src="js/module-layout.min.js"></script>
<script src="js/module-sidebar.min.js"></script>
<script src="js/module-carousel-slick.min.js"></script>
<script src="js/module-player.min.js"></script>
<script src="js/module-messages.min.js"></script>
<script src="js/module-maps-google.min.js"></script>
<script src="js/module-charts-flot.min.js"></script>
<script src="js/theme-core.min.js"></script>
</body>
</html>\
And my js file is as follws.
serve.js
$(document).ready(function(){
$("form").click( function(e){
e.preventDefault();
// get values from textboxs
var name = $('#firstName').val();
var lname = $('#lastName').val();
var mail = $('#email').val();
var password = $('#password').val();
var confpass = $('#passwordConfirmation');
$.ajax({
url: "api/learnapi.php",
type: "post",
dataType: "json",
data: {type: "signup", Name: name, Lname: lname, Pass: password, Email: mail,Pass1:confpass },
//type: should be same in server code, otherwise code will not run
ContentType: "application/json",
success: function (response) {
alert(JSON.stringify(response));
},
error: function (err) {
alert(JSON.stringify(err));
}
});
});
});
I'm not sure that these my two files are linked together.
How do is link them
In your server.js file replace $('form') with $('form #submit')
Right now you are calling click event on the form instead of button.
Check view source to see if your file is actually included in dom.
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