Question

我有一个从数据库中回显的表单，但问题是当我尝试提交时，只有第一个回显表单提交而其余部分没有提交。以下是我的代码。

editquestion.phh

<thead>
          <tr>
            <th style="width: 5%;">S/N</th>
            <th style="width: 20%;">QUESTION</th>
            <th style="width: 40%;">ANSWER</th>
            <th style="width: 30%;">KEYWORDS</th>
            <th style="width: 5%;">SAVE/UPDATE</th>
            </tr>
      </thead>
      <tbody>
        <?php
        $sql = $db->prepare("SELECT * FROM questions");
        $result = $sql->execute();

        while ($row = $result->fetchArray(SQLITE3_ASSOC))
        {
            $quiz_id = $row['quiz_id'];
            $question = $row['question'];
            $answer = $row['answer'];
            $keywords = $row['keywords'];

            echo '<form action="updatequestion.php" method="post" enctype="multipart/form-data">
            <tr>
            <td><input style="width: 50%" type="text" name="cid" id="cid" value="'.$quiz_id.'"></td>
            <td><input type="text" name="question" id="question" value="'.$question.'"></td>
            <td><input type="text" name="answer" id="answer" value="'.$answer.'"></td>
            <td><input type="text" name="keywords" id="keywords" value="'.$keywords.'"></td>
            <td><input type="submit" name="qupdate" class="qupdate" value="Update"></td>
            </tr>
            </form>';

        }
        ?>
        </tbody>
  </table>

qupdate.js

$(document).ready(function() {
$('.qupdate').click(function() {
    question = $('#question').val();
    answer = $('#answer').val();
    keywords = $('#keywords').val();
    id = $('#cid').val();

    $.ajax({
        type: "POST",
        url: "updatequestion.php",
        data: "cid="+id+"&question="+question+"&answer="+answer+"&keywords="+keywords,
        success: function(html){
            if(html = "true")
            {
                $('.qupdate').css("opacity", "1");
            }
            else
            {
                alert("not successful");
            }
        },
        beforeSend: function(){
            $('.qupdate').css("opacity", "0.5");
        }
    });
    return false;
});
});

刚刚添加了 updatequestion.php 的代码。

<?php
session_start();
require_once("db.php");
$db = new MyDB();


if (isset($_POST['question']) || isset($_POST['answer']) || isset($_POST['cid']))
{
$id = strip_tags(@$_POST['cid']);
$cname = strip_tags(@$_POST['question']);
$cunit = strip_tags(@$_POST['answer']);
$keywords = strip_tags(@$_POST['keywords']);

if (empty($cname) || empty($cunit))
{
    echo "fill";
}
else
{
    $sql = $db->prepare("UPDATE questions SET question = ?, answer = ?, keywords = ? WHERE quiz_id = ?");
    $sql->bindParam(1, $cname, SQLITE3_TEXT);
    $sql->bindParam(2, $cunit, SQLITE3_TEXT);
    $sql->bindParam(3, $keywords, SQLITE3_TEXT);
    $sql->bindParam(4, $id, SQLITE3_INTEGER);

    $result = $sql->execute();

    if ($result)
    {
        echo "true";
    }
    else
    {
        echo "false";
    }
}
}
?>

但ajax似乎只适用于第一个回显数据，似乎没有提交其余数据。我该如何解决这个问题？

提前致谢。

Answer 1

将类echo '<form class="dynamic-form" action="updatequestion.php" method="post" enctype="multipart/form-data"> <tr> <td><input style="width: 50%" type="text" name="cid" value="'.$quiz_id.'"></td> <td><input type="text" name="question" value="'.$question.'"></td> <td><input type="text" name="answer" value="'.$answer.'"></td> <td><input type="text" name="keywords" value="'.$keywords.'"></td> <td><input type="submit" name="qupdate" class="qupdate" value="Update"></td> </tr> </form>';添加到表单标记并从所有字段中删除ID：

$(document).ready(function () {
    $('.dynamic-form').on('submit', function () {
        var formdata = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "updatequestion.php",
            data: formdata,
            success: function (html) {
                //success
            }
        });
        return false;
    });
});

JS中的更新

Sub CreatePT()

Set wb = Workbooks.Add 'Create new workbook
Set ws = wb.Worksheets(1)
pRange = "[" & ThisWorkbook.Name & "]" & Sheet15.Name & "!" & ThisWorkbook.Sheets(15).Range("A1").CurrentRegion.Address(ReferenceStyle:=xlR1C1)
ActiveWorkbook.PivotCaches.Create(xlDatabase, SourceData:=pRange). _
    CreatePivotTable TableDestination:="[" & wb.Name & "]" & ws.Name & "!R1C1", TableName:="PivotTable4"

End Sub

Answer 2

以下是您的问题的解决方案： -

$('.qupdate').click(function() {   
        var question = $(this).closest("form").find('input[name=question]').val();      
        var answer = $(this).closest("form").find('input[name=answer]').val();
       var keywords = $(this).closest("form").find('input[name=keywords]').val();
       var id = $(this).closest("form").find('input[name=cid]').val();                  
    });

Answer 3

似乎每个人都给了你几乎相同的答案，但它并不能完全满足你的问题。

为您提供最简单的答案：

你所做的是原则上的坏习惯，因为你应该这样做不回声＆＃34;形式＆＃34;
页面上的每个表单都有相同的信息除了输入，这是错误的。

正确的解决方案：

仅为此目的开始使用ajax帖子
不要使用FORM，而只是为每个问题创建一个div并拥有那里的输入带有问题ID
使用模式编辑问题，这样就可以关闭模态你重置模态中的输入，让你有能力 再次修改问题并保存。

您现在想要的解决方案：

<强烈> editquestion.php

        <thead>
              <tr>
                <th style="width: 5%;">S/N</th>
                <th style="width: 20%;">QUESTION</th>
                <th style="width: 40%;">ANSWER</th>
                <th style="width: 30%;">KEYWORDS</th>
                <th style="width: 5%;">SAVE/UPDATE</th>
                </tr>
          </thead>
          <tbody>
            <?php
            $sql = $db->prepare("SELECT * FROM questions");
            $result = $sql->execute();

            while ($row = $result->fetchArray(SQLITE3_ASSOC))
            {
                $quiz_id = $row['quiz_id'];
                $question = $row['question'];
                $answer = $row['answer'];
                $keywords = $row['keywords'];

                echo '<tr>';
                    echo '<td><input style="width: 50%" type="text" name="cid" id="cid" value="'.$quiz_id.'"></td>';
                    echo '<td><input type="text" name="question" id="question" value="'.$question.'"></td>';
                    echo '<td><input type="text" name="answer" id="answer" value="'.$answer.'"></td>';
                    echo '<td><input type="text" name="keywords" id="keywords" value="'.$keywords.'"></td>';
                    echo '<td><input type="button" name="qupdate" class="qupdate" value="Update" onclick="doEdit('.$quiz_id.');"></td>';
                echo '</tr>';
            }
            ?>
        </tbody>
     </table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Edit Question</h4>
      </div>
      <div class="modal-body">
        <p>Edit your question:</p>
        <p><input type="hidden" id="question_id" id="question_id" value=""></p>
        <p><input type="text" id="question_text" value=""></p>
        <p><input type="text" id="question_answer" value=""></p>
        <p><input type="text" id="question_keywords" value=""></p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="doupdate" class="btn btn-default">Update Question</button>
      </div>
    </div>

  </div>
</div>

<强> qupdate.js：

<script>
$(document).ready(function() {

    function doEdit(question_id) {
        /** POPULATE THE MODAL WITH THE QUESTION DATA **/
        $.ajax({
                type: "POST",
                url: "getquestiondata.php", /** create this file, and return the question data from the database based on the "cid" **/
                data: "cid="+question_id+",
                success: function(response){

                        $('#question_id').val(response.cid);
                        $('#question_text').val(response.text);
                        $('#question_answer').val(response.answer);
                        $('#question_keywords').val(response.keywords);
                }
        });
    }

    /** DO THE ACTUAL UPDATE **/
    $('#doupdate').click(function() {

        var question_id = $('#question_id').val();
        var question_text = $('#question_text').val();
        var question_answer = $('#question_answer').val(),
        var question_keywords = $('#question_keywords').val(),

        $.ajax({
            type: "POST",
            url: "updatequestion.php",
            data: "cid="+question_id+"&question="+question_text+"&answer="+question_answer+"&keywords="+question_keywords,
            success: function(html){
                if(html = "true")
                {
                    $('.qupdate').css("opacity", "1");

                    $('#myModal').modal('toggle');

                    // Reset the modal inputs
                    $('#question_id').val("");
                    $('#question_text').val("");
                    $('#question_answer').val("");
                    $('#question_keywords').val("");

                }
                else
                {
                    alert("not successful");
                }
            },
            beforeSend: function(){
                $('.qupdate').css("opacity", "0.5");
            }
        });
        return false;
    });
});
</script>

此代码未经测试，因为我没有您的数据库或有关您存储的问题的任何信息，但我 90％肯定，如果您使用此方法，它将比您更好地工作任何其他答案。

如果我犯了一些小错误或错误，代码很容易编辑和修复。

最终注释：＆＃34; updatequestion.php＆＃34;这不是问题，从来不是问题。

祝你好运！

Answer 4

正如其他人所提到的，ID在页面上应该是唯一的。在您的情况下，您可以获得整个表单并序列化它的数据：

$(document).ready(function() {
    $('.qupdate').click(function() {
        // Clicked $('.qupdate') is now $(this)
        // But we should define $this variable if we want to be able to use it in callbacks.
        // This is more efficient way instead of searching for $('.qupdate') in DOM again and again.
        // Unless you want to set CSS for ALL .qupdate buttons in ALL forms.
        var $this = $(this);

        $.ajax({
            type: "POST",
            url: "updatequestion.php",
            // find closest to .qupdate form and serialize it's data
            data: $this.closest('form').serialize(),
            success: function(html) {
                // use double (or even tripple) equals operator if you want to compare, otherwise you'll just set html as "true"
                // and it'll be always successful
                if(html == "true") {
                    // We use $this variable here which we've defined earlier, and which, as we remember,
                    // stands for clicked $('.qupdate') button
                    $this.css("opacity", "1");
                } else {
                    alert("not successful");
                }
            },
            beforeSend: function() {
                // We use $this variable here which we've defined earlier, and which, as we remember,
                // stands for clicked $('.qupdate') button
                $this.css("opacity", "0.5");
            }
        });
        return false;
    });
});

更新

也许你发送的回复不完全＆＃34; true＆＃34;或＆＃34;假＆＃34;？为了确保您不发回任何额外的字符，您应该在echo之后调用exit：

if ($result)
{
    echo "true";
    exit;
}
else
{
    echo "false";
    exit;
}

如果你不确定你可以简单地从JS中删除这个html检查，因为它在你的例子中实际上没有用过：

// remove this if-else block
if(html = "true")
{
    $('.qupdate').css("opacity", "1");
}
else
{
    alert("not successful");
}

您还可以使用浏览器开发人员工具查看发送的内容和获得的内容。例如，在镀铬机F12和打开的面板中选择网络选项卡。现在，以任何形式单击按钮，您将看到发送了新请求。等待它完成 - 状态列应该收到一些数字（如果一切正常，则为200）。现在您可以单击此请求并查看详细信息。甚至还有视频示例=）https://www.youtube.com/watch?v=WOQDrGrd9H8

Answer 5

我尝试帮助您使用Sanjay Kumar答案，因为您希望每行保存

editquestion.php

<thead>
    <tr>
        <th style="width: 5%;">S/N</th>
        <th style="width: 20%;">QUESTION</th>
        <th style="width: 40%;">ANSWER</th>
        <th style="width: 30%;">KEYWORDS</th>
        <th style="width: 5%;">SAVE/UPDATE</th>
    </tr>
</thead>
<tbody>
<?php
    // assuming your database already connected here
    $sql = $db->prepare("SELECT * FROM questions");
    $result = $sql->execute();

    while($row = $result->fetchArray(SQLITE3_ASSOC))
    {
        $quiz_id = $row['quiz_id'];
        $question = $row['question'];
        $answer = $row['answer'];
        $keywords = $row['keywords'];

        // enctype="multipart/form-data" is used if the form contains a file upload, and echo per line for clarity
        echo '<form action="updatequestion.php" method="post">';
        echo '<tr>';
        echo '<td><input style="width: 50%" type="text" name="cid" value="'.$quiz_id.'"></td>';
        echo '<td><input type="text" name="question" value="'.$question.'"></td>';
        echo '<td><input type="text" name="answer" value="'.$answer.'"></td>';
        echo '<td><input type="text" name="keywords" value="'.$keywords.'"></td>';
        echo '<td><input type="submit" name="qupdate" class="qupdate" value="Update"></td>';
        echo '</tr>';
        echo '</form>';
    }
    ?>
    </tbody>
</table>

qupdate.js

// assuming you already loaded jquery library
$(document).ready(function()
{
    $('.qupdate').click(function()
    {
        var id = $(this).closest("form").find('input[name=cid]').val(); 
        var question = $(this).closest("form").find('input[name=question]').val();      
        var answer = $(this).closest("form").find('input[name=answer]').val();
        var keywords = $(this).closest("form").find('input[name=keywords]').val();

        var postData = {'cid' : id, 'question' : question, 'answer' : answer, 'keywords' : keywords};

        $.ajax(
        {
            type: "POST",
            url: "updatequestion.php",
            data: postData,
            success: function(response)
            {
                // note the '==' operator
                if(response == "true")
                {
                    $('.qupdate').css("opacity", "1");
                }
                else
                {
                    console.log(response);
                    alert("not successful");
                }
            },
            error: function(e)
            {
                console.log(e);
            },
            beforeSend: function()
            {
                $('.qupdate').css("opacity", "0.5");
            }
        });
        return false;
    });
});

updatequestion.php

<?php
    session_start();
    require_once("db.php");
    $db = new MyDB();

    if(isset($_POST['cid']) && isset($_POST['question']) && isset($_POST['answer']) && isset($_POST['keywords']))
    {
        $id = filter_input(INPUT_POST, 'cid', FILTER_SANITIZE_STRING);
        $cname = filter_input(INPUT_POST, 'question', FILTER_SANITIZE_STRING)
        $cunit = filter_input(INPUT_POST, 'answer', FILTER_SANITIZE_STRING)
        $keywords = filter_input(INPUT_POST, 'keywords', FILTER_SANITIZE_STRING)

        if($id == '' || $cname == '' || $cunit == '' || $keywords == '')
        {
            echo "one or more parameter is empty";
        }
        else
        {
            $sql = $db->prepare("UPDATE questions SET question = ?, answer = ?, keywords = ? WHERE quiz_id = ?");
            $sql->bindParam(1, $cname, SQLITE3_TEXT);
            $sql->bindParam(2, $cunit, SQLITE3_TEXT);
            $sql->bindParam(3, $keywords, SQLITE3_TEXT);
            $sql->bindParam(4, $id, SQLITE3_INTEGER);

            $result = $sql->execute();

            if ($result)
            {
                echo "true";
            }
            else
            {
                echo "false";
            }
        }
    }
    else
    {
        echo "wrong parameter";
    }
?>

我在代码中添加了一些注释。

如果某些内容不起作用，您可以检查元素并检查控制台选项卡中是否有其他消息，并且我为某些安全性添加filter input函数并更改空变量的比较。

我希望这会给你一些想法。

Answer 6

你可以用其他方式使用它可能有效

$(document).on('click','.qupdate',function() {   
        var question = $(this).closest("form").find('input[name=question]').val();      
        var answer = $(this).closest("form").find('input[name=answer]').val();
       var keywords = $(this).closest("form").find('input[name=keywords]').val();
       var id = $(this).closest("form").find('input[name=cid]').val();                  
    });

//或

jQuery('body').on('click', '.qupdate', function (){
    var form = $(this).closest("form");
    var forminput = form.serialize();
});

表单回应PHP不使用ajax提交

6 个答案:

更新