我正在尝试提交一些表格，但是提交的值仅属于第一个

Question

I am retriving some information from the database to represent courses as you can see in the image . Then I want to provide the user with a button to click on for more information . In order to know which post is clicked on I have created a form and I put the course id inside and then I submit that form . But the problem is once I submit I get the same id for all the posts which is the very first 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>

Any idea how can I fix that ?

Answer 1

The problem is appropriate as in while loop evertime you are populating the data with the same id (form) , to resolve , create a variable in php let's say $formId = 0 and intialise with 0 and evertime increment it with while loop

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

Answer 2

Since all your forms have the same id, javascript will pick the first one up and submit that.

You will have to give them all different id's and then submit the one user clicks to get the desired result.

Example : Your echo would change to give different IDs to different forms and an argument to the function.

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

And the script will change accordingly :

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

PS - This might not be the best way to do it, but a good start.

Answer 3

You must be have an unique id for your forms:

<?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

Every element must have a unique ID or none at all. If you remove the ID you would need a different approach to finding the particular form.

<?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>

Using javascript is one solution - you could have a submit button within each form styled to resemble plain text. Alternatively, you could have a single form and use javascript to set the values prior to submission.