Form submits, inserts data to database but does not then display contents in div

Question

I have a div with a form in it. When the form is submitted I want the data to be inserted into the database and the results from the database displayed with the form underneath so it can be submitted again an another record added. The form us submitting and the database is being populated but the results do not display in the div.

The div that contains the inital form (and which will contain the refreshed results list and new form is as follows:

<div id=activitylist>
    <?
    $q2a="SELECT activitynumber, title, description, leaders, time FROM activities where activities.meetingid='$id' AND activities.unitid='$input2'";
    $r2a=mysqli_query($dbc,$q2a) or die(mysqli_error($dbc));
    echo "<table class='layouttable'><tr><td>ActivityNumber</td><td>Title</td><td>Description</td><td>Leaders</td><td>Time</td><td>Edit</td>";
    while($row2a   =mysqli_fetch_assoc($r2a))   
    {
        echo "
        <tr><td>"  . $row2a['activitynumber'] .  "</td>
        <td>" . $row2a['title'] . " </td>
        <td>" . $row2a['description'] . " </td>
        <td>" . $row2a['leaders'] . " </td>
        <td>" . $row2a['time'] . " </td>
        <td><input type='button' value='editactivity' onclick='editactivity(" . $row2a['activityid'] . ")'></td></tr>.
        ";
    }
    echo"</table>"; ?><br><Br>

    <form id='newactivity' method="post" onSubmit="return submitForm();">
        <input type =hidden name='meetingid' value=<?echo$id?>>
        <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'></form></div>

The form is submitted using:

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

    return false;
}
</script>

and activity_new.php which is what is inserting to the database and that I want to display in the div when it has done the insert is:

<?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', '$activitynumber','$activitytitle', '$activitydescription', '$activitytime', '$leaders')";
$r1c = mysqli_query($dbc,$q1c)or die(mysqli_error($dbc)); 


        $q2a="SELECT activitynumber, title, description, leaders, time FROM activities where activities.meetingid='$meetingid' AND activities.unitid='$input2'";
        $r2a=mysqli_query($dbc,$q2a) or die(mysqli_error($dbc));
        echo "<table class='layouttable'><tr><td>ActivityNumber</td><td>Title</td><td>Description</td><td>Leaders</td><td>Time</td><td>Edit</td>";
        while($row2a   =mysqli_fetch_assoc($r2a))   
        {
            echo "
            <tr><td>"  . $row2a['activitynumber'] .  "</td>
            <td>" . $row2a['title'] . " </td>
            <td>" . $row2a['description'] . " </td>
            <td>" . $row2a['leaders'] . " </td>
            <td>" . $row2a['time'] . " </td>
            <td><input type='button' value='editactivity' onclick='editactivity(" . $row2a['activityid'] . ")'></td></tr>.
            ";
        };
    echo"</table>"; ?><br><Br>
    <form id='newactivity' method="post" onSubmit="return submitForm();">
    <input type =hidden name='meetingid' value=<?echo$id?>>
    <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'>

`$('#newactivity').find(".activitylist")` searches for an element with `class="activitylist"` inside the form. You don't have a class like that anywhere. — Barmar, Apr 09 '15 at 21:58
Is there a way I can make it go to a div that's not in the form but is in the page the form is in? — Laura Morris, Apr 09 '15 at 22:01
You can put it anywhere you want. Just write a selector that matches where you want it. — Barmar, Apr 09 '15 at 22:01
I've changed my div to '
' and it still doesn't go into it. Does it matter that the form is inside of the div I'm trying to send to? — Laura Morris, Apr 09 '15 at 22:12
Only if you use selectors to bind event handlers to the elements you're replacing. Then see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Apr 09 '15 at 22:17

score 0 · Accepted Answer · answered Apr 09 '15 at 22:36

0

Edit Jquery selector to ID selector as your div has ID not Class. also omit #newactivity ! it is not parent of activitylist but its child. So this is enough:

$("#activitylist").html(response);

answered Apr 09 '15 at 22:36

Ali Sheikhpour

10,475
5
41
82

Form submits, inserts data to database but does not then display contents in div

1 Answers1