如何在每个查询结果中添加复选框？

Question

I have a problem with this code. I'm listing a couple of products on my page and each of them has a checkbox from query. I would like to compare max two of the products with the „compare“ button. So first, I would „check“ the two products and then click „compare“ button which would then redirect me to another page, where those two products would be compared.

With this code submit button is enabled when other checkboxes are checked, but now I want limit checked checkboxes to 2.

I've tried with var=max in this function, but then submit button is disabled when checkboxes are checked.

Can this be done in this function, or in new function?

  <?php $query = "SELECT * FROM artikli WHERE kategorija='laptop'"; $result = mysqli_query($con, $query); while ($row = mysqli_fetch_array($result)) { $id = $row ['id']; print "<div id='proizvod'></br><a style='text-decoration:none; color:black;' class='two' href='proizvod.php?id=$id' >" . $row["naziv"] . "" . "<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" . "<p> Cijena za gotovinu: " . $row["cijena"] . " KN </p>" . "<pre id='pre1'>" . $row["opis"] . "</pre>" . "</a><input type='checkbox' id='checkme_" . $id . "'/></div>"; } ?> </form> <input type='submit' name='usporedi' disabled='disabled' id='usporedi' onclick="window.location.href='usporedi'" value='Usporedi' /> <script type="text/javascript"> window.onload = function () { var form = document.getElementById('Forma'); var usporedi = document.getElementById('usporedi'); var e; for (i = 0, n = form.elements.length; i < n; i++) { e = form.elements[i]; if (e.type == 'checkbox') { if (e.id.indexOf('checkme') == 0) { e.addEventListener('change', function () { if (this.checked) { usporedi.disabled = false; } else { usporedi.disabled = true; } }); } } } }; </script> 

Answer 1

Try something like this:

Create your form elements:

<form id="myForm">
<?php

$query = "SELECT * FROM artikli WHERE kategorija='laptop'";

$result = mysqli_query($con, $query);

while ($row = mysqli_fetch_array($result)) {

    $id = $row ['id'];

    print
        "<div id='proizvod'></br><a style='text-decoration:none; color:black;' class='two' href='proizvod.php?id=$id' >" . $row["naziv"] . "" .
        "<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" .
        "<p> Cijena za gotovinu: " . $row["cijena"] . " KN </p>" .
        "<pre id='pre1'>" . $row["opis"] . "</pre>" .
        "</a>**<input type='checkbox' id='checkme_" . $id . "'/>**</div>
}
?>
</form>

Notice here that I moved your opening <form> tag to the top and gave it an id. I also made sure that each of your checkboxes has a unique id by adding _".$id." to each element id.

Now the magic:

<script type="text/javascript">

window.onload = function(){

    var form = document.getElementById('myForm');
    var usporedi = document.getElementById('usporedi');
    var e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];

        if( e.type == 'checkbox' )
        {
            if( e.id.indexOf('checkme') == 0 )
            {
                e.addEventListener( 'change', function()
                {
                    if( this.checked )
                    {
                        usporedi.disabled = false;
                    } else {
                        usporedi.disabled = true;
                    }

                } );
            }
        }
    }
}

</script>

The javascript here looks through all the elements of your form, and for each checkbox that it finds, it checks that the word 'checkme' appears at the beginning of the id (we don't care what the rest of it is in this instance). Then it adds an event listener to each 'checkme' checkbox which will disable / enable the submit button when each checkbox is toggled.

EDIT - ONLY 2 CHECKBOXES ACTIVE AT ONCE

OK ... make a coffee, this is going to take a while.

ADDING THE EVENT LISTENER

There's only 1 thing we want to do automatically when the document loads - assign an event listener to each checkbox in the form with the appropriate id stub. Note that NOTHING changes with regard to the creation of your form elements as demonstrated above.

window.onload = function(){

    var form = document.getElementById('myForm'), e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];
        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 )
        {
            e.addEventListener( 'change', function(){ changeHandler(this); } );
        }
    }
}

The this parameter that we're passing to the changeHandler function here refers to the checkbox object assigned to variable e as we encounter them while iterating over the form elements.

DECLARE THE EVENT HANDLER

OUTSIDE our window.onload function, we need to declare our checkbox onChange event handler:

function changeHandler( elem )
{
    var usporedi = document.getElementById('usporedi');

    if( countChecked() == 2 )
    {
        disableCheckboxes();
        usporedi.disabled = false;
    }
    else
    {
        enableCheckboxes();
        usporedi.disabled = true;
    }
}

The handler in itself is very simple, but you'll notice that it makes use of 3 additional functions to get its job done. countChecked() figures out how many checkboxes are currently checked:

function countChecked()
{
    var form = document.getElementById('myForm'), e, c = 0;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];

        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 && e.checked == true )
        {
            c++;
        }
    }

    return c;
}

This function is executed each and every time a checkbox is changed. If it returns a value of 2 back to changeHandler() , the next function is called to make sure that no more can be checked, and the disabled property is removed from the submit button.

function disableCheckboxes()
{
    var form = document.getElementById('myForm'), e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];
        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 && e.checked == false )
        {
            e.disabled = true;
        }
    }
}

disableCheckboxes() iterates over every form element in the same way the other functions do (noticing a pattern here?) and disables any checkboxes which are not currently checked. Each time a checkbox is changed and LESS THAN 2 in the form are checked, changeHandler() calls the next function to make sure that the checkboxes are fully functional, and disables the submit button so that the form cannot be submitted:

function enableCheckboxes()
{
    var form = document.getElementById('myForm'), e;

    for( i = 0, n = form.elements.length; i < n; i++ )
    {
        e = form.elements[i];
        if( e.type == 'checkbox' && e.id.indexOf('checkme') == 0 )
        {
            e.disabled = false;
        }
    }
}

Now this is quite a verbose way of tackling this problem - but I wanted you to be able to appreciate the steps required to produce the solution you were looking for. Enjoy :)

PS: Here's the fiddle in case you wanted to see it in the wild:

Checkbox Comparison Madness

Answer 2

You are using ID for checkbox which must be unique for every html input . So rather using ID we are now using class.Class can be repeat.So according to that class we are now changing the button.

Change code something like this

print
   "<div id='proizvod'></br><a style='text-decoration:none; color:black;' class='two' href='proizvod.php?id=$id' >" . $row["naziv"] . "" .
   "<p><img src=" . $row["slika"] . " width='200px' height='200px' style='border-radius: 15px;'></p>" .
   "<p> Cijena za gotovinu: " . $row["cijena"] . " KN </p>" .
   "<pre id='pre1'>" . $row["opis"] . "</pre>" .
   "</a>**<input type='checkbox' id='checkme' class='checkboxClass'/>**</div>

And JS function to

<script language='javascript'>
                        var checker = document.getElementsByClassName('checkboxClass');
                        var usporedi = document.getElementById('usporedi');
                        // when unchecked or checked, run the function
                        checker.onchange = function () {
                            if (this.checked) {
                                usporedi.disabled = false;
                            } else {
                                usporedi.disabled = true;
                            }

                        }
                    </script>