Right now I am facing a problem : I am trying to insert records in the database with the help of jQuery & Ajax. Unfortunately, I tried to alert inserted values but It doesn't show. I also checked through serialize function and I am unable to do that.
Here is my code of ajax
<script type="text/javascript">
$(document).ready(function(){
$("#add_new").click(function(){
$("#add").slideToggle();
});
$("#submit").click(function(){
var stud_no=$("#roll").val();
if(stud_no==''){
$("#msg").html("Input Roll Number");
} else {
var datastr = $("#sampleform").serialize();
alert(datastr);
$.ajax({
type:'POST',
url:'add_it.php',
data:datastr,
success:function(response){
$("#my_form")[0].reset();
$("#msg").html("Student Successfully Added");
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
}
});
});
</script>
Here is body code :
<body>
<a id="add_new">+add new item</a><br /><br />
<div id="msg"></div><br />
<div id="add">
<form id="sampleform">
<fieldset>
<div class="form-group row">
<label for="roll" class="col-sm-2 col-form-label">Roll Number</label>
<div class="col-sm-6">
<input type="text" name="roll" class="form-control" id="roll">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-6">
<input type="text" name="name" class="form-control" id="name">
</div>
</div>
<div class="form-group row">
<label for="clas" class="col-sm-2 col-form-label">Class</label>
<div class="col-sm-6">
<input type="text" name="standard" class="form-control" id="standard">
</div>
</div>
<div class="form-group row">
<label for="mail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="email" name="mail" class="form-control" id="mail">
</div>
</div>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</fieldset>
</fieldset>
</form>
</div>
Here is my add_it.php
<?php
include('connectdb.php');
$stud_no = trim($_POST['stud_no']);
$name = trim($_POST['name']);
$standard = trim($_POST['standard']);
$mail = trim($_POST['mail']);
$query = "insert into student (stud_no,name,standard,email) values ('$stud_no','$name','$standard','$mail')";
mysqli_query($con,$query) or die (mysqli_error());
?>
Your HTML form fields doesnt have any of these variables sent. You need to add name="email" etc to your form fields.
So for example the email field has to look like this:
<input type="email" name="email" class="form-control" id="mail">
id, class etc is not sent in POST - and therefor can not be recieved in the other end.
Jquery's serialize() function also only handles "name" fields.
https://api.jquery.com/serialize/
Snippet :
For a form element's value to be included in the serialized string, the element must have a name attribute
Related
I've been trying to use ajax to insert data into my database but it didn't work. So I wrote a code to try a basic call for a php file and it didn't work either:
here is my html code :
<form >
<h4 class="header-title m-t-0 m-b-30">Cordonnées de facturation</h4>
<div class="form-group">
<label class="col-md-4 control-label">code facture</label>
<div class="col-md-6">
<input type="text" id="code_facture" class="code_facture form-control" placeholder="Ex : 008A00098">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Numéro du dossier</label>
<div class="col-md-6">
<input type="text" id="code_dossier" class="code_dossier form-control" placeholder="Ex : 008A00098">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">TPS</label>
<div class="col-md-6">
<input type="text" id="tps" class="tps form-control" placeholder="Ex : 0">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">TVQ</label>
<div class="col-md-6">
<input type="text" id="tvq" class="tvq form-control" placeholder="Ex : 0">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Référence</label>
<div class="col-md-6">
<input type="text" id="reference" class="reference form-control" placeholder="Ex : VAR R4055555">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">PNR</label>
<div class="col-md-6">
<input type="text" id="pnr" class="pnr form-control" placeholder="Ex : M15478LD265">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Date de facturation</label>
<div class="col-md-6">
<input type="text" placeholder="12/12/2012" data-mask="99/99/9999" id="date_facturation" class="date_facturation form-control">
<span class="font-13 text-muted">jj/mm/aaaa</span>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn" id="addfacturebutton"> ajouter</button>
</div>
and here is my ajax script
<script>
$('#addfacturebutton').click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'insertFacture.php',
data:{
code_facture:$('input[id=code_facture').val(),
code_dossier:$('input[id=code_dossier').val(),
tps:$('input[id=tps').val(),
tvq:$('input[id=tvq').val(),
reference:$('input[id=reference').val(),
pnr:$('input[id=pnr').val(),
date_facturation:$('input[id=date_facturation').val(),
},
success:function(data){
},
});
});
</script>
so in my php file I tried to write die('test'); but inserting into database didn't work either.
it doesn't call the functions
here is my php file:
<?php
include('functions.php');
$data = $_POST['code_dossier'];
die('works');
?>
Have you tried to dump $_POST of your insertFacture.php file? It seems like you do have wrong php filename or something wrong with the functions.php
Your code does not confirm if the js code works or not.
Try this:
Change this line:
success:function(data){
}
to:
success:function(data){
alert(data)
}
And change every occurrence of:
').val()
to
]').val()
If there is an alert, then the js is working. And I cannot see anything related to database in your php code.
To reduce the lines of code in ajax, you can alternatively add an id attribute on the form tag and then either serialize() or use FormData()
<form id='myFormTag'>
Then in ajax, simply call FormData() on submit()
$('#myFormTag').submit(function(e){
e.preventDefault();
$.ajax({
data: new FormData(this),
//other AJax Stuff
success:function(data){
alert(data)
}
});
});
I am sending data successfully using ajax method of jQuery to a PHP file.
Now, my problem is that I want to populate a modal form for editing an existing database record based on event ID that I am sending to my PHP page.
the snippet I use to call the PHP page is:
$.ajax({
url: 'dbget.php',
data: 'eventid='+event.id,
type: 'POST',
dataType: 'json',
cache: false,
success: function(json_resp){
//populate_data('#update_event', json_resp);
$('#updateModal').modal('show');
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
As you can see that I can't seem to get the data to populate in the form in success section of the ajax method.
Here is the data returned from PHP file:
[{"u_id":"21","u_eventName":"Ready Ply","u_eventDate":"2017-05-11","u_customerName":"Fassoooggg","u_customerMobile":"9383838383","u_customerEmail":"ffgg#gmaks.com","u_totalAmount":"1000","u_advanceAmount":"500","u_balanceAmount":"500"}]
Here is the PHP file snippet processing DB request and sending json encoded data:
//Get the evenId from the POST request
$eventId = $_POST['eventid'];
$events = array();
$getQuery = mysqli_query($con, "SELECT eventmaster.id, eventmaster.eventName, eventmaster.startDate, eventmaster.customerName, "
."eventmaster.customerMobile, eventmaster.customerEmail, eventdetail.totalAmount, eventdetail.advanceAmount, "
."eventdetail.balanceAmount FROM eventMaster INNER JOIN eventdetail ON eventmaster.id = eventdetail.eventId "
."WHERE eventmaster.id= '$eventId'");
while($fetch = mysqli_fetch_array($getQuery, MYSQLI_ASSOC))
{
$e = array();
$e['u_id'] = $fetch['id'];
$e['u_eventName'] = $fetch['eventName'];
$eventDate = substr($fetch['startDate'],0,10); //extract the eventDate in yyyy-mm-dd format from the table date
$e['u_eventDate'] = $eventDate;
$e['u_customerName'] = $fetch['customerName'];
$e['u_customerMobile'] = $fetch['customerMobile'];
$e['u_customerEmail'] = $fetch['customerEmail'];
$e['u_totalAmount'] = $fetch['totalAmount'];
$e['u_advanceAmount'] = $fetch['advanceAmount'];
$e['u_balanceAmount'] = $fetch['balanceAmount'];
array_push($events, $e);
}
//printf("Data sent to client: " );
echo json_encode($events); //return data in JSON array
Please note that the keys in the json data match the name of the form fields. Here is the form snippet. This is the form I am trying to populate:
<!-- Update Event Modal Starts -->
<div id="updateModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><!-- Modal Header -->
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Event</h4>
</div>
<div class="modal-body"><!-- Modal Body -->
<p class="statusMsg"></p>
<form method="post" id="update_event">
<div class="form-group">
<input type="text" name="u_id" id="u_id" class="form-control" />
</div>
<div class="form-group">
<label for="u_eventName">Event Name</label>
<input type="text" name="u_eventName" id="u_eventName" class="form-control" placeholder="Event Name"/>
</div>
<label for="u_startDate">Event Date</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="u_startDate" id="u_startDate" readonly />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div class="form-group">
<label for="u_customerName">Customer Name</label>
<input type="text" name="u_customerName" id="u_customerName" class="form-control" placeholder="Customer Name"/>
</div>
<div class="form-group">
<label for="u_customerMobile">Customer Mobile</label>
<input type="text" name="u_customerMobile" id="u_customerMobile" class="form-control" />
</div>
<div class="form-group">
<label for="u_customerEmail">Customer Email</label>
<input type="text" name="u_customerEmail" id="u_customerEmail" class="form-control" placeholder="customer#email.com"/>
</div>
<div class="form-group">
<label for="u_totalAmount">Total Amount</label>
<input type="text" name="u_totalAmount" id="u_totalAmount" class="form-control" placeholder="0"/>
</div>
<div class="form-group">
<label for="u_advanceAmount">Advance Amount</label>
<input type="text" name="u_advanceAmount" id="u_advanceAmount" class="form-control" placeholder="0"/>
</div>
<div class="form-group">
<label for="u_balanceAmount">Balance Amount</label>
<input type="text" name="u_balanceAmount" id="u_balanceAmount" class="form-control" placeholder="0"/>
</div>
<div class="form-group">
<input type="submit" name="updateBtn" id="updateBtn" value="Update" class="btn btn-success" />
</div>
</form>
</div>
<div class="modal-footer"><!--Modal Footer -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Update Event Modal Ends -->
So, once again, after you look at the above code snippets, please help me to populate the form with the JSON object sent from the PHP file containing one row record from database to be populated in the form.
Am I missing something or what? Also, if I try to print the JSON object in the html page, I only get an OBJECT printed instead of the data.
The sample I posted here was what I echoed from PHP.
Anyone's help will be highly appreciated. Thanks.
I have this form
<form name="main" id="main" class="form-horizontal" method="post">
<div class="form-group">
<label for="value" class="col-sm-2 control-label">Enter Value</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="value" id="value" placeholder="Enter value">
</div>
</div>
<div class="form-group">
<label for="value" class="col-sm-2 control-label">Result</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="result" id="result" placeholder="result" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="submit" class="btn btn-default" id="Convert" name="Convert" value="Convert">Submit</button>
</div>
</div>
</form>
and the jquery file is:
$( document ).ready(function() {
console.log("ready");
$('#main').submit(function(e){
e.preventDefault();
$.ajax({
type: "GET",
url : "index.php", //your processing page URL instead of ???
data: "&example=2",
success: function(){
alert("success");
$("#result").html("Example content");
}
});
});
});
I want to display the example content string on the #result field when the form submits. It seems simple but I have tried everything and nothing works. I get no http and console errors and the alert shows "success"
You are making a mistake when you are writing $("#result").html("Example content"); because it is a input not an element holder.
Change your code to
$('#result').val("Example Content");
I have a page called page2.php. It has a form that allows you to search via jquery ajax call. The code is below. My question is, I have a different form on page1.php. How can I submit the form on page1.php to go to page2.php and have it execute the page2.php code below using the data from the form on page1.php? I know this is most likely simple, having a brain fart right now.
$(function() {
$.validate({
form: '#form_search',
validateOnBlur: false,
errorMessagePosition: 'top',
onSuccess: function(form) {
var formval = $(form).serialize();
var formurl = '/page2.php?a=search';
$('#form_results').html('<div class="form_wait_search">Searching, please wait...<br><img src="/images/search-loader.gif"></div>');
$.ajax({
type: 'POST',
url: formurl,
data: formval,
success: function(data){
var json = $.parseJSON(data);
$('#form_errors').html(json.message);
$('#form_results').html(json.results);
}
});
return false;
}
});
});
UPDATE
Here is the forms Im referring to.
On page1.php this is like a module on the right side bar. Just a form that I want to post to page2.php
<div class="scontent_box1">
<strong class="box_title"><i class="fa fa-search fa-flip-horizontal"></i> Find Locations</strong>
<form method="post" action="/page2.php">
<div class="form-group">
<label>Street Address</label>
<input type="text" class="form-control" name="ad" placeholder="Enter Street Address...">
</div>
<div class="form-group">
<label>City, State or Zip Code</label>
<input type="text" class="form-control" name="ct" placeholder="Enter City, State or Zip Code...">
</div>
<button type="submit" class="btn btn-default blue_btn">Search</button>
</form>
</div>
Now here is the form on page2.php that executes the ajax code above. I want page1.php to submit to page2.php and envoke the same jquery code above.
<div class="row no_gutters">
<div class="search_page">
<div id="form_errors"></div>
<form method="post" id="form_search">
<div class="form-group">
<label for="ad">Street Address<span class="reqfld">*</span></label>
<input type="text" class="form-control" data-validation="required" id="ad" name="ad" placeholder="Enter Street Address..." value="">
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="ct">City, State or Zip Code<span class="reqfld">*</span></label>
<input type="text" class="form-control input-sm" data-validation="required" id="ct" name="ct" placeholder="Enter City Name..." value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<button type="submit" class="btn btn-default blue_btn btn-block">Search Locations</button>
</div>
<div class="col-md-8"></div>
</div>
</form>
</div>
<div id="form_results"></div>
</div>
<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.