Unable to call ajax function

Question

i had some difficulty on calling my ajax function when i clicked the submit button. When i'm trying to troubleshoot the ajax function with other form it work well, but when i'm trying on the actual code that i wanted to insert the data into database, the ajax function just can't be called. Anything that i need to change in order to make it work? Please guide me thanks.

Here is my example of sponsor.php:

//File and text upload with formDATA function
                $("form#form").submit(function(){
                var formData = new FormData($(this)[0]);    
                    $.ajax({
                        url:'sponsorItem.php',
                        type: 'POST',
                        data: formData,
                        async: false,
                        beforeSend: function(){
                         if(confirm('Are you sure?'))
                              return true;
                          else
                              return false;
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    }).done(function () {
                            //do something if you want when the post is successfully
                            if(!alert('Banner Had Successfully Updated.')){document.getelementbyclassname('form').reset()}
                        });
                    return false;

            });

Where else this is the getSponsorForm.php where it get the item id from the ajax which pass the value into it to call the form.

Here is the function to pass variable to the getSponsorForm.php:

<!-- Ajax show form function-->
<script>
function showSponsor(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getSponsorForm.php?sponsor="+str,true);
        xmlhttp.send();
    }
}
</script>

Here is the getSponsorForm.php :

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<?php
$q = intval($_GET['sponsor']);

include 'dbConnection.php';

global $dbLink;


$query="SELECT * FROM sponsor_item WHERE sponsor_item_id = '".$q."'";
$result = $dbLink->query($query);



// Numeric array
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){

echo '<!--Banner Item No 1 Start-->
                            <div class="box box-primary1">
                                <div class="box-header">
                                    <h3 class="box-title">Edit Sponsor No.'.$row["sponsor_item_id"].' <small>编辑器</small></h3>
                                </div>
                                <div class="box-body">
                                <form class="form" id="form" action="" method="POST" enctype="multipart/form-data">
                                    <div class="box-body">
                                        <input type="hidden" name="sponsor_id" value="'.$row["sponsor_item_id"].'"></input>
                                        <div class="form-group" >
                                            <label for="sponsorTitle">Sponsor Title 赞助称号</label>
                                            <input type="text" class="form-control" name="sponsorTitle" id="sponsorTitle" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                        <div class="form-group" >
                                            <label for="sponsorDescription">Sponsor Description 赞助描述</label>
                                            <input type="text" class="form-control" name="sponsorDescription" id="sponsorDescription" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                         <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);"><br>
                                            <p class="help-block">Your picture size not more than 2MB.  (Only JPEG or JPG is allowed)</p>
                                        </div>  

                                        <div class="checkbox">

                                            <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>      
                                        </div>
                                    </div><!-- /.box-body -->


                                </form>                  <!-- Date range -->
                                    <!-- /.form group -->

                                    <!-- Date and time range -->




                                    <!-- /.form group -->

                                    <!-- Date and time range -->
                                    <!-- /.form group -->

                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
                            <!--Banner Item No 1 End-->';

}       
mysqli_free_result($result);                            
// Close the mysql connection
$dbLink->close();
?>
</body>
</html>

I'm not sure why i click the submit button, it just won't call the function in sponsorItem.php and insert data into database.

FYI: I had try to put the getSponsorForm.php code for the form into the sponsor.php, then when i click submit button it work. But i separate out the form function in getSponsorForm.php then it won't work. Any clue?

Just `$("#form")` would suffice too...any reasons you are doing it `$("form#form")`? — Sandeep Nayak, Mar 03 '15 at 04:41

score 0 · Answer 1 · edited May 23 '17 at 11:56

You may have better success if you manually get the values from the form fields and then construct a data string to send to the PHP processor file sponsorItem.php

Note that, according to your code, it is sponsorItem.php that will receive the form data and insert it into the database. Since that is the part that is not working, you should show that code in your question.

Usually, the data is sent to the PHP processor file in text/html format, not as an object of any kind. Therefore, it should be possible to alert(FormData) and see the string you are sending to sponsorItem.php. I don't think you can do that.

It might be very helpful for you to look at these three simple AJAX examples and see how you can change your code.

get contents with ajax and display them directly without refreshing the page

For one thing, get the form data values manually (e.g. var userName = $('#username').val(); instead of trying to glob everything all at once, automatically. Since you are learning, go for control, not automation.

Since sponsorItem.php is working, then you want to see if your AJAX code block is working.

Temporarily replace the contents of sponsorItem.php with only these two lines:

<?php
echo 'Got to sponsorItem page';

Now, change your AJAX code block like this:

}).done(function (data) {
    alert( data );
});

data represents any data echoed back from sponsorItem.php -- so it should alert Got to sponsorItem page.

When that works, you will know your AJAX is working.

Hi there, my sponsorItem.php is working, just that the ajax function that use to call to sponsorItem.php is not working which is weird. I had try to troubleshoot one by one but it all seem fine, but when i put together then they can't work. Any clue? — Marcus Tan, Mar 03 '15 at 05:51

Unable to call ajax function

1 Answers1