Is it possible to pass parameters in JQuery popup box?

Question

Is it possible to pass parameters in JQuery popup box??

there has two file form.php <--The user will fill in the form like username. when the form sumbit, it have a JQUERY pop up box to show his username that is the user fill in the form.

THX My html code

<form method="get" onsubmit="return false;">
    First name:<br>
    <input name="firstname" type="text"><br>
    <br>
    <input type="submit" value="Submit" onclick="popupfunctioncall();">
</form>
<div class="popup-container">
    <div class="popup-play"></div>
    <div class="pop-popup white_content" id="light">
        <div class="popup-close">
            <span><font size="5">x</font></span>
        </div><?php 
        echo $_GET["firstname"];

        ?>
    </div>
    <div class="black_overlay" id="fade"></div>
</div>

MY Css code

.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);}

.white_content {
display: none;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 500px;
width: 600px;
background-color: #ffffff;
z-index: 1002;
background-color: #fff;
z-index: 1002;
overflow: auto;
text-align: center;}

.popup-close {
position: absolute;
top: -2px;
right: 7px;}

My Javascript code

function popupfunctioncall(){
    $('#light').fadeIn(600);
    $('#fade').fadeIn(600);
}

    $(document).on('click','.popup-close',function(){
    $('#light').fadeOut(600);
    $('#fade').fadeOut(600);
});

_Is it possible_ Answer is __Yes__. Now don't ask How. For that you need to share some code — Satpal, Oct 30 '17 at 07:17
Possible duplicate https://stackoverflow.com/questions/394491/passing-data-to-a-jquery-ui-dialog — keysl, Oct 30 '17 at 07:26

Varun Vardhan · Answer 1 · 2017-10-30T07:48:50.883

0

Please look below example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function popupfunctioncall(){
alert($('#username').val()+"/"+$('#color_name').val() );// you can user your popup here 
}
</script>
</head>
<body>
    <form>
    <input type="text" name="username" id="username">
    <input type="text" name="color" id="color_name">
    <input type="submit" name="cub" value="submit"onclick="popupfunctioncall()">
    </form>
</body>
</html>

edited Oct 30 '17 at 07:48

answered Oct 30 '17 at 07:43

Varun Vardhan

33
5

THX, It is work for use alert function, but....not work in jquery pop up box function..... I upload the code from the topic. – francoleung Oct 30 '17 at 09:01

score 0 · Answer 2 · answered Oct 30 '17 at 09:54

First, you better to set an ID to the font tag inside the popup window like this.

<span><font id='content' size="5">x</font></span>

Then you can get the input value and set popup content as follow.

function popupfunctioncall(){
    var firstname = $("input[name='firstname']").val();
    $('#content').html(firstname);

    $('#light').fadeIn(600);
    $('#fade').fadeIn(600);
}

Hope this help.

Is it possible to pass parameters in JQuery popup box?

2 Answers2