I'm very confuse for this problem ajax post data, on localhost working but on shared hosting not working. This is my code
<script type="text/javascript">
$(document).ready(function(){
$("#login").click(function(){
alert('asdf');
var page = "login";
var username = $("#username").val().trim();
var password = $("#password").val().trim();
$.ajax({
url:'pages/content/input_query.php',
type:'post',
data:{page:page,username:username,password:password},
success:function(response){
var msg = "";
if(response ==1){
window.location = "index.php?pages=home";
}else{
$("#result").html(response);
}
}
});
});
});
and my code html is
<form role="form" action="pages/content/input_query.php" method="post">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="username" id="username" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" id="password" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
</div>
</div><!-- /.col -->
<div class="col-xs-4">
<button type="button" class="btn btn-primary btn-block btn-flat" id="login">Sign In</button>
</div><!-- /.col -->
</div>
</form>
And I have add code alert('asdf') , but there are no alert message every click the button. What is the problem. Please help me. Every answer I appricated
Have you called jQuery on server?
Try calling from jQuery CDN.
Use this code:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login").click(function(){
alert('asdf');
var page = "login";
var username = $("#username").val().trim();
var password = $("#password").val().trim();
$.ajax({
url:'pages/content/input_query.php',
type:'post',
data:{page:page,username:username,password:password},
success:function(response){
var msg = "";
if(response ==1){
window.location = "index.php?pages=home";
}else{
$("#result").html(response);
}
}
});
});
});
</script>
Try preventing the default action of the #login element and when you pass the POST type, you must use uppercases. Something like:
<script type="text/javascript">
$(document).ready(function(){
$("#login").click(function(event){
event.preventDefault();
alert('asdf');
var page = "login";
var username = $("#username").val().trim();
var password = $("#password").val().trim();
$.ajax({
url:'pages/content/input_query.php',
type:'POST',
data:{page:page,username:username,password:password},
success:function(response){
var msg = "";
if(response ==1){
window.location = "index.php?pages=home";
}else{
$("#result").html(response);
}
}
});
});
});
Related
I have a Google reCAPTCHA setup on my contact form in my website.
and i'm trying to test it in both localhost and server as well but recaptcha is only working in incognito mode .
without capturing reCAPTCHA mails are sending .
Here my problem is grecaptcha.execute(); is not executing, Please suggest solution for this.
$("#cont_msg").keypress(function (e) {
var key = e.which;
if (key == 13) {
// the enter key code
$("#contact_form_submit").click();
return false;
}
});
$(
".app_form_wrapper .apps_input input, .app_form_wrapper .apps_input textarea"
).keypress(function () {
$(this).parent().removeClass("error");
});
function sendMail() {
var co_name = $("#cont_name").val();
var co_email = $("#cont_email").val();
var co_phone = $("#cont_phone").val();
var co_company = $("#cont_company").val();
var co_message = $("#cont_msg").val();
let data = {
username: co_name,
useremail: co_email,
userphone: co_phone,
usercompany: co_company,
usermessage: co_message,
};
$("#loading").show();
$("#contact_form_submit").hide();
$.ajax({
type: "POST",
url: "contact_ajaxmail.php",
data: data,
success: function (contact) {
//grecaptcha.execute();
$("#loading").hide();
$("#contact_form_submit").show();
var i = contact.split("#");
if (i[0] == "1") {
$("#cont_name").val("");
$("#cont_email").val("");
$("#cont_phone").val("");
$("#cont_company").val("");
$("#cont_msg").val("");
$("#contact_err").html(i[1]);
$(".app_form_wrapper .apps_input").addClass("success");
setTimeout(function () {
$(".app_form_wrapper .apps_input").removeClass("success");
$(".app_form_wrapper .apps_input").removeClass("error");
$("#cont_email").parent().removeClass("error");
}, 2500);
} else {
$("#cont_name").val(data.username);
$("#cont_email").val(data.useremail);
$("#cont_phone").val(data.userphone);
$("#cont_company").val(data.usercompany);
$("#cont_msg").val(data.usermessage);
$("#contact_err").html(i[1]);
$(
".app_form_wrapper .apps_input input, .app_form_wrapper .apps_input textarea"
).each(function () {
if (!$(this).val()) {
$(this).parent().addClass("error");
} else {
if (i[0] == 3) {
$("#cont_email").parent().addClass("error");
} else {
$(this).parent().addClass("error");
}
$(this).parent().removeClass("error");
}
});
}
},
});
}
**My form**
Here iam trying to send mails for entered email
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<form class="app_form_wrapper" role="form" >
<div class="col-lg-6 text-left">
<div class="form-group apps-pulldown-20">
<div class="apps_input">
<input type="text" class="form-control" id="cont_name"placeholder="Name">
</div>
</div>
<div class="form-group apps-pulldown-20">
<div class="apps_input">
<input type="text" class="form-control" id="cont_email" placeholder="Email">
</div>
</div>
<div class="form-group apps-pulldown-20">
<div class="apps_input">
<input type="tel" class="form-control" id="cont_phone" placeholder="Phone Number" minlength="10" maxlength="15">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group apps-pulldown-20">
<div class="apps_input">
<input type="text" class="form-control" id="cont_company" placeholder="Company">
</div>
</div>
<div class="form-group apps-pulldown-20">
<div class="apps_input">
<textarea rows="10" class="form-control" id="cont_msg" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="g-recaptcha"
data-sitekey="Site_key"
data-callback="sendMail"
data-size="invisible">
</div>
<p>
This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.
</p>
<a class="btn btn-default btn-lg contact_btn" id="contact_form_submit">Send</a>
<a class="btn btn-default btn-lg contact_btn" id="loading" style="display: none;">Sending...</a>
<p class="input_error"id="contact_err" style="color:#FF6666;position:absolute;font-size:14px;font-weight: 500;letter-spacing: 0.5px;bottom: 10px;left: 0;right: 0;">
</p>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#contact_form_submit").on("click", function () {
var co_name = $("#cont_name").val();
var co_email = $("#cont_email").val();
var co_phone = $("#cont_phone").val();
var co_company = $("#cont_company").val();
var co_message = $("#cont_msg").val();
if (
co_name != "" &&
co_email != "" &&
co_phone != "" &&
co_company != "" &&
co_message != ""
) {
grecaptcha.execute();
} else {
$("#loading").hide();
$("#contact_form_submit").show();
$("#contact_err").html("Please fill all the fields !!!!");
}
});
})
</script>
</body>
</html>
Captcha needs two things to make it work properly
Client side code in Javascript, this you have done by looks of it properly.
Server side code, without implementing server side code the captcha is useless as bots will just post straight to your PHP form without having to enter a captcha! This is your missing piece based on your comments.
See
https://developers.google.com/recaptcha/intro
Notice it says you need to do 2 steps, 1 client side, 2 verify the response:
https://developers.google.com/recaptcha/docs/verify
Google returns loads results but this seems to be an up to date article
https://phppot.com/php/php-contact-form-with-google-recaptcha/
Google implementing google captcha php
I am trying to submit the login request using Jquery Ajax. But the form is not submitting. I am tried to find the issue but can not. the code is vey simple but as I have started learning javascript so I am failing to find the problem in my code. Below is the code Please find the problem with it......
$(function() {
//get form by id
var form = $('#login_form');
//get message container by is
var message = $('#message');
//prevent default on form submit
$(form).submit(function(event) {
event.preventDefault();
//serialize form data
var form_data = $(form).serialize();
$.ajax({
type: 'post',
url: $(form).attr('action'),
data: form_data
}).done(function(response) {
//set the class of message container to success
$(message).removeClass('error');
$(message).addClass('success');
//put data received from server
$(message).html(response);
//clear form
$('#email').val('');
$('#password').val('');
}).fail(function(data) {
//set the class of message container to error
$(message).removeClass('success');
$(message).addClass('error');
//put the error message
if (data.responseText !== '') {
$(message).html(data.responseText);
} else {
$(message).text('Sorry...! an unexpected error has occured...!');
}
});
});
});
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Practice</title>
<link href="assets/css.css" rel="stylesheet" type="text/css" />
<script src="assets/jquery.js" type="text/javascript"></script>
<script src="assets/ajax_code.js" type="text/javascript"></script>
</head>
<body>
<div class="login_form_div">
<form action="login.php" method="POST" name="login_form" id="login_form" class="login_form">
<div class="label">
<label>Email:</label>
</div>
<div class="form_input">
<input type="text" name="email" id="email">
</div>
<div class="label">
<label>Password:</label>
</div>
<div class="form_input">
<input type="password" name="password" id="password">
</div>
<div class="form_input">
<button type="submit" name="submit_form" id="submit_form">Login</button>
</div>
</form>
<span class="message1 error success" id="message">
</span>
</div>
</body>
</html>
your html and javascript is working perfectly.
can you post your php code?.
otherwise try put this code in your login.php file:
<?php
echo "form submitted";
?>
If you are using js fiddle then import the jquery js file on the dropdown on the left side of the panel.
$(function () {
//get form by id
var form = $('#login_form');
//get message container by is
var message = $('#message');
//prevent default on form submit
$(form).submit(function (event) {
event.preventDefault();
//serialize form data
var form_data = $(form).serialize();
$.ajax({
type: 'post',
url: $(form).attr('action'),
data: form_data
}).done(function (response) {
//set the class of message container to success
$(message).removeClass('error');
$(message).addClass('success');
//put data received from server
$(message).html(response);
//clear form
$('#email').val('');
$('#password').val('');
}).fail(function (data) {
//set the class of message container to error
$(message).removeClass('success');
$(message).addClass('error');
//put the error message
if (data.responseText !== '') {
$(message).html(data.responseText);
} else {
$(message).text('Sorry...! an unexpected error has occured...!');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Practice</title>
<link href="assets/css.css" rel="stylesheet" type="text/css"/>
<script src="assets/jquery.js" type="text/javascript"></script>
<script src="assets/ajax_code.js" type="text/javascript"></script>
</head>
<body>
<div class="login_form_div">
<form action="login.php" method="POST" name="login_form" id="login_form" class="login_form">
<div class="label">
<label>Email:</label>
</div>
<div class="form_input">
<input type="text" name="email" id="email">
</div>
<div class="label">
<label>Password:</label>
</div>
<div class="form_input">
<input type="password" name="password" id="password">
</div>
<div class="form_input">
<button type="submit" name="submit_form" id="submit_form">Login</button>
</div>
</form>
<span class="message1 error success" id="message">
</span>
</div>
</body>
</html>
Actually the problem was here. as the default form submission is prevented through javascript and I was looking for the message.
if (isset($_POST['submit_form'])) {
$email = mysqli_real_escape_string($_POST['email']);
$password = mysqli_real_escape_string($_POST['password']);
if (!empty($email) && !empty($password)) {
echo "Login Must be Successful...!";
} else {
echo "Login Failed....!";
}
}
I have the following form created in my HTML, this will be submitted to "url 'submitrecord'". This will work fine for single entry per HTML. How can I add multiple entries of this type and submit at once.
Code:
<form method='POST' action="{% url 'submitrecord' %}">
<div class="row">
<div class = "col-md-1 form-group">
<input type="text" class="form-control" name="EntryNo" placeholder="EntryNo"/>
</div>
<div class = "col-md-2 form-group">
<input type="text" class="form-control" name="MedicineName" placeholder="MedicineName"/>
</div>
<button type="submit" class="btn btn-default">Done</button>
</div>
</form>
I found this answer but still it isnot sending the request to my URL.
<script>
$(document).ready(function(){
var called = 0;
ajax_recaller = function(forms){
$.ajax({
type: "POST",
data: forms[called].serialize(),
url: forms[called].attr('action'),
success: function(data) {
called++;
if(called < forms.length) {
ajax_recaller(forms);
} else {
called=0; // set called value to 0 again
alert('All forms has been submitted!');
}
}
});
}
$(document).on('click','.submitforms',function(){
var x=0;
$('.ajax_form').each(function(){
forms[x] = $(this);
x++;
});
ajax_recaller(forms);
});
});
</script>
I have a page with a series of inputs, similar to a form but not. Upon pressing Submit, I want to run my function submitForm(). However, every time the page loads, it auto-clicks submit. Any ideas on how to stop this from happening?
JS:
function submitForm(){
// Initiate Variables With Form Content
var fname = document.getElementById(name).value();
var femail = document.getElementById(email).value();
var fmessage = document.getElementById(message).value();
$.ajax({
type: "POST",
url: "cgi-bin/process.php",
data: "name=" + fname + "&email=" + femail + "&message=" + fmessage,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
$(function() {
$("#btnContact").on("click", submitForm());
});
Any my HTML:
<div class="row">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name"
required="">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email"
required="">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message"
required=""></textarea>
</div>
<button id="btnContact" type="submit">Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
</div>
Remove the () from your final statement.
s/submitForm\(\)/submitForm/.
You are actually calling the function.
http://jsfiddle.net/fx6hefe4/
Will look like this:
$(function() {
$("#btnContact").on("click", submitForm);
});
Working fiddle.
Your code work after several changes.
Replace :
var fname = document.getElementById(name).value();
var femail = document.getElementById(email).value();
var fmessage = document.getElementById(message).value();
By :
var fname = document.getElementById('name').value;
var femail = document.getElementById('email').value;
var fmessage = document.getElementById('message').value;
Replace :
$("#btnContact").on("click", submitForm());
By :
$("#btnContact").on("click", function(){
submitForm();
});
Replace :
<button id="btnContact" type="submit">Send Message</button>
By :
<button id="btnContact" type="button">Send Message</button>
Hope this helps.
So my issue is this. I have some "validation" on my email and checkbox to check whether they are empty. That seemed to work, but after they have been filled in and checked I still get my warning message (.error) popup and the form does not submit.
I had this working previously with just the email, but needed to add the checkbox for an agreement.
Here is the code and a jsfiddle.
Thank you for any help!
html:
<form class="form" action="">
<div class="wrapper-input email">
<input id="email" type="text" name="email" placeholder="youremailaddress#example.com" />
<button class="form-submit submit">Sign-Up</button>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="wrapper-input">
<input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span>
</div> </form> <div class="modal">
<div class="modal-title">
<h4 class="success">Submission Successful!</h4>
<h4 class="error">Submission Error!</h4>
<img class="close" src="img/close-x.png" alt="close" />
</div>
<div class="modal-content">
<p class="success">Sucess</p>
<p class="error">Error!</p>
</div> </div>
javascript:
$(document).ready(function() {
$(".submit").click(function() {
var email = $("#email").val();
var dataString = 'email='+ email;
var terms = $("input:checkbox#terms").val();
if (!terms.checked) {
$('.lk-modal').show();
$('.success').hide();
$('.error').show();
}
if (email ==='') {
$('.lk-modal').show();
$('.success').hide();
$('.error').show();
}
else {
$.ajax({
type: "POST",
url: "collect.php",
data: dataString,
success: function(){
$('.lk-modal').show();
$('.success').show();
$('.error').hide();
}
});
}
return false;
});
});
Edit: Please look at Stefano Dalpiaz answer first as he points out your mistakes.
All you have to do to check if a string is empty is this if ( !email ) (How do you check for an empty string in JavaScript?). You can also use .is(':checked') to determine if a checkbox is checked.
Here is a working fiddle: http://jsfiddle.net/p28am/1/
HTML:
<form class="form" action="">
<div class="wrapper-input email">
<input id="email" type="text" name="email" placeholder="youremailaddress#example.com" />
<button class="form-submit submit">Sign-Up</button>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="wrapper-input">
<input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span>
</div>
</form>
<div class="modal">
<div class="modal-title">
<h4 class="success">Submission Successful!</h4>
<h4 class="error">Submission Error!</h4>
<img class="close" src="img/close-x.png" alt="close" />
</div>
<div class="modal-content">
<p class="success">Sucess</p>
<p class="error">Error!</p>
</div>
</div>
JS:
$(document).ready(function () {
$(".submit").click(function () {
var email = $("#email").val();
var dataString = 'email=' + email;
var terms = $("input:checkbox#terms").is(':checked');
if (!email || !terms) {
$('.modal').show();
$('.success').hide();
$('.error').show();
} else {
$.ajax({
type: "/echo/json/",
url: "collect.php",
data: dataString,
success: function () {
$('.modal').show();
$('.success').show();
$('.error').hide();
}
});
}
return false;
});
});
$('.close').click(function(e){
e.preventDefault();
$('.modal').hide();
});
There are a few errors on your code. For the checkbox, you are checking the .checked property of its value, and the value of a checkbox is a string. I have also added an else statement before checking for the email. Without it, the request would be sent even if you didn't check the checkbox. Here is the updated version:
$(document).ready(function () {
$(".submit").click(function () {
var email = $("#email").val();
var dataString = 'email=' + email;
var terms = $("input:checkbox#terms");
if (!terms.is(":checked")) {
$('.modal').show();
$('.success').hide();
$('.error').show();
}
else if (email === '') {
$('.modal').show();
$('.success').hide();
$('.error').show();
} else {
$.ajax({
type: "/echo/json/",
url: "collect.php",
data: dataString,
success: function () {
$('.modal').show();
$('.success').show();
$('.error').hide();
}
});
}
return false;
});
});
And here is the JsFiddle.