两个相同的POST动作与jQuery模态屏幕,一个工程,一个不? [英] Two identical POST actions with jquery modal screen, one works, and one doesn't?
问题描述
我使用这个colorbox代码:
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>
以及这两个完全相同的POST动作按钮:
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>
这是加载的目标rrr1.PHP文件:
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";
}
当我点击第一个按钮时,打开一个模式窗口并加载PHP很好,
但是当我点击第二个按钮时,它只是直接重定向到PHP文件。
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.
这是因为它们共享相同的ID吗?
Is this because they share the same id?
假设我想要有100个相同的按钮,并且在每个按钮中只是改变输入的值(现在是1,它将是2,3 ,4 ... 100)。
我希望模态窗口以相同的方式继续工作,并根据这些变化的值显示不同的内容。所以基本上我不会为每个按钮添加额外的代码。
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?
编辑:
现在我可以我明白,我将不得不乘以这样的代码:
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?
推荐答案
对于HTML元素,ID必须是唯一的。使用元素名称和相对位置来获取数据。
$ b
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>
这篇关于两个相同的POST动作与jQuery模态屏幕,一个工程,一个不?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!