How can i get one value from different select options with the same name in the same form

Question

I have assigned three select options with the same name which will be stored in the my database table. My code was working well at first right now i don't why it's working well. right now it only saves the value assigned to the last select option panel. Please i need help

<?php
    if(isset($_POST['submit'])){
        $vic_title      = $_POST['vic_title'];
        $vic_name       = $_POST['vic_name'];
        echo $vic_name;
        if($vic_name=='')
            echo "<font color='Green'><b>Please fill in the discription the accused name THANKS!!</b></font>";
        else 
            $insert = "INSERT INTO discips(vic_title, vic_name) 
                        values('$vic_title','$vic_name')";

        $run = mysql_query($insert);
        if ($run) {
            echo "<font color='Green'><b>the incident was added</b></font>";
            # code...
        }
        else{
            echo "<font color='red'><b>the incident was not added</b></font>";
        }
    }
?>

Here is my form that i used.

<form name="harvets" id="form" action="?pg=<?php echo $_GET[pg]."&lodge_inc"."&hv=$token"; ?>" method="post" enctype="multipart/form-data">
        <input type="hidden" name="id" value="<?php echo $edit_ca;?>">
        <center style="padding-top: 2%; margin-top: 3%;"><h3>Enter Incident Informtion</h3></center>
        <table width="100%" class="m_aligned">

            <tr>
                <td align="right" style="width: 100%;">Victim *</td>
                <td align="left" style="width: 100%;">
                    <select style="width: 100%;" id="victim" name="vic_title" class="sect" placeholder="Select a Role">
                        <option></option>
                        <option value="staff">Staff</option>
                        <option value="student">Student</option>
                        <option value="visitor">Vistor</option> 
                    </select>
                </td>
            </tr>

            <tr id="staff_name" style="display: none;">
                <td align="right" style="width: 100%;">Staff Name : </td>
                <td align="left" style="width: 100%;">
                    <select style="width: 100%;" name="vic_name" class="sect" placeholder="Staff's Name">
                        <?php 
                            $get_staf = "select * from  useraccounts";
                            $run_staf =  mysql_query($get_staf);
                            while ($row = mysql_fetch_array($run_staf)) {
                                $staf_id = $row['username'];
                                $staf_name = $row['name'];
                                echo "<option value='$staf_id'>". $staf_name ."</option>"; 
                                # code...
                            } 
                        ?>
                    </select>
                </td>
            </tr>
            <tr id="vis_name" style="display: none;">
                <td align="right" style="width: 100%;">Visitor Name : </td>
                <td align="left" style="width: 100%;"><input type="text" name="vic_name" placeholder="Visitor's Name"></td>
            </tr>
            <tr id="stud_name" style="display: none;">
                <td align="right" style="width: 100%;">Student Name: </td>
                <td align="left" style="width: 100%;">
                    <select style="width: 100%;" class="sect" name="vic_name" placeholder="Student's Name" cols="9">
                        <option></option>
                        <?php 
                            $get_stud= "SELECT * FROM studentdetails";
                            $run_stud =  mysql_query($get_stud);
                            while ($row = mysql_fetch_array($run_stud)) {
                            $stud_id = $row['id'];
                            $stud_fname = $row['fname'];
                            $stud_lname = $row['lname'];
                            echo "<option value='$stud_id'>". $stud_fname ." ". $stud_lname ."</option>"; 
                            # code...
                        } ?>
                    </select>
                </td>
            </tr>

SAVE

Here is My JavaScript

<script type="text/javascript">
    $("#victim").change(function (ev){
        if($(this).val()=='visitor') $("#vis_name").css("display", "table-row")
        else $("#vis_name").css("display", "none")

        if($(this).val()=='student') $("#stud_name").css("display", "table-row")
            else $("#stud_name").css("display", "none")
        if($(this).val()=='staff') $("#staff_name").css("display", "table-row")
              else $("#staff_name").css("display", "none")
    });
</script>

<script type="text/javascript">
    $(document).ready(function() {
      $(".sect").select2({
        allowClear: true
      });
</script>

Answer 1

Getting the value of the last field (select or anything) using a given name is the correct behaviour. If you wish to send multiple values when submiting the form, you must give different names to their fields.

Ask yourself why you want to name them the same way. How are you supposed to get them ? If I create three different inputs, name the three of them 'title' and submit the form after type different things in each input, what do you guess I'll get if I access $_POST['title'] ? More problematic, what should I type to get the value of the first of my three inputs ? How the hell would I know, these are identical elements with different purposes !

If you design different elements, give them different features or they won't be different. They will just overwrite each other and you'll only have the last of the lot.

If you truly need to have them named the same, add hooks at the end of the name like this :

name="vic_name[] .

It will append the value of that field to $_POST['vic_name'] , which will now be an array, and therefore may contain multiple values. That's the only way.

Answer 2

I have solved the problem. I created two files by using AJAX to call another file to replace one a certain line of code. Sometimes we may want something and we fail in someway or another, but when we focus deeply we can solve the code.

i replaced my Javasrcipt file with

<script type="text/javascript">
    $("#victim").change(function () {
        var cat = $(this).val();
        $.ajax({
            type: "GET"
            , url: "student/fetch_victim.php"
            , data: "n=" + Math.random() + "&vr=" + cat
            , beforeSend: function () {
                $("#ctg").html("<img src='imgs/loader.gif' />...loading")
            }
            , success: function (response) {
                $("#tryme").html(response)
            }
        });
    });
</script> 

and i moved the sections i wanted to another file

<?php
require "../ht.php"; $hom = new ht;
    if($_GET['vr']){
        $q = $_GET['vr'];

        if($q =='staff'){
            echo "
                <td align='right' style='width: 100%;'>Staff Name : </td>
                <td align='left' style='width: 100%;'>
                    <select name='vic_name' class='sect' style='width: 100%;'  value='<?php echo $edit[2] ?>' placeholder='Staff's Name'>";
                            $staf = mysql_query("SELECT * FROM  useraccounts"); $w=mysql_error();
                            while ($row = mysql_fetch_array($staf)) {
                                echo "<option value='$row[0]'>". $row[1] ."</option>"; 
                                # code...
                            } 
                    echo "</select>
                </td>
            ";
        }elseif ($q == 'student') {
            echo "
                <td align='right' style='width: 100%;'>Student Name: </td>
                <td align='left' style='width: 100%;'>
                    <select style='width: 100%;' class='sect' name='vic_name' value='".$edit[2] ."' placeholder='Student's Name' cols='9'>
                        <option></option>";
                        $stud= mysql_query("SELECT * FROM studentdetails");
                        while ($row = mysql_fetch_array($stud)) {
                            echo "<option value='$row[31]'>". $row[0] .' '. $row[1] ."</option>"; 
                            # code...
                        } 
                    echo "</select>
                </td>
            ";
        }else{
            echo "
                <td align='right' style='width: 100%;'>Visitor Name : </td>
                <td align='left' style='width: 100%;'><input style='width: 100%;' type='text' name='vic_name' value='".$edit[2] ."'placeholder='Visitor's Name'></td>
            ";
        }

    }
?>
<script type="text/javascript">(function($){
  var code = $('.html-container').html();
  $('.html-viewer').text(code);
})(jQuery);</script>