how to apply script to all modal pop up

Question

The following is working great for one modal. But i want it to works with a different modal, and I don't know how to alter this code to accomplish that.

Any ideas?

here is my modal's button:

<a name="view" data-toggle="modal" data-target="<?php  echo $row['ID']; ?>" >View</a>

modal content:

<div class="modal fade" id="<?php  echo $row['ID']; ?>" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-body">
            <label for="test1">Test: </label>
            <select required class="form-control" name="test1" id="test1">
            <option selected value="<?php echo $row['test1'];?>"><?php echo $row['test1'];?></option>
                <?php 
                else if ($row['test1'] == "A")
                {                                           
                    echo "<option value='B'>B</option>".
                      "<option value='C'>C</option>";
                }
                if ($row['test1'] == "B")
                {                                           
                    echo "<option value='A'>A</option>".
                      "<option value='C'>C</option>";
                }

                else if ($row['test1'] == "C")
                {                                           
                    echo "<option value='A'>A</option>".
                      "<option value='B'>B</option>";
                }
                ?>
            </select>

            <label for="level">Level: </label>
            <input class="form-control" name="level" id="level" disabled value = <?php echo $row['level']; ?>>

            <button type="submit" class="btn btn-success" name="update" >Update</button>
        </div>
    </div>
</div>

script code:

$(document).ready(function ()
{       
    $(#"test1").change(function ()
    {
        var test = $(this).val();

        if (test == "A")
        {
            document.getElementById("level").value = "AAA";
        }
        else if (test == "B")
        {
            document.getElementById("level").value = "BBB";
        }
        else if (test == "C")
        {
            document.getElementById("level").value = "CCC";
        }
    });
});

My javascript code is working only in my first modal which is (ID = 1). The code doesn't work for all modals.

also when i use getclassname level value wont change, and when i click update button the update will happen to (ID = 1) even i change different modal.

if there is many modals..you must have a class selector instead of id selector...$(#"test1").change(function () and adapt the code — Sk., Jan 23 '19 at 13:36

score 0 · Accepted Answer · answered Jan 23 '19 at 13:41

Try this code. I replaced ID with class selector.

<div class="modal fade" id="<?php  echo $row['ID']; ?>" role="dialog">
    <div class="modal-dialog modal-lg">
    <div class="modal-body">
        <label for="test1">Test: </label>
        <select required class="form-control selectmodel" name="test1" id="test1">
        <option selected value="<?php echo $row['test1'];?>"><?php echo $row['test1'];?></option>
        <?php 
        else if ($row['test1'] == "A")
        {                                           
            echo "<option value='B'>B</option>".
              "<option value='C'>C</option>";
        }
        if ($row['test1'] == "B")
        {                                           
            echo "<option value='A'>A</option>".
              "<option value='C'>C</option>";
        }

        else if ($row['test1'] == "C")
        {                                           
            echo "<option value='A'>A</option>".
              "<option value='B'>B</option>";
        }
        ?>
        </select>

        <label for="level">Level: </label>
        <input class="form-control levelcheck" name="level" id="level" disabled value = <?php echo $row['level']; ?>>

        <button type="submit" class="btn btn-success" name="update" >Update</button>
    </div>
    </div>
</div>

JQuery

$(document).on("change",".selectmodel",function (){
    var test = $(this).val();

    if (test == "A"){
        $(this).closest(".modal").find(".levelcheck").val("AAA");
    }else if (test == "B"){
        $(this).closest(".modal").find(".levelcheck").val("BBB");
    }else if (test == "C"){
        $(this).closest(".modal").find(".levelcheck").val("CCC");
    }
});

how to apply script to all modal pop up

1 Answers1