funbinod Posted January 22, 2017 Share Posted January 22, 2017 (edited) hello all. i got confused in sending form data using ajax. when i send data using ajax with GET type, it works fine. but when i send it with POST type it doesn't work here is the ajax i use : $(document).ready(function(e) { function submIt() { $('input').attr('disabled', 'disabled'); var formData = new FormData(document.getElementById("pgm")); $.ajax({ url:"process.php", dataType:"text", processData:false, contentType:false, enctype:"multipart/form-data", type:'POST', data: formData, success: function(result) { $('input').removeAttr('disabled'); if ($(result).filter('#success').text() == '' || $(result).filter('#success').text() == 'NO'){ $('input, textarea').css('border', '2px solid red'); alert($(result).filter('#msg').text()); } else { $('input').removeAttr('disabled'); $('input, textarea').css('border', '1px solid green'); alert($(result).filter('#msg').text()); $('#adit').empty(); $('#adit').load('pgmadd.php'); } }, error: function() { $('input').removeAttr('disabled'); $('input, textarea').css('border', '2px solid red'); alert($(result).filter('#msg').text()); } }); } $('#submit').on('click', function(e) { if ($('#head').val() == '' || $('#desc').val() == '') { if ($('#head').val() == '') { alert('Program name is blank!'); $('#head').select(); $('#head').css('border', '2px solid red'); } if ($('#desc').val() == '') { alert('Description is empty!'); $('#desc').css('border', '2px solid red'); $('#head').select(); } } else { submIt(); } }); }) it is working properly when i use < type: 'GET' > Edit: I'm using jQuery 1.8.2 please guide me. thanks in advance. Edited January 22, 2017 by funbinod Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2017 Share Posted January 22, 2017 AND WHAT! is the 'process.php' using to read ajax data sent to it? $_POST, $_GET, or $_REQUEST. Link to comment Share on other sites More sharing options...
funbinod Posted January 22, 2017 Author Share Posted January 22, 2017 AND WHAT! is the 'process.php' using to read ajax data sent to it? $_POST, $_GET, or $_REQUEST. its obviously $_POST here is the PHP $m = $_POST['m']; if ($m == 'pgmadd') { $head = ($_POST['hdng']); $descr = ($_POST['description']); $usenow = 'Y'; $sql = $mysqli->prepare("INSERT INTO programs (head, description, status, filepath) VALUES(?,?,?,?)"); if (!$sql) { echo '<div id="success">NO</div>'; echo '<div id="msg">Error: '.$mysqli->error.'</div>'; } else { $sql->bind_param('ssss', $head, $descr, $usenow, $img); $msg = "Added Successfully!"; } if ($sql->execute()) { echo '<div id="success">YES</div>'; echo '<div id="msg">'.$msg.'</div>'; } else { echo '<div id="success">NO</div>'; echo '<div id="msg">Error: '.$mysqli->error.'</div>'; } } Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2017 Share Posted January 22, 2017 Where is the value for $img coming from? Link to comment Share on other sites More sharing options...
funbinod Posted January 22, 2017 Author Share Posted January 22, 2017 (edited) Where is the value for $img coming from? its from rest of the code that is used to upload the image. its like: $img = $dir . basename($_FILES["img"]["name"]); edit: and the "$dir" depends on the value according to the value of "$m". its also defined above on the rest of the code. Edited January 22, 2017 by funbinod Link to comment Share on other sites More sharing options...
funbinod Posted January 24, 2017 Author Share Posted January 24, 2017 anybody here? i'm still stuck in this problem.. please help! Link to comment Share on other sites More sharing options...
Ingolme Posted January 24, 2017 Share Posted January 24, 2017 Have you checked the network tab of your browser's develper tools to see what's in the response? If you can see what the response is, try printing out the value of some of the variables to see what you're getting. Link to comment Share on other sites More sharing options...
funbinod Posted January 25, 2017 Author Share Posted January 25, 2017 in the network tab of developer tool, it says the status is 200 (i.e. ok) but i found that the ajax is not sending any data to the php (or php is not receiving the data from ajax). Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2017 Share Posted January 25, 2017 Forget the status, what's the actual response? You can see what was sent and what was received in the network tab. Look at the request headers and look at the response body. Link to comment Share on other sites More sharing options...
funbinod Posted January 25, 2017 Author Share Posted January 25, 2017 there is nothing in the response. what it displays is the only message from the php when it is not called from proper $_POST['m']. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2017 Share Posted January 25, 2017 If you are using jquery 1.8.2 mention in post#1, then why is it showing referring to 2.1.0 1 Link to comment Share on other sites More sharing options...
funbinod Posted January 25, 2017 Author Share Posted January 25, 2017 If you are using jquery 1.8.2 mention in post#1, then why is it showing referring to 2.1.0 i thought if it would work if i use newer version. it was (and still is) the same while using 1.8.2 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2017 Share Posted January 25, 2017 OK! but did you change 'type' to 'method' as pointed out here type (default: 'GET') Type: String An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2017 Share Posted January 25, 2017 Can you show html form and how the ajax is triggered. Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2017 Share Posted January 25, 2017 My guess is that the request is actually being sent as GET, the network tab should have shown that, but I can't tell because the request information isn't visible in the screenshot. Link to comment Share on other sites More sharing options...
funbinod Posted January 25, 2017 Author Share Posted January 25, 2017 Can you show html form and how the ajax is triggered. here is the html form <form id="pgm" name="pgm" method="post"> <input type="file" id="m" name="m" value="pgmadd" hidden="hidden" /> <span>Program:</span> <span><input type="text" id="head" name="head" placeholder="Name of Program" /></span><br /><br /> <span>Image:</span> <span><input type="file" id="img" name="img" /></span><br /><hr /> <span>Description:</span> <span><textarea rows="10" id="description" name="description" placeholder="Description of Program"></textarea></span><br /><br /> <input id="submit" name="submit" value="Submit" type="submit" /> </form> and here is the ajax request <script> $(document).ready(function(e) { function submIt() { $('input').attr('disabled', 'disabled'); $.ajax({ url:"process.php", dataType:"text", processData:false, contentType:false, enctype:"multipart/form-data", type:'POST', data: { m: 'pgmadd', hdng: $('#head').val(), img: $('#img').val(), description: $('#description').val() }, success: function(result) { $('input').removeAttr('disabled'); if ($(result).filter('#success').text() == '' || $(result).filter('#success').text() == 'NO'){ $('input, textarea').css('border', '2px solid red'); alert('return but error!'); alert($(result).filter('#msg').text()); } else { $('input').removeAttr('disabled'); $('input, textarea').css('border', '1px solid green'); alert('return success'); alert($(result).filter('#msg').text()); $('#adit').empty(); $('#adit').load('pgmadd.php'); } }, error: function() { $('input').removeAttr('disabled'); $('input, textarea').css('border', '2px solid red'); alert('error with error'); alert($(result).filter('#msg').text()); } }); } $('#submit').on('click', function(e) { submIt(); }); }) </script> i again remind. this is working properly when i use "type: GET". Link to comment Share on other sites More sharing options...
justsomeguy Posted January 25, 2017 Share Posted January 25, 2017 Why do you specify the enctype, is that necessary with jQuery? What about the other properties you're sending to the ajax method, do you know what all of those do and that you have them set correctly? Link to comment Share on other sites More sharing options...
funbinod Posted January 26, 2017 Author Share Posted January 26, 2017 Why do you specify the enctype, is that necessary with jQuery? What about the other properties you're sending to the ajax method, do you know what all of those do and that you have them set correctly? because i'm uploading image also. so i thought i need to specify this, as i need this as i need in html form. and i read the same on some tutorials about sending image using ajax Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2017 Share Posted January 26, 2017 The problem with 'this works with 'get', is that when you submit, there is nothing to stop the whole form being submitted as well as the ajax code, meaning it will submit to itself, clear whatever is input is filled in, and prevent ajax proceeding. 'm', 'pmgadd' are not $_GET or $_POST, but $_FILE, so using either of these won't work either? Link to comment Share on other sites More sharing options...
funbinod Posted January 27, 2017 Author Share Posted January 27, 2017 i tried "$.post" in stead of "$.ajax" and the form is sent to target properly. but i faced another problem with file upload. the response from php says "$_FILES['img']" to be undefined index. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 27, 2017 Share Posted January 27, 2017 All you are doing is swapping one ajax option to another ajax alternative which unless you have set it up correctly, will give you the same outcome. Fixes required: 1) prevent submission of form itself .preventDefault() function submIt(e) { e.preventDefault(); .... rest of code } 2) you need the form to capture submission not submit button click, because submission can be triggered by pressing enter in a input element $('#pgm').on('submit', function(e) { submIt(e); }); 3) The file type inputs values are retrieved and sent as post or get, so $_FILE is not required in process.php, just $_GET or $_POST depending which method is used. 4) Talking of 'method' you ARE STILL using 'type', when because you using version of jQuery greater than 1.9.0 now, it should be 'method' 5) enctype: "multipart/form-data" is not required, as you are sending file name as 'post' or 'get' not a actual file. $(document).ready(function() { function submIt(e) { e.preventDefault(); $('input').attr('disabled', 'disabled'); $.ajax({ url: "process.php", dataType: "text", //processData: false, // contentType: false, //enctype: "multipart/form-data", type: 'POST', data: { m: 'pgmadd', hdng: $('#head').val(), img: $('#img').val(), description: $('#description').val() }, 6) you don't require 'processData: false or contentType: false' either so remove. This should work! 1 Link to comment Share on other sites More sharing options...
funbinod Posted January 27, 2017 Author Share Posted January 27, 2017 thank u. last one: does this upload file?? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 28, 2017 Share Posted January 28, 2017 (edited) This uploads 'img' named type file, I have done it to original, which has weird renaming key names, and altering of file input values. IT also look it may have compatibility issue with IE 10 and even Edge. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> </style> </head> <body> <form id="pgm" name="pgm" method="GET"> <input type="file" id="m" name="m"> <span>Program:</span> <span><input type="text" id="head" name="head" placeholder="Name of Program" /></span><br /><br /> <span>Image:</span> <span><input type="file" id="img" name="img" /></span><br /><hr /> <span>Description:</span> <span><textarea rows="10" id="description" name="description" placeholder="Description of Program"></textarea></span><br /><br /> <input id="submit" name="submit" value="Submit" type="submit" > </form> <div id="adit"></div> <script> $(document).ready(function() { function submIt(e) { e.preventDefault(); var formdata = new FormData($('#pgm').get(0)); formdata.set('hdng', formdata.get('head'));// copy form input named 'head' to newly created 'hdng' formdata.delete('head'); // delete input named 'head' WHY?????? $('#pgm input[type=file]').each(function(index) { if ($(this).attr('name') !== "m") { formdata.set($(this).attr('name'), $('input[type=file]')[index].files[0]);// set file input within formdata } else { formdata.set($(this).attr('name'), $('input[type=file]')[index].files[0], 'pgmadd') // set name value of input file to 'pgmadd WHY???? } }); $.ajax({ url: "process.php", type: 'POST', data: formdata, contentType: false, cache: false, processData: false, success: function(result) { $('input').removeAttr('disabled'); if ($(result).filter('#success').text() == '' || $(result).filter('#success').text() == 'NO') { $('input, textarea').css('border', '2px solid red'); alert('return but error!'); alert($(result).filter('#msg').text());/**/ } else { $('input').removeAttr('disabled'); $('input, textarea').css('border', '1px solid green'); alert('return success'); alert($(result).filter('#msg').text()); $('#adit').empty(); $('#adit').load('pgmadd.php'); } $('#pgm :input').attr('disabled', true);// moved here by dsonesuk }, error: function() { $('input').removeAttr('disabled'); $('input, textarea').css('border', '2px solid red'); alert($(result).filter('#msg').text());/* */ } }); } $('#pgm').on('submit', function(e) { submIt(e); }); }); </script> </body> </html> with <?php $dir = "images/"; // Check connection if ($mysqli->connect_error) { die("Connection failed: " . $conn->connect_error); } $m = $_FILES['m']['name']; if ($m == 'pgmadd') { $sourcePath = $_FILES['img']['tmp_name']; // Storing source path of the file in a variable $targetPath = $dir . $_FILES['img']['name']; // Target path where file is to be stored move_uploaded_file($sourcePath, $targetPath); // Moving Uploaded file $img = $targetPath; $head = ($_POST['hdng']); $descr = ($_POST['description']); $usenow = 'Y'; $sql = $mysqli->prepare("INSERT INTO programs (head, description, status, filepath) VALUES(?,?,?,?)"); if (!$sql) { echo '<div id="success">NO</div>'; echo '<div id="msg">Error: ' . $mysqli->error . '</div>'; } else { $sql->bind_param('ssss', $head, $descr, $usenow, $img); $msg = "Added Successfully!"; } if ($sql->execute()) { echo '<div id="success">YES</div>'; echo '<div id="msg">' . $msg . '</div>'; } else { echo '<div id="success">NO</div>'; echo '<div id="msg">Error: ' . $mysqli->error . '</div>'; } } Edited January 28, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
funbinod Posted January 28, 2017 Author Share Posted January 28, 2017 thank u for this @dsonesuk.. but sorry! there was a mistake in my html form. the input name="m" is "text" type not "file" type. so, i think, u've to write some extra line on setting formdata. i tried to revise the code accordingly. please tell me if it is correct or not-- $(document).ready(function(e) { function submIt(e) { e.preventDefault(); var formdata = new FormData($('#pgm').get(0)); formdata.set($(this).attr('name'), $('input[type=file]')[index].files[0]); $('input').attr('disabled', 'disabled'); $.ajax({ url: "process.php", type: 'POST', data: formdata, contentType: false, cache: false, processData: false, success: function(result) { $('input').removeAttr('disabled'); if ($(result).filter('#success').text() == '' || $(result).filter('#success').text() == 'NO') { $('input, textarea').css('border', '2px solid red'); alert('return but error!'); alert($(result).filter('#msg').text());/**/ } else { $('input').removeAttr('disabled'); $('input, textarea').css('border', '1px solid green'); alert('return success'); alert($(result).filter('#msg').text()); $('#adit').empty(); $('#adit').load('pgmadd.php'); } $('#pgm :input').attr('disabled', true);// moved here by dsonesuk }, error: function() { $('input').removeAttr('disabled'); $('input, textarea').css('border', '2px solid red'); alert($(result).filter('#msg').text());/* */ } }); } $('#pgm').on('submit', function(e) { if ($('#hdng').val() == '' || $('#desc').val() == '') { if ($('#hdng').val() == '') { alert('Program name is blank!'); $('#hdng').select(); $('#hdng').css('border', '2px solid red'); } if ($('#desc').val() == '') { alert('Description is empty!'); $('#desc').css('border', '2px solid red'); $('#hdng').select(); } } else { submIt(); } }); }) Link to comment Share on other sites More sharing options...
dsonesuk Posted January 28, 2017 Share Posted January 28, 2017 NOT! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now