Я хочу отправить значение переменной php во всплывающее окно JavaScript. Мой JavaScript-код и PHP-код находятся на одной странице. На этой же странице я хочу вызвать всплывающее окно JavaScript с значением переменной PHP.
Таким образом, в основном у меня есть 2 разных значения переменных PHP в форме 2 кнопок, пользователь может нажать любую кнопку, и я хочу, чтобы только 1 всплывающее окно появилось на основе значения переменной 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> Но мой Popup не появляется, если я делаю что-то вроде этого 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 -->
Предложите любое рабочее решение.
Как я понимаю,
Если это правильно, я бы использовал атрибуты данных link / button для этого. Подробнее см. Комментарии ниже:
Вот рабочий пример
Учтите, что мне пришлось удалить класс hide из вашего модального div, сделав его как <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 имеет проблемы здесь … но где doesn Это …
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>