Кнопка отправки не запускает функцию ajax

У меня была проблема с моим кодом, где я пытаюсь отделить мою функцию формы от других php-файлов и использовать функцию ajax для вызова формы в зависимости от идентификаторов. Но, однако, после того, как я отделяю функцию формы, кнопка submit не может вызывать функцию ajax.Кнопка отправки не запускает функцию ajax

Вот код sponsor.php примера, где я использую, чтобы вызвать функцию AJAX и показать форму из другого 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>

Когда я это делаю, все работает, если только форма не появляется, и я заполнил поле ввода и хочу нажать кнопку отправки, она просто не вызовет функцию ajax на сайте 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; 

      });

Все, что я сделал не так? Пожалуйста, наставит меня through.Thanks :)

источник

2015-03-03 Marcus Tan

Сценарий не должен возвращать документ с '' и '', так как вы помещаете его в 'innerHTML' элемента, который уже находится внутри' '. – Barmar

Вы имели в виду, что я должен удалить тело и головную метку из getSponsorForm.php? –

Попробуйте сериализовать данные формы 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

, какую строку кода я должен заменить? благодаря –

Кнопка отправки не запускает функцию ajax

ответ

Смежные вопросы