表单不会通过ajax提交

Form wont submit via ajax

本文关键字：ajax 提交 表单      更新时间：2023-09-26

我在一个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();"。

根据您的代码，当您单击按钮时，它不会触发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);

只需更改输入类型：

<input type='submit' value='Submit'>
             ^^^^^
相关文章：