Post multipart/ form data (both image and text ) html - Php - SQl - AJAX

Question

I made changes to my code

<html>
<body>
<form action="test.php" id="subscriber_form" method="post" enctype="multipart/form-data">
    <input type="text" id="title" name="title" ><br>
    <input type="file" id="file" name="file" ><br>
    <input type="submit" id="submit" value="submit">
    </form>
    <div id="show_subscriber_msg"></div>
<script src="js/jquery-1.7.1.min.js"></script>               

<script>  
$("form#subscriber_form").submit(function(){
$('#show_subscriber_msg').html('<div class=gen>Submiting..</div>');
e.preventDefault();
var formURL = $(this).attr("action");
var formData = new FormData($(this)[0]);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
async: false,
success: function (res) {
                             if(res=='1'){
                                $('#show_subscriber_msg').html('<div class=gen>Thank you</div>');
                             }

                             if(res=='5'){
                             $('#show_subscriber_msg').html('<div class=err>Please enter a valid email address</div>');
                             }
                        }
});

});

 </script>

</body>
</html>

My sql table is getting updated and file is uploaded to the directory correctly But it's still redirecting me to test.php. I just want to run my php script i.e test.php in background.

Also, this answer will probably help you in finding a solution, [http://stackoverflow.com/a/38112505/5517143](http://stackoverflow.com/a/38112505/5517143) — Rajdeep Paul, Jul 02 '16 at 09:59

Govinda Sakhare · Accepted Answer · 2016-07-02T10:23:46.247

2

You have to make changes in your form element change the encoding type to multipart/form-data

<form id="subscriber_form" method="post" enctype="multipart/form-data">

Your ajax call will be like this.

$("form#subscriber_form").submit(function(e){ 
  e.preventDefault();
  var formURL = $(this).attr("action");
  var formData = new FormData($(this)[0]);
  $.ajax({
    url: formURL,
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false
    async: false,
    success: function (data) {
        console.log(data);
    }
});

As far as backend part is concerned, I am not much into PHP. If you want Java code I can help you with that.

edited Jul 02 '16 at 10:23

answered Jul 02 '16 at 10:02

Govinda Sakhare

5,009
6
33
74

So data: formData will automatically fetch post data from my form, including file ... am i right ? – Akshay N Shaju Jul 02 '16 at 10:06
Yes. select it as answer if you found it useful. – Govinda Sakhare Jul 02 '16 at 10:13
My page is getting refreshed when i click on submit.... i wanna post data in the background .. i mean without refreshing my page . – Akshay N Shaju Jul 02 '16 at 10:21
add e.preventDefault(); – Govinda Sakhare Jul 02 '16 at 10:22
made changes in a answer, do check. – Govinda Sakhare Jul 02 '16 at 10:24
@AkshayNShaju is it working? – Govinda Sakhare Jul 02 '16 at 10:31
This is not the way of solving the problem, you'll have to solve it yourself, debug the code, check how to debug. We're here to provide help, not to provide you working code which you can copy and paste. – Govinda Sakhare Jul 02 '16 at 10:50
can u just upvote my question , coz i got blocked from asking questions, so if u do, my ban will be removed – Akshay N Shaju Sep 11 '17 at 12:20

Post multipart/ form data (both image and text ) html - Php - SQl - AJAX

1 Answers1