at the first , excuse me for my bad english
i working in ubuntu for a jquery/ajax system
my codes in below:
index.html
...
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form name="stuSelForm" id="stuSelForm">
<table id="inputTable">
<tr><td colspan="3" align="center">Stu From</td></tr>
<tr>
<td> </td>
<td>St No : </td>
<td><input type="text" name="StNo" id="StNo" /></td>
</tr>
<tr>
<td></td>
<td>name : <br/> family : </td>
<td><input type="text" name="Fname" id="Fname" /><br/><input type="text" name="Lname" id="Lname" /></td>
</tr>
<tr>
<td colspan="3" align="right"><input type="submit" id="send" name="send" value="show" /></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="js/jscodes.js"></script>
...
js file :
$(document).ready(function()
{
$('#stuSelForm').submit(function(event)
{
var form = $(this);
inputs = form.find("input");
serializedData = form.serialize();
inputs.attr("disabled","disabled");
$.ajax({
url:'process.php',
type:'POST',
data: serializedData,
dataType:'text',
cache: false,
success : function(data,textStatus,jqXHR){ alert(data); },
error : function(jqXHR,textStatus,errorThrown) { alert(textStatus+jqXHR.status+jqXHR.responseText+"..."); },
complete : function(jqXHR,textStatus)
{
inputs.removeattr("disabled");
}
});
event.preventDefault();
});
});
and process.php :
<?php
header("Content-Type: text/html");
$StNo = $_POST['StNo'];
echo $_POST['StNo'];
?>
now all things are ok but the return value isn't StNo
it is whole content of process.php
it's mean
please help me why this happen
are this for php extensions or a mistake from me or ...
tanx for ur help
It sounds like the php is not running. Are you running your HTML file which calls the php file through localhost / a server or directly from the directory? You need the php server to evaluate your php script.
problem in your header:
you write in jquery dataType: text but you write in php header("Content-Type: text/html");
change it for get success:
like this:
$.ajax({
url:'process.php',
type:'POST',
data: serializedData,
cache: false,
success : function(data,textStatus,jqXHR){ alert(data); },
error : function(jqXHR,textStatus,errorThrown) { alert(textStatus+jqXHR.status+jqXHR.responseText+"..."); },
complete : function(jqXHR,textStatus){inputs.removeattr("disabled");}
});
I remove dataType:, because jquery default settings is dataType:'html'
and you don't need write dataType in this case
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.
I'm working with Ajax, PHP.
I want to upload an image without clicking the submit button and I'm using the approach described in this answer: How to upload file using jquery ajax and php (without clicking any submit button)
But it's not working. Do I need to change the data type or something else?
Here's my code:
jQuery/Ajax
$(document).ready(function(){
var b = new FormData($(this).closest("form")[0]);
b.append('image', $('input[type=file]')[0].files[0]);
$("#imgInput").change(function(){
$.ajax({
url: "test.php",
type: "post",
datatype: 'json',
processData: false,
contentType: false,
data: b,
success: function(text){
if(text== "success"){
alert("Image uploaded");
}
},
error: function(){
alert("Not uploaded");
}
});
});
});
test.php
<?php
$filename=$_FILES["image"]["name"];
$filetmp=$_FILES["image"]["tmp_name"];
$filetype=$_FILES["image"]["type"];
$filepath="images/".$filename;
move_uploaded_file($filetmp, $filepath);
?>
HTML
<form name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" placeholder="Enter your name" /></td>
<td rowspan="3"><div class="propic"><img id="" /></div>
<input id="imgInput" type="file" name="image" /></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="Enter username"/></td>
</tr>
<tr>
<td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no."/></td>
</tr>
<tr>
<td><input type="password" name="password" maxlength="12" placeholder="Enter password"/></td>
<td><input id="button" type="submit" name="submit" value="Sign Up" /></td>
</tr>
</table>
</form>
You need to use FormData() to send files to server through AJAX. Change your script to:
$.ajax({
url: "test.php",
type: "POST",
data: new FormData($(this).closest("form")[0]), // This is the main place you need.
contentType : false,
async: false,
processData: false,
cache: false,
success: function(text) {
if(text== "success"){
alert("Image uploaded");
}
}
});
If you are just looking to get it working, I recommend Ravishanker Kusuma's Hayageek jQuery File Upload plugin. I don't usually recommend plugins, but this one is excellent. It does almost all the work for you.
http://hayageek.com/docs/jquery-upload-file.php
He breaks down the process into four simple steps, that basically look like this:
Look for //1 //2 //3:
<head>
// (1) Load the js files (note that it requires jQuery, which we also load)
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script> // (1)
</head>
<body>
<div id="fileuploader">Upload</div> // (2) Create DIV
<script>
$(document).ready(function(){
$("#fileuploader").uploadFile({ // (3) initialize plugin
url:"my_php_processor.php",
fileName:"myfile"
});
});
</script>
</body>
The final (fourth) step is to create a PHP file with same name as specified above in the jQuery code (in this case my_php_processor.php) to receive and process the file:
my_php_processor.php:
<?php
$output_dir = "uploads/";
$theFile = $_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
Note the relationship between myfile in the PHP ($_FILES["myfile"]), and the filename myfile specified in the jQuery code block.
On the Hayageek web page, study the upload.php example on the Server tab.
Note that you can also pass additional variables to the my_php_processor.php processor file by using dynamicFormData. See this other example:
$("#fileuploader").uploadFile({
url:"my_php_processor.php",
fileName:"myfile",
dynamicFormData: function(){
return {
//my_php_processor.php will receive POST vars below
newSubj: $("#newSubj").val(),
newBody: $("#newBody").val(),
};
},
onSuccess:function(files,data,xhr,pd){
//files: list of files
//data: response from server
//xhr : jquery xhr object
alert(xhr.responseText); //displays data ECHOd by `my_php_processor.php`
}
});
my_php_processor.php:
<?php
$n = $_POST['newSubj'];
$b = $_POST['newBody'];
$uploadedFile = $_FILES["myfile"]["name"];
//etc.
echo 'This will display in the alert box';
jsFiddle Sample Code -
Click on Image Example
i am making a website in which i am to embbed the functionality of delete using multiple checkbox. here is my code. my problem is
1. Ajax call is not working.
2. how can i make search from database for array .
<?php
if(isset($_POST['Delete']))
{
$array=$_POST['check_box'];
}
?>
<form method="post" id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while($selectnumberarr=mysql_fetch_array($selectnumber))
{
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" id="<?php $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}?>
<input type="submit" name="Delete" id="delete">
</table>
</form>
and below is my ajax and javascript code.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
any help would be appriciated
your code is almost correct. You need to remove `onChange="show()" for input checkbox, because if you have jquery then you don't need to put events on HTML elements.
Use jquery 'on' method for compatibility for latest php library.
Replace your jquery code with following jquery code :-
<script>
$(document).ready(function(){
$('#delete').on('click',function()
{
var cat_id = $('.check_box:checked').map(function() {
return this.id;
}).get().join(',');
console.log(cat_id);
$.ajax({
type: "POST",
url: "checkbox.php",
data: { "kw ":cat_id },
datatype:'json',
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
Use ".check_box" instead of "element" in jquery to prevent checks for all checkboxes, instead of desired ones.
Hope it helps.
Why you don't use an array for sending the checkboxes like:
HTML part:
<?php
if (isset($_POST['check_box'])) {
var_dump($_POST['check_box']);
echo "ajax call is working";
}
?>
<form id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while ($selectnumberarr = mysql_fetch_array($selectnumber)) {
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" value="<?php echo $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}
?>
</table>
<input type="button"name="delete" id="delete" value="Delete" />
</form>
JQuery part:
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
So you can easily get an array of the selected checkboxes in php with:
$idsArray = $_POST["check_box"];
this looks now like:
array(
"1", "2","etc.."
);
so this array contains all the ids of the selected checkboxes for delete.
I have this code for send simple data using jquery , but no works , all time reload de page and no load contents i send by post
My code it´s this :
<script>
$(document).ready(function() {
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "indexer_adm.php?send_order2=ok",
success: function(data){
$("#load_order").html(data);
}
});
return false;
});
</script>
<form name="forma" id="form_order" method="post" action="">
<table width="100%" border="1">
<tr>
<td height="30" align="center" valign="middle">
<select name="select_order">
<option value="articles">Articles</option>
<option value="blogs">Blogs</option>
<option value="products">Products</option>
</select>
<input type="submit" name="Submit" value="Acceder">
<input type="hidden" name="send_order2" value="ok">
<input type="hidden" name="action_load" value="<?php echo $_REQUEST['action_load'];?>">
</td>
</tr>
<tr>
<td height="30" align="center" valign="middle"> </td>
</tr>
</table>
</form>
<div id="load_order"></div>
In the div called load_order , it must load the result of this send by post from the form , but the page reload and no works , i see the code many times but i don´t understand what happen
Thank´s for All
There is a syntax error in your code, you haven't closed the submit handler.
$(document).ready(function() {
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "indexer_adm.php?send_order2=ok",
success: function(data){
$("#load_order").html(data);
}
});
return false;
}); // <---
});
Try returning false inside of the submit block, rather than of the ready block.
You may have a syntax error since return false should stop the form from refreshing. I would use the post function instead:
<script>
$(function() {
$("#form_order").submit( function () {
$.post('indexer_adm.php?send_order2=ok', $(this).serialize(), function(data) {
$("#load_order").html(data);
});
return false;
});
</script>
Ok !!! , Thank´s everybody
The Right code :
<script>
$(document).ready(function() {
/*
$("#load_order").show(1000);
$("#load_order").load("<?php print "".$ruta_path_adm."".$ruta_modulos."/mod_order/indexer_adm.php?send_order2=ok";?>");
*/
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "<?php print "".$ruta_path_adm."".$ruta_modulos."/mod_order/indexer_adm.php?send_order2=ok";?>",
success: function(data){
$("#load_order").html(data);
}
});
return false;
});
});
</script>
Thank´s for the help i put bad the script and no see this , thank´s