Two identical POST actions with jquery modal screen, one works, and one doesn't?

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?

possible duplicate of [Can multiple different HTML elements have the same ID if they're different types?](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types) — SteAp, Feb 23 '14 at 00:49

tvanfosson · Accepted Answer · 2014-02-23T02:01:20.740

2

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>

edited Feb 23 '14 at 02:01

answered Feb 23 '14 at 00:53

tvanfosson

524,688
99
697
795

I'm not sure I understand how to implement this, if I simply replace this code I still get the same problem, even when I change the ID of the second form. what else should I change? – rockyraw Feb 23 '14 at 01:11
@rockyraw - did you also update the value of the second input when you removed the ids? In your original example, the values are the same and thus would result in the same execution server-side. – tvanfosson Feb 23 '14 at 01:33
yes I noticed something was wrong so I figured I should update them too. it doesn't make much sense to me though, why unique submit ID's aren't enough if the function can refer to only one at a time? – rockyraw Feb 23 '14 at 01:53
@rockyraw - I added some updated markup and moved the click handler to use a class applied to the submit buttons instead of ids (I missed that earlier). – tvanfosson Feb 23 '14 at 02:03
Great! thanks, it's working. I wonder why would one want to use ID in such case instead of class? – rockyraw Feb 23 '14 at 02:35
Generally I only use ids (except those added by frameworks) for things that there are only one of (like `#header`, `#footer`, `#mainMenu`) and most frequently just for styling via CSS. – tvanfosson Feb 23 '14 at 02:45

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

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.

edited May 23 '17 at 10:26

Community

1
1

answered Feb 23 '14 at 00:51

SteAp

11,853
10
53
88

Two identical POST actions with jquery modal screen, one works, and one doesn't?

2 Answers2

Linked