I am making a simple program for editing/updating/inserting in the table which contains table having columns of product names, price and image. The problem that I am facing is file uploading using ajax(how to use form data object sending data to PHP file using ajax). I tried to wrap inside the form but not working (any alternative for this).
dynamic PHP code
<form method="post" id="form'.$value['id'].'">
<tr class="jsgrid-filter-row" id="'.$value['id'].'">
<td class="jsgrid-cell" style="width: 163px"; id="lOcolumn'.$value['id'].'" >'.$value['productname'].'</td>
<td class="jsgrid-cell" style="width: 100px"; id="accolumn'.$value['id'].'" >'.$value['price'].'</td>
<td class="jsgrid-cell" style="width: 100px"; id="cocolumn'.$value['id'].'" >'.$array[$value['productcategory']-1].'</td>
<td class="jsgrid-cell jsgrid-align-center" id="imagecolumn'.$value['id'].'" style="width: 100px;""><a target="_blank" href="./user/'.$value['imagelink'].'" id="image'.$value['id'].'">image '.$value['id'].'</td>
<td class="jsgrid-cell jsgrid-control-field jsgrid-align-center" style="width: 50px;" id="inputedit'.$value['id'].'"><input class="jsgrid-button jsgrid-edit-button editButtonClass" id="editButtonn'.$value['id'].'" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button deleteButtonClass" type="button" title="Delete" id="deleteButton'.$value['id'].'"></td>
</tr>
</form>
$("form").submit(function(evt){
evt.preventDefault();
var formData = new FormData($(this));
$.ajax({
url: 'fileUploadUrl',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});
Please try above code. use jquery for file upload.
Use js/jquery to fetch the relevant values and submit them by ajax. you cannot use form tag between table tags. see below example,
$('.btn_save').click(function(){
let id = $(this).attr('data-id'); //this is the id of row
let name = $(this).parent().parent().find('.name').val(); //this is the name of relavent row
let price = $(this).parent().parent().find('.price').val(); //this is the price of relavent row
//do your ajax here
alert(id);
alert(name);
alert(price);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" width="100%">
<tr>
<td><input class="name" type="text"></td>
<td><input class="price" type="text"></td>
<td>
<button data-id="1" class="btn_save">Save</button>
</td>
</tr>
<tr>
<td><input class="name" type="text"></td>
<td><input class="price" type="text"></td>
<td>
<button data-id="2" class="btn_save">Save</button>
</td>
</tr>
</table>
Related
I design a simple page were user can put name, password and image using html.
I try to sent those data using ajax to specific php page, but I cannot implement this.
how I do this thing
Html code
<?php include('connection.php'); ?>
<form id="form" enctype="multipart/form-data">
<table>
<tr>
<td>Name:</td>
<td><input type="name" id="name"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pass"></td>
</tr>
<tr>
<td>Photos:</td>
<td><input type="file" id="photos"></td>
</tr>
<tr>
<td><input type="submit" id="go"></td>
</tr>
</table>
</form>
Jquery and ajax
<script>
$(document).ready(function(){
$('#go').click(function(){
var img_name = $('#img_name').val();
var name = $('#name').val();
var pass = $('#pass').val();
$.ajax({
type : "POST",
url : "singup_submit.php",
data : { img_name:img_name, name:name, pass:pass},
success : function(done){
alert(done);
}
});
});
});
</script>
Php code
<?php
include('connection.php');
if(isset($_POST)){
$name = $_POST['name'];
$pass = $_POST['pass'];
$img_name=$_FILES['img_name']['name'];
$qr="INSERT INTO data (name,pass,img_name) VALUES ('$name','$pass','$img_name')";
$ex=mysqli_query($con,$qr) or die(mysqli_error($con));
if($ex==1)
echo 'done';
else
echo 'not done';
}
Follow this code ..It may help you
<script>
$(document).ready(function(){
$("#go").click(function(){
var name = $("#name").val();
var pasword = $("#password").val();
var photos = $("#photos").val();
if(name==''||pass==''||photos==''){
alert("Please Fill All Fields");
}
else{
$.ajax({
type : "POST",
url : "singup_submit.php",
data : formData,
cache : false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
</script>
you are not sending any file in your ajax request.
$(document).ready(function(){
$("#go").on('submit',function(e){
e.preventDefault()
$.ajax({
url: 'singup_submit.php',
type: 'POST',
data: new FormData(this),
contentType: false,
processData: false,
success: function(response){
alert(done);
},
error: function(data){
console.log("error");
console.log(data);
}
},
});
});
});
and then take data from global variables in php as you are doing now.
and please assign name to your form fields like so
<form id="form" enctype="multipart/form-data">
<table>
<tr>
<td>Name:</td>
<td><input type="name" name="name" id="name"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="pass"></td>
</tr>
<tr>
<td>Photos:</td>
<td><input type="file" name="img" id="photos"></td>
</tr>
<tr>
<td><input type="submit" name="submit" id="go"></td>
</tr>
</table>
</form>
and it should work.
I noob and get mad when submit php form, convert input value to json, and other php file get it.
html
<form action="submit.php" method="post" name="form1" id="myform">
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
</form>
<script src="script.js"></script>
script.js
$('#myform').submit(function (event) {
name = $('#name').val();
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json'
});
return false
});
php file
header('Content-Type: application/json');
$name_dirty = json_decode($_POST['name']);
echo $name_dirty;
Can someone help me? submit.php got blank, I cant get the value that I submit from html page. Big Thanks
Your Html
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
<script src="script.js"></script>
Your JS
$('#submit').click(function() {
name = $('#name').val()
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
data: data
dataType: 'json'
complete: function (resultData) {
alert('data has been send')
})
})
In your php:
<?php
print_r($_POST['data'])
A few notes. Make sure you check your paths. In my answer i assumed that the problem is in the code and not in wrong paths. Also when you use form tag you can use a submit button like <input type="submit" value="Submit"> to submit your form without using Javascript. It would work in your case but it's just another way to tackle your issue.
In my answer i removed your form tags and triggered the action on button click. There will be no redirect to the page but you can set a redirect inside the js if it is important to you, on success function of the ajax that i added. At the moment i just throw an alert message when it works successfully.
On entering the customer name in textbox it searches for customer info. I have generated successfully using JQuery by passing the entire table through Json variable, as I dont want any page refresh. Now I want to select the customer id generated from mysql db (php) through radio button, but the radio button event is not working. For testing purpose I have put a static table having the same radio button properties in that particular div(place for dynamic record generation using JQuery) and working fine. Hence I found that the data received through JQuery got some problem. Hope I am clear. Please find a way. Thanks in advance.
below is the code
abc.php
<input type="text" placeholder="full name" id="fullName" name="fullName" class="txt" style="width: 250px" />
<input type="button" id="btSelect" value="Select" class="button-crystal" />
<div id="disp"></div>
script.js
$('#btSelect').click(function () {
var form_data = {
genCustDetails: $('#fullName').val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: "xyz.php",
data: form_data,
dataType: "json",
success: function (response)
{
$('#disp').html(response);
}
});
return false;
});
xyz.php
if (isset($_POST['genCustDetails'])) {
$out="";
$result = mysql_query("select * from dbcustdetails where name like '$_POST[genCustDetails]%'");
while ($row = mysql_fetch_assoc($result)) {
$out.='
<table style="background-color:#eee; margin-bottom:5px;">
<tr>
<th class="td3">Customer ID</th>
<td class="td4">
'.$row["custID"].' <input type="radio" id="cust_ID" name="cust_ID" value="'.$row["custID"].'" />
</td>
</tr>
<tr>
<th class="td3">Name</th>
<td class="td4">'.$row["name"].'</td>
</tr>
<tr>
<th class="td3">Phone No.</th>
<td class="td4">'.$row["phno"].'</td>
</tr>
<tr>
<th class="td3">Email</th>
<td class="td4">'.$row["email"].'</td>
</tr>
<tr>
<td colspan="2" style="padding:0;">
<b>Address</b><br/>'.$row["addr"].'
</td>
</tr>
</table>';
}
echo json_encode($out);
}
Maybe You should'nt bind the event properly for the dynamic elements in the DOM.
Try Like this
$('body').on('change','.radiobuttonClassorID',function(){
//actions
});
that is because your newly generated radio button is not having any event handler assigned to it.
you have to assign an event handler after the ajax call (on ajax success).
something like
$('input[type="radio"]').unbind('click').click(function(){
//Your handler code
})
I want to get results from 2 table using SQL INNER JOIN but it's only showing 1st result not others one. If i select other data then it's showing following error message:
Warning: Invalid argument supplied for foreach() in D:\software installed\xampp\htdocs\contact-management\getContactDetails.php on line 14[]
Description of my functionality:
I have 2 table in my database.
contact_details:
cdid, family_name, given_name, work_phone, mobile_phone, email, email_private, cid
contact_docs:
docid, cdid, file_name, file_des
I'm showing all contacts (only family_name) from database. After select each contacts then it's showing/loading all contact details using Jquery/ajax which is showing on a HTML FORM. So now it's showing contact_details data on the html input type = text field. But I also need show contact_docs data which is actually files.
So when I send a request to the server using jQuery/ajax I've to use SQL inner join query to get the result from both table based on id (cdid). But unfortunately my inner join query is not working properly. It's not showing all contact details data on the html form if I select different contacts. Only showing 1st result.
My questions are:
How do I fix this inner join query?
How do I show the uploaded file on the form (file link would be better) when whole form is load with all data from 2 table ?
Note: I can successfully edit/insert the data to database but issue about showing the data with file.
This is my code:
Html page:
<div id="showContactsDetails">
<h2>Individual Record Details</h2>
<div style=" visibility:hidden;" id="visiable">
<span class="mandatory"><sub>* Required</sub></span>
<!--success update -->
<div id="success"></div>
<form action="" method="post" enctype="multipart/form-data" id="all_contact_details">
<table width="450" border="0" cellspacing="0" cellpadding="0">
<input type="hidden" name="cdid" id="cdid"/>
</tr>
<tr>
<td>Company Name</td>
<td><input type="text" name="company_name" id="company_name" disabled="disabled"/></td>
</tr>
<tr>
<td>Family name</td>
<td><input type="text" name="family_name" id="family_name"/></td>
</tr>
<tr>
<td>Given name</td>
<td><input type="text" name="given_name" id="given_name"/></td>
</tr>
<tr>
<td>Work Phone</td>
<td><input type="text" name="work_phone" id="work_phone"/></td>
</tr>
<tr>
<td>Mobile Phone</td>
<td><input type="text" name="mobile_phone" id="mobile_phone"/></td>
</tr>
<tr>
<td>Email address</td>
<td><input type="text" name="email" id="email"/></td>
</tr>
<tr>
<td>Private email address</td>
<td><input type="text" name="email_private" id="email_private"/></td>
</tr>
<tr>
<td>Upload your document</td>
<td><input type="text" name="file_des_1" id="file_des1" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
<tr>
<td></td>
<td align="left"><input name="file1" type="file" id="file" class="file"/></td>
<span class="file_des_1"></span>
</tr>
<tr>
<td></td>
<td><input type="text" name="file_des_2" id="file_des2" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
<tr>
<td></td>
<td align="left"><input type="file" name="file2" id="file_2" class="file"/></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="file_des_3" id="file_des3" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
<tr>
<td></td>
<td align="left"><input type="file" name="file3" id="file_3" class="file"/></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="file_des_4" id="file_des4" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
<tr>
<td></td>
<td align="left"><input type="file" name="file4" id="file_4" class="file"/></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="submit" value="Update Details" class="submit" id="upload"/></td>
</tr>
</table>
</form>
</div>
</div><!--showContactsDetails-->
jQuery/Ajax page:
//edit the form....................
<script>
$('body').on('click', '#upload', function(e){
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
$.ajax({
url: 'editContactDetails.php',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success: function(data){
$("#success").html(data);
document.getElementById("all_contact_details").reset();
},
data: formData,
cache: false,
contentType: false,
processData: false
});
});
//load the html form with all contact details..................................................
function getDetails(id) {
id = id;
$.ajax({
url: 'getContactDetails.php',
type: 'post',
data: {'id' : id},
dataType : 'json',
success: function( res ) {
document.getElementById("visiable").style.visibility = "visible";
console.log(res);
$.each( res, function( key, value ) {
console.log(key, value);
$('input[type=text][name='+key+']').val(value);
$('input[type=hidden][name='+key+']').val(value);
$('textarea[name='+key+']').val(value);
});
}
});
}
</script>
Php page (getContactDetails.php):
<?php
ob_start();
require_once("config.php");
$id = (int) $_POST['id'];
$sql = mysql_query("SELECT contact_details.cdid, contact_details.family_name, contact_docs.file_name FROM contact_details INNER JOIN contact_docs ON contact_details.cdid = contact_docs.cdid WHERE contact_docs.cdid = '$id'");
$res = mysql_fetch_array($sql);
$data = array();
foreach( $res as $key => $value ) {
$data[$key] = $value;
}
echo json_encode($data);
?>
I'm a new in web development field. So may be my code is wrong that's why your help is greatly appreciated :)
I think you want something like this... (using deprecated API)
<?php
require_once("config.php");
$id = (int) $_GET['id'];
$query = "
"SELECT c.cdid
, c.family_name
, d.file_name
FROM contact_details c
JOIN contact_docs d
ON c.cdid = d.cdid
WHERE d.cdid = $id
";
$result = mysql_query($query);
$data = array();
while ($res = mysql_fetch_array($result)){
foreach( $res as $key => $value ) {
$data[$key][] = $value;
}
}
echo json_encode($data);
?>
I have this script,so it goes to ../AdsCreate/CreateCar.php reads the form and inserts into databse and loads page into a certain div which all works fine.
I have one problem one part of the form is to upload an image,now that it does not do I have been told it's because that script below serialize the data and does not do that for file based.
Here is the script.
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#Submit").click(function() {
var url = "../AdsCreate/CreateCar.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
});
</script>
Here is my form
<form method="post" enctype="multipart/form-data" id="myForm">
<table class="default1" style="width: 100%" align="center">
<tr>
<td class="content1" colspan="3"><h3><b>Car Ads</b></h3></td>
</tr>
<tr>
<td class="content1" width="70%">Make: <input type="text" name="name"></td>
<td class="content1" width="15%">Model: <input type="text" name = "email"></td>
<td class="content1" width="15%">Year: <input type="text" name = "phone"></td>
</tr>
<tr>
<td class="content1" colspan="3">Main Photo: <input type="file" name="photo"></td>
</tr>
<tr>
<td class="content1" colspan="3"><input type="submit" value="Upload" id="Submit"></td>
</tr>
</table>
</form>
How can I change the script so I can upload a form that also has a file upload??
You can upload file separately using this plugin:
http://blueimp.github.com/jQuery-File-Upload/
You can also use jQuery Forms to upload File:
http://www.malsup.com/jquery/form/#file-upload
Make sure to disable submit button once a file is selected so it will upload the image first before the user can submit the form.