Submit button won't trigger ajax function

Question

i had some problem with my code where i'm trying to separate my form function to another php files and use ajax function to call the form depend on the ids. But however after i separate the form function, the submit button can't call the ajax function.

Here is the sponsor.php sample code where i use to trigger the ajax function and show up the form from another php into sponsor.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>

After the result return success then it will show the form in the here:

<div id="txtHint"><b>Please Select Sponsor Edit Button To Start.</b></div>

Whereby here is the form that retrieve from getSponsorForm.php in order to show in the :

<!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">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>

When i do so, everything is working except once the form is showing up and i filled up the input field and want to press the submit button, it just won't trigger the ajax function on sponsor.php which is here:

//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;

            });

Anything i did wrong? Please guide me through.Thanks :)

The script shouldn't return a document with `` and ``, since you're putting it into the `innerHTML` of an element that's already inside the ``. — Barmar, Mar 03 '15 at 07:16
did you mean i should remove the body and head tag from getSponsorForm.php? — Marcus Tan, Mar 03 '15 at 07:18

Максим Владимирович · Answer 1 · 2015-03-03T07:43:42.653

0

Try this to serialize form data http://api.jquery.com/serialize/ and then

$.get('/url', serializedData, callback);

That:

$( "form#form" ).on( "submit", function( event ) {
  event.preventDefault();
  var data = $(this).serialize();
  $.post('sponsorItem.php', data, function(response){
     $('#txtHint').text(response);
  });
});

edited Mar 03 '15 at 07:43

answered Mar 03 '15 at 07:19

Максим Владимирович

373
3
13

which line of code should i replace with? thanks – Marcus Tan Mar 03 '15 at 07:22

Submit button won't trigger ajax function

1 Answers1