Two identical POST actions with jquery modal scree

Question

I'm using this colorbox code:

<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        $("#cboxFormButton").click(function(e){
        e.preventDefault();
        $.colorbox({
        href: $(this).closest('form').attr ('action'),
        data: {a: $("input#111").val()}
        });

            return false;
        });
    });
</script>

along with these two identical POST action buttons:

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input id="111" name="a" type="hidden" value="1"/>
    <input type="submit" id="cboxFormButton" class="button" value="Test">
</form>
  </div>

  <div>
<form action="rrr1.php" method="POST" target="_blank" class="">
    <input id="111" name="a" type="hidden" value="1"/>
    <input type="submit" id="cboxFormButton" class="button" value="Test">
</form>

and this is the target rrr1.PHP file that loads:

<?php 

if(isset($_POST['a']));

switch ($_POST['a']) {

    case "1":
        $param1 = "1";
        break;

    case "2":
        $param1 = "2";
        break;

    default:
        $param1 = "other";
}

When I click the first button, a modal window opens up and load the PHP just fine, but when I click the second button, it simply redirects straight to the PHP file.

Is this because they share the same id?

Lets say I want to have 100 of these identical buttons, and in each one just change the value of the input (which is now "1", it would be 2,3,4...100). I want the modal window to keep working the same way, and display different content according to these changing values. so basically I would rather not add additional code for each of these buttons.

What causes the problem? and what's the most efficient solution?

EDIT:

right now I can understand that I would have to multiply the code like this:

<script>
    $(document).ready(function(){
        $("#cboxFormButton1").click(function(e){
        e.preventDefault();
        $.colorbox({
        href: $(this).closest('form').attr ('action'),
        data: {a: $("input#111").val()}
        });


            return false;
        });
    });

                $(document).ready(function(){
        $("#cboxFormButton2").click(function(e){
        e.preventDefault();
        $.colorbox({
        href: $(this).closest('form').attr ('action'),
        data: {a: $("input#222").val()}
        });


            return false;
        });
    });

</script>

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input id="111" name="a" type="hidden" value="1"/>
        <input id="qqq" name="b" type="hidden" value="1"/>
    <input type="submit" id="cboxFormButton1" class="button" value="Test">
</form>

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input id="222" name="a" type="hidden" value="2"/>
    <input type="submit" id="cboxFormButton2" class="button" value="Test">
</form>

Is there anything more efficient/shorter code?

Answer 1

Ids must be unique for HTML elements. Use the element name and relative position to get the data. Then you can remove the conflicting ids altogether.

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input name="a" type="hidden" value="1"/>
    <input type="submit" class="button cboxFormButton" value="Test">
</form>

<form action="rrr1.php" method="POST" target="_blank" class="">
    <input  name="a" type="hidden" value="2"/>
    <input type="submit" class="button cboxFormButton" value="Test">
</form>

<script type="text/javascript">
$(document).ready(function(){
    $(".cboxFormButton").click(function(e){
        e.preventDefault();
        var $form = $(this).closest('form');
        $.colorbox({
            href: $form.attr('action'),
            data: {a: $form.find('input[name="a"]').val()}
        });

        return false;
    });
});
</script>

Answer 2

All DOM elements should have unique IDs as explained here.

Unfortunately, two elements of you DOM have the same ID cboxFormButton.

Make the IDs unique.