CODEWITHSUNDEEP
javascriptphphtmlformsform-submit
Danial Kosarifa
Danial Kosarifa

Reputation: 1074

I am trying to submit a form out of a few but the value get submitted only belongs to the first one

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 ? enter image description here

Upvotes: 1

Views: 62

Answers (4)

cvipul
cvipul

Reputation: 120

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.

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33823

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.

Upvotes: 1

Mohammad Hamedani
Mohammad Hamedani

Reputation: 3354

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>

Upvotes: 1

shubh14896
shubh14896

Reputation: 156

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++;
}

Upvotes: 2

Related Questions