I have a "form" with this code:
<div class="form-wrap" id="contact-form">
<div class="form-innerwrap">
<div class="text-input">
<input type="text" name="name" id="name" required />
<label for="name"><?= CONTACT_FORM_NAME ?></label>
</div>
<div class="text-input">
<input type="email" name="email" id="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" required />
<label for="email">E-mail</label>
</div>
<div class="text-input">
<input type="text" name="contact" id="contact" required />
<label for="name"><?= CONTACT ?></label>
</div>
<div class="text-input text-textarea">
<textarea type="info" id="info" name="info">
</textarea>
<label for="email"><?= CONTACT_FORM_MENSSAGE ?></label>
</div>
<input type="hidden" name="lang" id="lang" value="<?= $_SESSION['language'] ?>">
<div class="form-button">
<button type="submit" class="btn contacts-button btn-gowe" id="btn-info" data-btnhover="<?= CONTACT_FORM_BTN ?>"> <span><?= CONTACT_FORM_BTN ?></span> </button>
</div>
</div>
</div>
Then I have a ajax request to sent the input values to php:
$("#btn-info").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contact").val();
var info = $("#info").val();
var lang = $("#lang").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name='+ name + '&email='+ email +'&contact='+contact+'&info='+info+'&lang='+lang;
$.ajax({
type: "POST",
url: "includes/sendEmail.php",
data: dataString,
cache: false,
success: function(result){
var result = result.split("||");
if (result[0]== "true"){
$("#contact-modal").show();
}
}
});
return false;
});
However when I make a var_dump of $REQUEST the return is an empty array.
Can anyone help me with this problem?
I had already spent several hours to try to understand what is wrong in my code.
Thanks for helping.
Related
I have some hard times to save a blob (image file) to my sql-database.
I have three files: a html form (form.php), an ajax script (ajax.js) and a php-file (save.php).
I think i have some errors in my ajax.js, but after a long google search i couldn`t find a good solution. There must be a problem with the blob handling in JS....
HTML Form:
<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="update_form" enctype="multipart/form-data">
<div class="modal-header">
<h4 class="modal-title">table bearbeiten</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_u" name="id" class="form-control" required>
<div class="form-group">
<label>Image</label>
<input type="file" id="image_u" name="image" class="form-control" required>
</div>
<div class="form-group">
<label>Überschrift 1</label>
<input type="text" id="header1_u" name="header1" class="form-control" required>
</div>
<div class="form-group">
<label>Überschrift 2</label>
<input type="text" id="header2_u" name="header2" class="form-control" required>
</div>
<div class="form-group">
<label>Text</label>
<input type="text" id="text_u" name="text" class="form-control" required>
</div>
<div class="form-group">
<label>Link</label>
<input type="text" id="link_u" name="link" class="form-control" required>
</div>
<div class="form-group">
<label>Link-Text</label>
<input type="text" id="linkText_u" name="linkText" class="form-control" required>
</div>
<div class="form-group">
<label>Datum</label>
<input type="date" id="datum_u" name="datum" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="2" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>
In form.php i specified all my Inputs and for the image type=file
Ajax Code:
$(document).on('click','.update',function(e) {
var id=$(this).attr("data-id");
var image=$(this).attr("data-image");
var header1=$(this).attr("data-header1");
var header2=$(this).attr("data-header2");
var text=$(this).attr("data-text");
var link=$(this).attr("data-link");
var linkText=$(this).attr("data-linkText");
var datum=$(this).attr("data-datum");
$('#id_u').val(id);
$('#image_u').val(image);
$('#header1_u').val(header1);
$('#header2_u').val(header2);
$('#text_u').val(text);
$('#link_u').val(link);
$('#linkText_u').val(linkText);
$('#datum_u').val(datum);
});
$(document).on('click','#update',function(e) {
var data = $("#update_form").serialize();
$.ajax({
data: data,
enctype: 'multipart/form-data',
type: "post",
url: "save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#editEmployeeModal').modal('hide');
alert('Data updated successfully !');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
My PHP-Code:
if($_POST['type']==2){
$id=$_POST['id'];
$image= base64_encode(file_get_contents($_FILES['image']['tmp_name']));
$header1=$_POST['header1'];
$header2=$_POST['header2'];
$text=$_POST['text'];
$link=$_POST['link'];
$linkText=$_POST['linkText'];
$datum=$_POST['datum'];
$sql = "UPDATE `tblTable` SET `image`='$image',`header1`='$header1',`header2`='$header2',`text`='$text',`link`='$link',`linkText`='$linkText',`datum`='$datum' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
My Datbase-Connection works fine. I can write and read all other Data (Text and Date) to my local Database. I think my problem is in the ajax.js. How can i specify $('#image_u').val(image); that it must handle a blob file and not just normal text input. And do i have to modify these lines?
var data = $("#update_form").serialize();
$.ajax({
data: data,
enctype: 'multipart/form-data',
type: "post",
url: "save.php",
I have 2 Google Recaptcha's on same page in different forms (Login and Register Forms). I had to put both the forms on the same page due to the designing requirements which can't be changed. Now the problem is that the 1st form is the login form followed by the register form in the 2nd. Now, the recaptcha on the login form takes effect for register form as well. I mean that I can see recaptcha on both the forms but the one in register form doesn't work (which means it doesn't sends the correct value to the PHP page where the form will be processed). When I tried verifying the recaptcha on the login form and submitting the register form it worked. This means that the 1st loaded recaptcha (on the login form) is working for both which should not be. Both the recaptchas should work separately for each forms. Also, when I get the values of both the recaptchas via AJAX to send to the PHP page for the server side validation I am using captcha: grecaptcha.getResponse() for both. THIS CAN BE THE ACTUAL PROBLEM I GUESS. If I could get separate values for both maybe the things would have gone down well. Any help would be appreciated.
Here are my codes.
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="com-reps cr-panel">Login Now</h3>
</div>
<div class="col-md-6">
<h3 class="com-reps cr-panel">Register Now</h3>
</div>
<div class="col-md-6">
<div class="post-holder">
<div class="login-message"></div>
<div class="post-content">
<form method="post" action="">
<div class="form-group">
<input type="text" id="uname" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" id="pass" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="<?php echo $mainf['set_recaptcha_sitekey']; ?>"></div>
</div>
<div class="form-group">
<input type="submit" id="login" value="Log In" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="post-holder">
<div class="register-message"></div>
<div class="post-content">
<form method="post" action="">
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" id="username" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" id="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" id="cpass" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<input type="text" id="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" id="dob" class="form-control" placeholder="Date of Birth">
</div>
<div class="form-group">
Sex
<input type="radio" id="sex" name="sex"> Male
<input type="radio" id="sex" name="sex"> Female
</div>
<div class="form-group">
<input type="checkbox" id="legal" name="legal"> I accept the Terms of Service and Privacy Policy.
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="<?php echo $mainf['set_recaptcha_sitekey']; ?>"></div>
</div>
<div class="form-group">
<input type="submit" id="submit" value="Register" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#login").click(function(){
var dataString = {
uname: $("#uname").val(),
pass: $("#pass").val(),
captcha: grecaptcha.getResponse()
};
$.ajax({
type: "POST",
//dataType : "json",
url: "processes/login.php",
data: dataString,
cache: true,
beforeSend: function(){
$("#login").val("Please wait...");
$(".login-message").hide();
},
success: function(html){
$('.login-message').html(html).fadeIn();
if($('.login-message').find('#responseBox').hasClass('alert-success')){
setTimeout(function(){
window.location.replace("index.php");
}, 500);
}else{
$("#login").val("Log In");
}
}
});
return false;
});
$("#submit").click(function(){
var dataString = {
name: $("#name").val(),
uname: $("#username").val(),
pass: $("#password").val(),
cpass: $("#cpass").val(),
email: $("#email").val(),
dob: $("#dob").val(),
sex: $("input[name='sex']:checked").val(),
captcha: grecaptcha.getResponse()
};
$.ajax({
type: "POST",
//dataType : "json",
url: "processes/register.php",
data: dataString,
cache: true,
beforeSend: function(){
$("#submit").val("Please wait...");
$(".register-message").hide();
},
success: function(html){
$('.register-message').html(html).fadeIn();
$("#submit").val("Register");
}
});
return false;
});
});
</script>
I got the solution. In case someone comes looking for this it will help them.
In both HTML Forms replace
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
to
<div id="recaptcha1"></div> and <div id="recaptcha2"></div> respectively.
Then replace your script calling from
<script src="https://www.google.com/recaptcha/api.js></script>
to
<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
And insert these code in your <script></script>. Note that this should be outside of $(document).ready(function() { and above your next form submission AJAX codes.
var recaptcha1;
var recaptcha2;
var myCallBack = function() {
recaptcha1 = grecaptcha.render('recaptcha1', {
'sitekey' : 'YOUR_SITE_KEY'
});
recaptcha2 = grecaptcha.render('recaptcha2', {
'sitekey' : 'YOUR_SITE_KEY'
});
};
Next and last thing, change the captcha: grecaptcha.getResponse() in your form submission AJAX code to captcha: grecaptcha.getResponse(recaptcha1) and captcha: grecaptcha.getResponse(recaptcha2) respectively (for both AJAX codes of login and register forms in my case). For full form submission code please refer to the code in my question above. Just replace the captcha: part here as said.
Done! Now you can proceed to server side validation in your language (PHP or ASP whatever).
I have the following form
<body>
<div class="container">
<div class="title pull-left"><img src="http://www.isfin.ro/images/institutul_de_studii_financiare_ISF.png" width="145px" height="80px" /></div>
<div class="title pull-right"><h1>Actualizare newsletter</h1></div>
</div>
<hr class="featurette-divider"></hr>
<div class="container">
<div class="col-sm-12">
GDPR text goes here
</div>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" class="form-control" type="email" placeholder="Adresa Email">
</div>
<div class="form-group">
<label for="nume">Nume:</label>
<input id="nume" class="form-control" type="text" placeholder="Nume">
</div>
<p>Want to remain subscribed?</p>
<label class="radio-inline">
<input type="radio" name="optradio" value="yes">Yes
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="no">No
</label>
<br><br>
<button type="submit" id="submit" class="btn btn-default btn-block btn-primary">Trimite</button>
<div id="display"></div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var em = $("#email").val();
var sub = $("#nume").val();
var com = $("#comments").val();
var dataString = 'em1='+ em + '&sub1='+ sub + '&com1='+ com;
if(em==''||sub==''||com=='')
{
$("#display").html("<div class='alert alert-warning'>Please Fill All Fields.</div>");
}
else
{
$.ajax({
type: "POST",
url: "processor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
}
return false;
});
});
</script>
</div>
</body>
And this is the content of processor.php
<?php
include_once('config.php');
$email=mysqli_real_escape_string($con, $_POST['em1']);
$emailclean = filter_var($email, FILTER_SANITIZE_EMAIL, FILTER_FLAG_STRIP_HIGH);
$sub=mysqli_real_escape_string($con, $_POST['sub1']);
$subclean = filter_var($sub, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
//insert into database
mysqli_query($con,"INSERT INTO contact(`email`, `nume`)VALUES('$emailclean','$subclean')");
//send message back to AJAX
echo '<div class="alert alert-success">Preferintele au fost actualizate.</div>';
$con->close();
?>
How can I insert the content of the radio buttons Yes / No into a database field?
My database have the following structure id, email, nume, subscription_status, i need to insert the value from radio buttons into subscription_status (Yes or No value).
Thanks!
Get the value of selected checkbox:
var data = document.querySelector('input[name="optradio"]:checked').value;
Now add this value to your data string which you are sending via ajax:
var dataString = 'em1='+ em + '&sub1='+ sub + '&com1='+ com + '&radio=' + data;
And get the value on PHP/server side:
$radio_value = $_POST['radio'];
<div class="row">
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<form method="post" action="" name="contactForm" id="contactform" class="clearfix">
<fieldset>
<div class="float-left">
<div class="coolfx fadeInUp">
<!--<span>*Name<label for="name"></label></span>-->
<span><input type="text" id="contactName" name="name" placeholder="*Name" class="text" required></span>
</div>
<div class="coolfx fadeInUp" >
<!--<span>*Email<label for="email"></label></span>-->
<span><input type="email" id="contactEmail" name="email" placeholder="*Email" class="email" required></span>
</div>
<div class="coolfx fadeInUp">
<!--<span>Phone<label for="phone"></label></span>-->
<span><input type="text" id="contactPhone" name="phonenumber" placeholder="Phone" class="text" required></span>
</div>
</div>
<div class="float-right">
<div class="contactform message coolfx fadeInUp">
<!--<span>Message<label for="message"></label></span>-->
<span><textarea id="contactMessage" placeholder="*Message" name="message" class="textarea" required></textarea></span>
</div>
</div>
</fieldset>
<div class="float-right"><div class="g-recaptcha" data-sitekey="6LfsPBgTAAAAAPDkaI1HeSyDm_ecF0iihVsFYBKh"></div></div>
<div class="coolfx fadeInUp">
<input name="send" type="submit" class="submit" id="submit" value="Send Email">
</div>
<?php
if(isset($_POST['g-recaptcha-response']))
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = "******************************";// hide for security
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
if (isset($data->success) AND $data->success==true) {?>
<script type="text/javascript">
$(function() {
$("#contactform .submit").click(function() {
var data = {
name: $("#contactName").val(),
email: $("#contactEmail").val(),
phone: $("#contactPhone").val(),
message: $("#contactMessage").val()
};
$.ajax({
type: "POST",
url: "email.php",
data: data,
success: function(){
$('.success').fadeIn(1000);
}
});
});
});
</script>
<?php }else {
echo"this is spam"
}?>
I am new in j query how to use j query code inside the php code and also how to verify google captcha code before submit a mail function nothing working .
before google captcha working my code properly but now nothing working.
thanks
You need to handle the Captcha inside email.php. Before getting other posted field values you can check for Capcha response. Also don't forget that you need to post the captcha field (g-recaptcha-response) value like you post name, phone, email and messsage.
I have:
Index.php, login.php, register.php
In index.php I have modal popup and I want to user can login and register from popup.
I try with ajax but not working.
Here is my code:
ajax.php:
function validLogin(){
var email=$('.email').val();
var password=$('.password').val();
$.ajax({
type: "POST",
url: "sign-in.inc",
data: "name="+username+"&pwd="+password,
success: function(html){
if(html=='true'){
alert ("Correct");
}
else{
alert ("Wrong");
}
}
});
}
and here is popup form :
<div id="login">
<form class="form login-form" name="login-popup" >
<a class="btn-facebook" href="#"><span><i class="fa fa-facebook"></i>
</span><span>Login with Facebook</span></a>
<a class="btn-google" href="#"><span><i class="fa fa-google-plus"></i>
</span>
<span>Login with Google</span></a>
<p class="fieldset">
<label class="image-replace email icon-log" for="signin-email">E-mail</label>
<input class="full-width has-padding has-border email" id="signin-email" name="email-login" type="email" placeholder="E-mail" name="email" required>
<span class="error_box"></span>
</p>
<p class="fieldset">
<label class="image-replace password" for="signin-password">Password</label>
<input class="full-width has-padding has-border password" id="signin-password" type="password" placeholder="Password"
name="password" required>
Show
<span class="error-message"></span>
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Remember me</label>
</p>
<p class="fieldset">
<input class="full-width orange" id="login-submit" type="submit" name="submit" onclick="validLogin()" value="Login">
</p>
</form>
<p class="form-bottom-message">Forgot your password?</p>
<!-- Close -->
</div>
First, I would advise moving your JQuery to using IDs for selectors and not Classes. Second, your url doesn't look right. Unless you have .inc being handled or mapped on your server, this will not be able to process the request. Take a look:
function validLogin(){
var email = $('#signin-email').val();
var password = $('#signin-password').val();
$.ajax({
type: "POST",
url: "sign-in.php",
data: "name="+email+"&pwd="+password,
success: function(html){
if(html=='true'){
alert ("Correct");
} else {
alert ("Wrong");
}
}
});
}