Only getting the last record from mysql database

Question

I am stuck in code where I want to get data from MySQL into an array. I have a form containing color and size selection fields, the javascript function is launched onclickand two more selection blocks are created, for example above, I was able to get the data into javascript code, where the code for creating new rectangles is written. But I only get the last inserted record from both tables. Although I used a loop while. Can someone help me, and I get the name of all the selected boxes that I love name="color[]", I want to insert entries into the bridge table containing the color and size identifiers. below is my code please help ..

I will clear it, every time I click the Add More button, it should create 2 new drop-down lists: one for color and 2 for size, both drop-down lists should have different data from the database. so the identifiers for each entry will be the same in each drop-down list, I want to add more than 1 entry to the bridge table that contains product_id, color_id and size_id, so if I go to 3 dropwdown windows and I choose blue and a small size in the first , then for the second drop-down list, I again select the blue color and size of the medium, as well as for the last drop-down menu, which was also created by the javascript function. I choose black color and big size. therefore, from the drop-down list, it will receive the identifiers of size, color, and it will be inserted accordingly. Therefore,when I show the product and the blue color is selected, I would only see the dimensions that were added to the blue color when the product was added .. I hope this clears everything :)

$result=mysql_query("SELECT * FROM color,size");
while($row=mysql_fetch_array($result)) {

    ?>


    <script>
        var room = 1;
        function add_fields() {
            room++;
            var objTo = document.getElementById('room_fileds')
            var divtest = document.createElement("div");
            divtest.innerHTML = '<div class="label">Room ' + room + ':</div><div class="content"><span>Color: <select name="color[]"><option value="<?php echo $row['color_id']; ?>"><?php echo $row['color']; ?></option></select></span><span>Size: <select><option value="<?php echo $row['size_id']; ?>"><?php echo $row['size']; ?></option></select></span></div>';

            objTo.appendChild(divtest)
        }
    </script>

<?php

}

HTML-

<div id="room_fileds">
    <div>
        <div class='label'></div>
        <div class="content">
            <input type="button" class="btn btn-success" id="more_fields" onclick="add_fields();" value="Add More" /> <br /><br />

            <select name="color[]"  class="form-control">
                <option value="0">Select Color</option>
                <?php
                $result=mysql_query("SELECT * FROM color");
                while($row=mysql_fetch_array($result)){
                    ?>
                    <option value="<?php echo $row['color_id'] ?>"><?php echo $row['color']; ?></option>
                <?php } ?>
            </select>

            <select name="size[]"  class="form-control">
                <option value="0">Select Size</option>
                <?php
                $result=mysql_query("SELECT * FROM size");
                while($row=mysql_fetch_array($result)){
                    ?>
                    <option value="<?php echo $row['size_id'] ?>"><?php echo $row['size']; ?></option>
                <?php } ?>
            </select>


        </div>
    </div>
</div>

Answer 1

:

<script>

var colors = [];
var sizes = [];
var room = 1;
<?php
$result = mysql_query("SELECT * FROM color");
while ($row = mysql_fetch_array($result)) { ?>
    colors.push(['<?php echo $row['color_id'] ?>', '<?php echo $row['color'] ?>']);
<?php }
$result = mysql_query("SELECT * FROM size");
while ($row = mysql_fetch_array($result)) { ?>
    sizes.push(['<?php echo $row['size_id'] ?>', '<?php echo $row['size'] ?>']);
<?php } ?>

function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds');
    var divtest = document.createElement("div");
    var html = '<div class="label">Room ' + room + ':</div><div class="content"><span>Color: <select name="color[]" class="form-control">';
    for (i = 0; i < colors.length; i++) {
        html += '<option value="' + colors[i][0] + '">' + colors[i][1] + '</option>';
    }
    html += '</select></span><span>Size: <select name="size[]" class="form-control">';
    for (i = 0; i < sizes.length; i++) {
        html += '<option value="' + sizes[i][0] + '">' + sizes[i][1] + '</option>';
    }
    html += '</select></span></div>';
    divtest.innerHTML = html;
    objTo.appendChild(divtest);
    room++;
}

</script>

Answer 2

$divs='';
$result=mysql_query("SELECT * FROM color,size");
$room=1;
while($row=mysql_fetch_array($result)) {

    $divs.='<div><div class="label">Room ' . $room . ':</div><div class="content"><span>Color: <select name="color[]"><option value="'.$row['color_id'].'">'.$row['color'].'</option></select></span><span>Size: <select><option value="'.$row['size_id'].'">'.$row['size'].'</option></select></span></div></div>';
    $room++;
} ?>
<script>
function add_fields() {          
    var objTo = document.getElementById('room_fileds');
    objTo.appendChild(<?php echo $divs; ?>);
}
</script>

Answer 3

Try this code, hope it works for you.

 <script>
var room = 1;
function add_fields() { 
    room++;  
    var objTo = document.getElementById('room_fileds');
    var divtest = document.createElement("div");
    <?php 
        $div_start='<div class="label">Room '."'+ room +'".' :</div><div class="content">';
        $color='<span>Color: <select name="color[]">';
        $size='<span>Size: <select>'
        $result=mysql_query("SELECT * FROM color,size");
        while($row=mysql_fetch_array($result)) { 
             $color.='<option value="'.$row['color_id'].'">'.$row['color'].'</option>';
             $size.='<option value="'.$row['size_id'].'">'.$row['size']'.</option>';
        }
        $color.='</select> </span>';
        $size.='</select> </span>';
        $div_close='</div>';
        $innerHTML=$div_start.$color.$size.$div_close; 
    ?> 
    divtest.innerHTML ='<?php echo $innerHTML; ?>';
    objTo.appendChild(divtest);
}
</script>

Answer 4

This is the final code, it will help if someone wants to code a similar thing .. just change the values ​​and it will work according to your needs ... and I would like to thank everyone who answered the stream and specifically Mohammad Anini .. it would not have been possible without his help !!!

$query = mysql_query("INSERT INTO products (product_name,product_description, product_pic1, product_pic2, product_pic3,product_price,category_id,subcategory_id,product_status,color,size,product_slug, meta_keywords,entrydate)

                VALUES ('$product', '$description' , '$image', '$image2', '$image3', '$product_price', '$category', '$subcategory', '$product_status', '$capture_field_vals', '$size', '$product_slug1', '$meta_keywords', Now() )") or die(mysql_error());

                if ($query === TRUE) {

                    $lastid = mysql_insert_id();

                    $color["color"]=array();
                    $size["size"]=array();

                    foreach ($_POST['color'] as $key => $colorvalue) {
                    }


                    foreach ($_POST['size'] as $key => $sizevalue) {
                    }
                    $cid=array();
                    foreach($color as $rec){
                        $cid[]=$rec;
                    }
                    $sz=array();
                    foreach($size as $rec){
                        $sz[]=$rec;
                    }

                    $length=sizeof($color);
                    for($i=0;$i<$length-1;$i++){


                        $query2 = mysql_query("INSERT INTO bridge (product_id,color_id, size_id)

                VALUES ('$lastid', '$cid[$i]' , '$sz[$i]')") or die(mysql_error());

                    // echo "<script>alert('New Product successfully Addedd');windows.location.replace('addedit_product.php');</script>";
                    }