表单不会通过Ajax提交

Question

I have a form within a div that I want to submit via another page which will run the query and then return to the first page again all within the div which is in a larger page.

I have put the following javascript at the top of the page:

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

and have placed the form in the div as follows:

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

The submit button does not appear to do anything. It should post the values to activity_new.php which looks like:

<?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");

?>

I currently have the javascript on the main page that contains the divs but have also tried it at the top of the page with the form in. I've also tried these two combinations with the onsubmit = "return submitForm();" as onclick = "return submitForm();" on the button itself.

Answer 1

as per your code when you click on button it will not fire onsubmit() event .

if you change button type to submit it will work as you have added return false to your function

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

Or use below code .you can use button click event to submit form via ajax using jquery

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);
    }}); 

  });
  }); 

NOTE : from below code in success function . there is no element named '.activities' in your form. make sure to use correct selector attribute.

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