我正在尝试从几个表单中提交一个表单，但提交的值仅属于第一个

Question

我正在从数据库中检索一些信息来表示课程，如图所示。然后我想为用户提供一个按钮来单击以获取更多信息。为了知道点击了哪个帖子，我创建了一个表单，并将课程 ID 放入其中，然后提交该表单。但问题是，一旦我提交，我会为所有帖子获得相同的 id，这是第一个 id

<?php 
       $name = $_SESSION["uname"];              
       $sql = "SELECT * FROM `courses` where course_lec = '$name'";
       $result = $conn->query($sql);
       if ($result->num_rows > 0) {
           while($row = $result->fetch_assoc()) {
              echo '
                     <div class="col-md-4">
                     <span class="fa-stack fa-4x">
                     <i class="fa fa-circle fa-stack-2x text-primary"></i>
                     <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
                     </span>
                     </br>
                    <a href="javascript: functionTest()">Search</a>
                   <form name="myform" id="form"  action="checkMarks.php" method="post">
                    <input type= "text" value ="'. $row["course_id"].' " name="test"></input>
                    </form>
                    </br>
                    </div>';

                             }

                    }

?>
                <script >
                    function functionTest() {

                         document.getElementById("form").submit();

                            }


                </script>

知道如何解决这个问题吗？

Answer 1

由于您所有的表单都有相同的 id，javascript 会选择第一个并提交。

您必须为他们提供所有不同的 id，然后提交一个用户点击以获得所需的结果。

示例：您的 echo 会发生变化，为不同的形式提供不同的 ID，并为函数提供一个参数。

... '<a href="javascript: functionTest('.$row["course_id"].')">Search</a>
   <form name="myform" id="form'.$row["course_id"].'"  action="checkMarks.php" method="post">
      <input type= "text" value ="'. $row["course_id"].' " name="test"></input>
   </form>' ...

脚本也会相应改变：

<script >
    function functionTest(course_id) {
        document.getElementById("form"+course_id).submit();
    }
</script>

PS - 这可能不是最好的方法，但却是一个好的开始。

Answer 2

这个问题是适当的，因为在 while 循环中，您每次使用相同的 id（表单）填充数据，要解决，在 php 中创建一个变量，假设 $formId = 0 并用 0 初始化，并且每次使用 while 循环递增它

$formId = 0
    while(){
echo"<form id="'.$formId.'" /form>"
$formId++;
}

Answer 3

您的表单必须具有唯一 ID：

<?php 
    $name = $_SESSION["uname"];              
    $sql = "SELECT * FROM `courses` where course_lec = '$name'";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        $form_id = 1;
        while($row = $result->fetch_assoc()) {
            echo '
            <div class="col-md-4">
            <span class="fa-stack fa-4x">
            <i class="fa fa-circle fa-stack-2x text-primary"></i>
            <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
            </span>
            </br>
            <a href="javascript: functionTest()">Search</a>
            <form name="myform" id="form-'.$form_id++.'"  action="checkMarks.php" method="post">
            <input type= "text" value ="'. $row["course_id"].' " name="test" />
            </form>
            </br>
            </div>';

        }
    }
?>
<script >
    function functionTest() {
        document.getElementById("form").submit();
    }
</script>

Answer 4

每个元素都必须有唯一的 ID 或根本没有。如果您删除 ID，您将需要一种不同的方法来查找特定表单。

<?php 
       $name = $_SESSION["uname"];              
       $sql = "SELECT * FROM `courses` where course_lec = '$name'";
       $result = $conn->query($sql);
       if ($result->num_rows > 0) {
           while($row = $result->fetch_assoc()) {
              echo '
                <div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
                    </span>

                    </br>

                    <a href="javascript: functionTest()">Search</a>
                    <!-- remove the ID -->
                    <form name="myform" action="checkMarks.php" method="post">
                        <input type= "text" value ="'. $row["course_id"].' " name="test"></input>
                    </form>
                    </br>
                </div>';

            }
       }

?>

<script>
    function functionTest( event ){
        try{
            var a=event.target;
            var parent = a.parentNode;/* this will be the containing DIV */
            /* search within container for a form */
            var form=parent.querySelectorAll('form[name="myform"]')[0];
            /* submit the data */
            if( form )form.submit();
        }catch( err ){
            alert(err)
        }
    }
</script>

使用 javascript 是一种解决方案 - 您可以在每个表单中设置一个提交按钮，其样式类似于纯文本。或者，您可以有一个表单并在提交之前使用 javascript 设置值。