Я использую этот код colorbox:
<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> наряду с этими двумя идентичными кнопками POST:
<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>
и это целевой файл rrr1.PHP, который загружает:
<?php if(isset($_POST['a'])); switch ($_POST['a']) { case "1": $param1 = "1"; break; case "2": $param1 = "2"; break; default: $param1 = "other"; }
Когда я нажимаю на первую кнопку, появляется модальное окно и очень просто загружает PHP, но когда я нажимаю вторую кнопку, она просто перенаправляется прямо в файл PHP.
Это потому, что они имеют один и тот же идентификатор?
Допустим, я хочу иметь 100 из этих одинаковых кнопок, и в каждом из них просто измените значение ввода (теперь это «1», это будет 2,3,4 … 100). Я хочу, чтобы модальное окно продолжало работать одинаково и отображало различное содержимое в соответствии с этими изменяющимися значениями. поэтому в основном я бы предпочел не добавлять дополнительный код для каждой из этих кнопок.
Что вызывает проблему? и что является наиболее эффективным решением?
РЕДАКТИРОВАТЬ:
прямо сейчас я могу понять, что мне придется умножить код следующим образом:
<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>
Есть ли что-нибудь более эффективное / короче кода?
Идентификаторы должны быть уникальными для элементов HTML. Используйте имя элемента и относительное положение для получения данных. Затем вы можете полностью удалить конфликтующие идентификаторы.
<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>
Все элементы DOM должны иметь уникальные идентификаторы, как описано здесь .
К сожалению, у двух элементов DOM есть один ID cboxFormButton .
Сделайте идентификаторы уникальными.