与 PHP 相呼应的表单未使用 ajax 提交

Posted 2023-02-24

【中文标题】与 PHP 相呼应的表单未使用 ajax 提交

【英文标题】：Form echoed with PHP not submitting using ajax

【发布时间】：2018-11-11 13:57:52

【问题描述】：

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

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 似乎只适用于第一个回显数据，似乎不提交其余数据。我该如何解决？

提前致谢。

【问题讨论】：

您有多个具有相同 id 的元素，这是行不通的，因为 id 需要是唯一的。所以 js 选择了第一个（另一个浏览器可能会选择最后一个......）

此外，您在循环中拥有表单元素，因此当您提交表单时，它只是提交您所拥有的众多表单之一。

解决方案就在附近：在您的 onClick 函数中，通过单击按钮的相邻元素及其名称而不是通过 id 获取所需的值。

所以你想更新所有回应的问题？那么表单标签和提交按钮应该在循环之外，并且输入标签的名称设置为这样 name="cid[]" 所以它会发送数组，看看这个：***.com/questions/3314567/…

您打算一次性提交所有这些还是只提交用户提交的行？

【参考方案1】：

添加 dynamic-form 类以形成标签并从所有字段中删除 id：

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

在 JS 中更新

$(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;
    );
);

【参考方案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();                  
    );

【讨论】：

这将返回父表单输入值。其余代码照常工作

我了解您要执行的操作，但这并没有改变我的代码中的任何内容，并且它仍然以相同的方式工作。非常感谢

@diagold 但这绝对是要走的路。

我用@SanjayKumar 代码替换了所有这些question = $('#question').val(); answer = $('#answer').val(); keywords = $('#keywords').val(); id = $('#cid').val();，但这仍然不起作用，还是我这样做的方式错误？

可以分享一下详情吗

【参考方案3】：

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

给你最简单的答案：

从原则上讲，您所做的是不好的做法，因为您应该 不回显“表格” 页面上的每个表单都有相同的信息 除了输入，这是错误的。

正确的解决方案：

仅出于此目的开始使用 ajax 发布 不要使用 FORM，而是为每个问题创建一个 div 并拥有 带有问题 ID 的输入 使用模式编辑问题，这样当您关闭 modal

您重置模式中的输入

，使您能够

再次编辑问题并保存

。

您现在想要的解决方案：

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% 肯定如果您使用此方法，它将比您更好地工作任何其他答案。

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

最后说明：“updatequestion.php”不是这里的问题，从来都不是问题。

祝你好运！

【参考方案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;
    );
);

更新

也许您发送的响应不完全是“真”或“假”？ 为了确保您不会发回任何额外的字符，您应该在 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");

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

【讨论】：

我没有成功

那么可能 html 不是“真实的”？你在 updatequestion.php 中返回了什么？实际上，如果您发布 updatequestion.php 的代码，它可能会有所帮助。

也编辑了我的答案，检查“更新”标题后的部分。

【参考方案5】：

我尝试帮助使用Sanjay Kumar 答案，因为您想按行保存

编辑问题.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;
    );
);

更新问题.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 函数以提高安全性并更改空变量的比较。

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

【参考方案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();
);