ajax调用php循环,表单不在第一个循环上工作

时间:2017-03-29 18:19:11

标签: javascript php ajax forms

我有一个名为events.php的页面,它列出了过去和即将发生的事件,使用ajax调用pastevents.php和upcomingevents.php,它们都有收集用户的表单'对过去事件的看法以及他们是否会参加未来的活动;然后一个句柄将它发送到psql db。

除了循环表单的第一次迭代无法正确提交外,一切正常。它没有继续发送到pastevents-handle.php,也没有发布并返回一个get on events.php;所以我在网址栏中看到了用户的响应,但它从未进入数据库。我制作了一个测试页面,没有使用ajax通过复制粘贴所有代码而且有效,所以它肯定与ajax有关,但是我或我的教授都不知道是什么。

我还不知道如何使用jquery,所以请用简单的javascript回答。

这里的events.php:

   <script>
    //show past events
    function showPastEvents(str) {
        document.getElementById('pastevents').style.display = "block";
        document.getElementById('hideoldbutton').style.display = "block";
        var xhttp;    
        if (str == "") {
            document.getElementById("pastevents").innerHTML = "";
            return;
        }
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("pastevents").innerHTML = this.responseText;
            }
        };
        xhttp.open("POST", "pastevents.php?q="+str, true);
        xhttp.send();
    }

    function hidePastEvents() {
        document.getElementById('pastevents').style.display = "none";
        document.getElementById('hideoldbutton').style.display = "none";
    }


    //show upcoming events
    function showUpcomingEvents(str) {
        document.getElementById('upcomingevents').style.display = "block";
        document.getElementById('hidenewbutton').style.display = "block";
        var xhttp;    
        if (str == "") {
            document.getElementById("upcomingevents").innerHTML = "";
            return;
        }
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("upcomingevents").innerHTML = this.responseText;
            }
        };
        xhttp.open("POST", "upcomingevents.php?q="+str, true);
        xhttp.send();
    }

    function hideUpcomingEvents() {
        document.getElementById('upcomingevents').style.display = "none";
        document.getElementById('hidenewbutton').style.display = "none";
    }
</script>

        <!-- page content -->
        <div class="content"> 


            <h6>Past events</h6>

            <form name="postpastevents" action=""/>
                <div id="pastevents"></div>
                <input type="button" onClick="hidePastEvents()" id="hideoldbutton" value="Hide" style="display:none;"/>

            </form>

            <input type="button" onClick="showPastEvents()" id="showoldbutton" value="Show past"/>

            <br>
            <br>


            <!-- ####### -->
            <h6>Upcoming events</h6>

            <form name="postupcomingevents" action=""/>
                <div id="upcomingevents"></div>
                <input type="button" onClick="hideUpcomingEvents()" id="hidenewbutton" value="Hide" style="display:none;"/>

            </form>

            <input type="button" onClick="showUpcomingEvents()" id="shownewbutton" value="Show upcoming"/>

这是pastevents.php(它与upcomingevents.php的代码相同):

    <?php
        $conn = pg_connect ('dbname=xxxx') or die ('Connect failed ');

        $query = "SELECT eventname, eventdate, location, eventdesc FROM events WHERE eventdate < current_date ORDER BY eventdate;";
        $result = pg_query($query);


        while ( $row = pg_fetch_assoc($result) ) {  
            $i = 0;
            echo "<tr>"; //table row
            foreach ($row as $key => $value) {  
                if ($i == 0) {
                    $eventname = $value;
                } 
                if ($i == 1) {
                    $eventdate = $value;
                }
                $eventinfo = $value;
                echo "<td>"; //1 column each loop
                    echo "$eventinfo";
                    if ($i == 1) {
                        echo date(" (l, F jS)", strtotime($eventdate));
                    }
                    echo "<br><br>";
                echo "</td>";
                $i++;
            }
            echo "<td>";//1 column while same event 
                ?>
                <div>
                    <form name="pasteventsurvey" action="pastevent-handle.php" method="post">
                        What did you think of the event?
                        <select name="pasteventopinion">
                                <option value="">(Choose one)</option>
                                <option value="good">Loved it!</option>
                                <option value="okay">Liked it</option>
                                <option value="bad">Needs improvement</option>
                                <option value="time">Time conflict</option>
                                <option value="NA">NA</option>
                        </select> 
                        <input type="hidden" name="eventname" value="<?php echo $eventname; ?>">
                        <input type="submit" name="enter" value="Submit"><input type="reset" name="erase" value="Clear">
                    </form>
                </div>
            <?php
            echo "</td>";

            echo "</tr>"; //-table row
        }

        pg_close($conn);
    ?>

这里有pastevents-handle.php:

    <?php
    $conn = pg_connect ('dbname=xxxx') or die ('Connect failed ');

    pg_query_params("INSERT INTO eventsurveypast(eventname, opinion) VALUES ($1, $2)", array($name, $opinion));

    echo "email is $idkey, eventname is $name, pastopinion is $opinion"; 


    pg_close($conn);
?>

(我为空间编辑了一点,忽略了任何不重要的事情)

1 个答案:

答案 0 :(得分:0)

在另一个表单中包含表单是违法的。

删除外部表单,一切都应该正常工作,除了代码有另一个问题。