将PHP变量值发送到同一页面中的JavaScript弹出窗口 [英] Send PHP variable value to JavaScript popup window in same page
本文介绍了将PHP变量值发送到同一页面中的JavaScript弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将php变量值发送到JavaScript弹出窗口。我的JavaScript弹出代码和PHP代码在同一页。在这个页面中，我想使用PHP变量值调用JavaScript弹出框。
所以基本上我有2个不同的PHP变量值在一个形式的2个按钮，
这里是我在代码中所做的：
<！ - 使用diff ID调用相同的弹出窗口 - >
< a href =＃login？h_id = 123data-toggle =modalclass =btn btn-large>租用人< / a>
<！ - 调用相同的弹出窗口与diff ID - >
< a href =＃login_hire？f_id = 456data-toggle =modalclass =btn btn-large> Hire<？php echo $ array_other_new [1]？& / a>
但是如果我做这样的操作，我的Popup不会出现 href = #login？h_id = 123，如上所示。仅当调用 href =＃login时不显示任何？id = 123 >
现在这里是我的基于Bootstrap的弹出代码：
<弹出开始 - >< div class =modal large hide fadeid =login_hiretabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true> ; div id =login> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-hidden =true>×< / button> < h3> LogIn< / h3> < / div> < div class =modal-body> < form method =postonSubmit =javascript：void（0）> < span id =status>< / span> < input type =hiddenid =get_follow_idvalue => < input type =hiddenid =get_hire_idvalue =<？php echo $ get_id？>> < div class =controls controls-row> < label class =title>电子邮件*< / label> < input class =span3type =textplaceholder =Emailid =email/> < / div> < div class =controls controls-row> < label class =title>密码*< / label> < input class =span3type =passwordid =passplaceholder =Password/> < / div> < div class =controls controls-row> < input type =submitonClick =login（）; return false; value =点击这里登录class =btn/> < br>< br> < a onclick =whenClicked1（）href =javascript：void（0）>尚未注册？立即注册< / a> < / div> < / form> < / div> < div class =modal-footer> < button class =btndata-dismiss =modalaria-hidden =true> Cancel< / button> < / div> < / div> < / div>< / - Log in for Hiring Popup Ends - >
请提出任何工作解决方案。
解决方案
据我理解，
- 您在此页面上创建的页面
- 当页面被创建时，php可以访问一个ids
- 的数组，您希望在完成的页面上使用链接/按钮来存储这些ID，用户点击链接/按钮出现一个模态，并且点击的按钮存储的ID填充在模态
- 内显示的输入中，您希望所有链接/按钮只使用一个模态
如果这是正确的，我将使用链接/按钮的数据属性。有关详情，请参阅下面的注释：
注意，我不得不删除 hide c>因为模态不会以其他方式出现
< 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_hiredata-toggle =modaldata -f-id ='。$ array_other_new_hire_ids [$ i]。'class =btn btn-large callModal> Hire'。$ array_other_new [$ i]。'< / a&
？>
示例：
<？php
//我不知道如何创建您的页面
//所以我只是给你一个简单的例子和翅膀
$ array_other_new = array（John Smith，James Jones，William Baker，Michael Frost，Montey蟒蛇）;
$ array_other_new_hire_ids = array（123，456，789，012，345）;
？>
<！doctype html>
< html>
< head>
< meta charset =UTF-8>
< title>模态测试< / title>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js>< / script>
<！ - 最新编译和缩小的CSS - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css>
<！ - 最新编译和缩小的JavaScript - >
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js>< / script>
< script>
$（function（）{
//监听链接上的点击
$（'body'）。on（click，。callModal，function（）{
//当用户单击按钮
//获取我们存储在按钮的
中的id //数据属性
var f_id = $（this）.data（'f-id '）;
//注意我们的属性是在html
//中的data-f-id，但是我们通过`.data（'f-id'）`here访问它
//总是离开`data-`off
//将值设置为我们的输入
$（'＃get_hire_id'）。val（f_id）;
//正常链接functionallity
//将正常打开模态
}）;
}）;
< / script>
< / head>
< body>
<？php
for（$ i = 0; $ i< count（$ array_other_new）; ++ $ i）{
echo'< a href =＃login_hire data-toggle =modaldata-f-id ='。$ array_other_new_hire_ids [$ i]。'class =btn btn-large callModal> Hire'。$ array_other_new [$ i] a>';
}
//这里的重要部分是data-f-id ='。$ array_other_new_hire_ids [$ i]。'
//这是我们将php变量存储在链接的data-f-id属性，我们刚刚补了，酷啊？
//还要注意，我们在元素中添加了`callModal`类，所以我们可以轻松地将一个函数绑定到它们后面
？>
<！ - 模态结束------------------------------------- -------------------------------------------------- ------------->
< div class =modal large fadeid =login_hiretabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>×< / button>
< h3> LogIn< / h3>
< / div>
< div class =modal-body>
< form method =postonSubmit =javascript：void（0）>
< span id =status>< / span>
< input type =textid =get_follow_idvalue =>
< input type =textid =get_hire_idvalue =>
取消隐藏以显示设置值< br>
< div class =controls controls-row>
< label class =title>电子邮件*< / label>
< input class =span3type =textplaceholder =Emailid =email/>
< / div>
< div class =controls controls-row>
< label class =title>密码*< / label>
< input class =span3type =passwordid =passplaceholder =Password/>
< / div>
< div class =controls controls-row>
< input type =submitonClick =login（）; return false; value =点击这里登录class =btn/>
< br>
< br>
< a onclick =whenClicked1（）href =javascript：void（0）>还未注册？立即注册< / a> < / div>
< / form>
< / div>
< div class =modal-footer>
< button class =btndata-dismiss =modalaria-hidden =true>取消< / button>
< / div>
< / div>
< / div>
< / div>
<！ - 模态结束------------------------------------- -------------------------------------------------- ------------->
< / body>< / html>
I want to send php variable value to JavaScript popup window. My JavaScript popup Code and PHP code is in the same page. Within this same page, I want to call JavaScript popup with PHP variable value.
So basically I have 2 different PHP variable values in a form of 2 buttons, user can click any button and I want only 1 popup window appears based on the PHP variable value.
Here is what I am doing in code:
<!-- 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>
But my Popup is not appearing if I do something like this href="#login?h_id=123" as shown above. My Popup only appears when it calls like href="#login" without any ?id=123.
Now here is my Bootstrap based popup Code:
<!-- 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 -->
Please propose any working solution.
解决方案 As I understand it,
- you have a page that is created with php
- on this page links/ buttons are created
- when the page is created php has access to an array of ids
- you would like to store these ids with the links/buttons on the finished page in such a way that when a user clicks the link/button a modal appears and the id stored with the clicked button is populated in an input displayed inside the modal
- you would like for all of the links/buttons to use just the one modal
If this is correct, I would use the link/button's data attributes for this. See the comments in the below for details:
NOTE that I had to remove the hide class from your modal div making it like <div class="modal large fade".... as the modal would not appear otherwise
Here's a quick look at what's needed to make this work see below for full code
jQuery
$('body').on("click",".callModal", function() {
var f_id = $(this).data('f-id');
$('#get_hire_id').val( f_id );
});
*Note that the syntax for accessing data('f-id') may vary depending on the version of jQuery you use and/or what browsers you need to support, I believe IE<11 has issues here....but where doesn't it....
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>';
?>
All of the code used in my example:
<?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弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
