将PHP变量值发送到同一页面中的JavaScript弹出窗口

Question

我想将php变量值发送到JavaScript弹出窗口。 我的JavaScript弹出代码和PHP代码在同一页面中。 在同一页面中，我想用PHP变量值调用JavaScript弹出窗口。

因此，基本上我有2个按钮形式的2个不同的PHP变量值，用户可以单击任何按钮，并且我只希望基于PHP变量值出现一个弹出窗口。

这是我在代码中正在做的事情：

<!-- Calling same Popup window with diff ID -->
<a href="#login?h_id=123" data-toggle="modal" class="btn btn-large">Hire Person</a> 

<!-- Calling same Popup window with diff ID -->
<a href="#login_hire?f_id=456" data-toggle="modal" class="btn btn-large">Hire <?php echo $array_other_new[1] ?></a>

但是，如果我执行如上所述的类似href="#login?h_id=123" ，则不会显示我的弹出href="#login?h_id=123" 。 “我的弹出窗口”仅在调用类似href="#login"没有任何?id=123 。

现在这是我基于Bootstrap的弹出代码：

 <!-- LogIn for Hiring Popup Starts --> <div class="modal large hide fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="login"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>LogIn</h3> </div> <div class="modal-body"> <form method="post" onSubmit="javascript:void(0)"> <span id="status"></span> <input type="hidden" id="get_follow_id" value=""> <input type="hidden" id="get_hire_id" value="<?php echo $get_id ?>"> <div class="controls controls-row"> <label class="title">Email *</label> <input class="span3" type="text" placeholder="Email" id="email" /> </div> <div class="controls controls-row"> <label class="title">Password *</label> <input class="span3" type="password" id="pass" placeholder="Password" /> </div> <div class="controls controls-row"> <input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" /> <br><br> <a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a> </div> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> <!-- LogIn for Hiring Popup Ends -->

请提出任何可行的解决方案。

Answer 1

据我了解，

您有一个用php创建的页面
在此页面上创建链接/按钮
创建页面时，php可以访问ID数组
您希望将这些ID与完成的页面上的链接/按钮存储在一起，这样，当用户单击链接/按钮时，将出现一个模式，并且将与单击的按钮一起存储的ID填充到模式内部显示的输入中
您希望所有链接/按钮仅使用一种模式

如果正确，我将使用链接/按钮的数据属性。 有关详细信息，请参见以下注释：

这是一个有效的例子

注意，我必须从模态div中删除hide类，使其类似于<div class="modal large fade".... ，否则模态将不会出现

快速浏览一下使此工作所需的全部代码，请参见下面的完整代码

jQuery的

$('body').on("click",".callModal", function() {
    var f_id = $(this).data('f-id');
    $('#get_hire_id').val( f_id );
});

*请注意，访问data('f-id')的语法可能会因您使用的jQuery版本和/或您需要支持的浏览器而异，我相信IE <11在这里存在问题。是不是...

PHP

<?php
for($i = 0; $i < count($array_other_new); ++$i) {
    echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
?>

我的示例中使用的所有代码：

<?php
// I dont know exactly how you create your page 
// so i'm just gonna show you a simple example  and wing it
$array_other_new=array("John Smith","James Jones", "William Baker", "Michael Frost", "Montey Python");
$array_other_new_hire_ids=array("123","456", "789", "012", "345");
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function() {
    // listen for clicks on our links
    $('body').on("click",".callModal", function() {
        // when a user clicks a button
        // get the id we stored in the button's
        // data attribute  
        var f_id = $(this).data('f-id');
        // note our attribute is `data-f-id` in the html 
        // but we access it by `.data('f-id')` here
        // always leave the `data-` off
        // set the value to our input
        $('#get_hire_id').val( f_id );
        // the normal link functionallity 
        // will open the modal as normal
    });
});
</script>
</head>
<body>
<?php
for($i = 0; $i < count($array_other_new); ++$i) {
    echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
} 
// the important part here is data-f-id="'.$array_other_new_hire_ids[$i].'"
// this is where we store our php variable in the link's data-f-id property which we have just made up, cool huh? 
// also note that we added the class `callModal` to the element so we can easily bind a function to them later
?>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
<div class="modal large fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>LogIn</h3>
      </div>
      <div class="modal-body">
        <form method="post" onSubmit="javascript:void(0)">
          <span id="status"></span>
          <input type="text" id="get_follow_id" value="">
          <input type="text" id="get_hire_id" value="">
          unhid to show setting value<br>
          <div class="controls controls-row">
            <label class="title">Email *</label>
            <input class="span3" type="text" placeholder="Email" id="email" />
          </div>
          <div class="controls controls-row">
            <label class="title">Password *</label>
            <input class="span3" type="password" id="pass" placeholder="Password" />
          </div>
          <div class="controls controls-row">
            <input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" />
            <br>
            <br>
            <a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a> </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
      </div>
    </div>
  </div>
</div>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
</body></html>

将PHP变量值发送到同一页面中的JavaScript弹出窗口

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-02-08 10:19:03

将PHP变量值发送到同一页面中的JavaScript弹出窗口

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-02-08 10:19:03

解决方案1
1 已采纳 2015-02-08 10:19:03