提交按鈕將不會觸發ajax功能

我有我的代碼的一些問題，我試圖分開我的表單功能到另一個php文件，並使用ajax函數調用窗體取決於ID。但是，當我分開窗體函數後，提交按鈕不能調用ajax函數。提交按鈕將不會觸發ajax功能

這裏是我用來觸發Ajax功能，從另一個PHP顯示形式進入sponsor.php的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>

的結果恢復成功後它就會出現在形成在這裏：

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

。由此這裏是從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">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>

當我這樣做，一切都工作，除非一旦表單顯示出來，我填寫輸入字段，並希望按下提交按鈕，它只是不會觸發sponsor.php上的ajax函數，這是在這裏：

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

      });

我做錯了什麼？請指引我through.Thanks :)

來源

2015-03-03 Marcus Tan

腳本不應該用'返回一個文件和' ''，因爲你將它放到''內的元素的'innerHTML'中。 – Barmar 2015-03-03 07:16:28

你的意思是我應該從getSponsorForm.php中刪除body和head標籤嗎？ – 2015-03-03 07:18:26

試試這個序列化表單數據http://api.jquery.com/serialize/ 然後

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

即：

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

來源

2015-03-03 07:19:22

哪行代碼應該替換？謝謝 – 2015-03-03 07:22:22

提交按鈕將不會觸發ajax功能

回答

相關問題