表單不會通過Ajax提交

Question

我有一個div內的表單，我想通過另一個頁面提交該表單，該表單將運行查詢，然后再次返回到第一頁面，而所有div都位於較大頁面內。

我將以下javascript放在頁面頂部：

<script name='addactivity'>
    function submitForm() {
        $.ajax({type:'POST', url: 'activity_new.php', data:$('#newactivity').serialize(), success: function(response) {
            $('#newactivity').find('.activities').html(response);
        }});

        return false;
    }
    </script>

並將表單放在div中，如下所示：

<form id='newactivity' method="post">
        <b>Activity Number:</b><input type=text name='activitynumber' class='textborder'>   
        <b>Title:</b><input type=text name='activitytitle' class='textborder'>
        <b>Time (mins):</b> <input type=text name='activitytime' class='textborder'>
        <b>Leaders:</b> <input type=text name='leaders' class='textborder'><br>
        <b>Description:</b><textarea name='activitydescription' class='textareaborder'></textarea>
        <input type='submit' value='Submit' id='submit'></form>
<div id="activities"></div>

提交按鈕似乎沒有任何作用。 它應該將值發布到activity_new.php，如下所示：

<?php
session_start();
$input2=$_SESSION[ 'unitid' ];

        $meetingid=$_POST['meetingid'];
        $activitynumber=$_POST['activitynumber'];
        $activitytitle=$_POST['activitytitle'];
        $activitytime=$_POST['activitytime'];
        $leaders=$_POST['leaders'];
        $activitydescription=$_POST['activitydescription'];

include 'connect_db.php'; 

$q1c="INSERT into activities (meetingid, unitid, activitynumber, title, description, time, leaders) VALUES ('$meetingid', '$input2', '$activitytitle', '$activitydescription', '$activitytime', '$leaders')";
$r1c = mysqli_query($dbc,$q1c); 

echo $meetingid;
echo $activitynumber;
echo $activitytitle;

//header("location:editmeeting.php?id=$input2");

?>

目前，我在包含div的主頁上使用了javascript，但還在包含表單的頁面頂部對其進行了嘗試。我還使用onsubmit = "return submitForm();"嘗試了這兩種組合 如onclick = "return submitForm();" 在按鈕本身上。

Answer 1

根據您的代碼，當您單擊按鈕時，它不會觸發onsubmit（）事件。

如果您更改按鈕類型以提交，它將在您添加功能時return false

<input type='submit' value='Submit'>

或使用下面的代碼。您可以使用按鈕單擊事件使用jquery通過ajax提交表單

HTML

<input type='button' value='Submit' id="submit">

jQuery的

    $(document).ready(function(){
   $(document).on('click','#submit',function(){

     $.ajax({type:'POST', url: 'activity_new.php', data:$('#newactivity').serialize(), success: function(response) {
        $('#newactivity').find('.activities').html(response);
    }}); 

  });
  }); 

注意：從下面的代碼可以成功運行。 您的表單中沒有名為'.activities'元素。 確保使用正確的選擇器屬性。

 $('#newactivity').find('.activities').html(response);

Answer 2

只需更改輸入類型：

<input type='submit' value='Submit'>
             ^^^^^