Malik Malik - 6 months ago 17
PHP Question

push item to div from list of item div

I have a question. I have for example list of div, i just want all these dives should be clickable. And after click on div, value from div should be pushed to on an other div. How I can do it in a best way?

<?php
define('HOST','xxxx');
define('USER','xxx');
define('PASS','xxxx');
define('DB','xxxxx');

$con = mysqli_connect(HOST,USER,PASS,DB);

$sql = "select * from users";

$res = mysqli_query($con,$sql);
$result = array();

while($row = mysqli_fetch_array($res)){
array_push($result,
array(
'email'=>$row[3],
));
}
echo json_encode(array("result"=>$result));
mysqli_close($con);

?>
<html>
<head>
<style>
#usersOnLine {
font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 525px;
width: 250px;
float: right;
overflow-y:scroll;
}

.container{
width:970px;
height:auto;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<div id="reciver"><h3>reciver</h3></div>
<div id="sender"><h3>sender</h3></div>
<h2 align="right"> all contacts </h2>
<div id="usersOnLine">
<?php
foreach($result as $key => $val)
{
echo $val['email'];
echo "<br>";
}
?>
</div>
</div>
</body>
</html>


here is useronline div in which many name are i want when i click on any name name push to reciver div how to made it i am new in php

Answer

You may do it with a Combination of Javascript and HTML. Below is how:

HTML, CSS & JAVASCRIPT - JQUERY

        <!-- HTML-->
        <html>
        <head>

        <!-- CSS-->
            <style>
                #usersOnLine {
                    font-family:tahoma;
                    font-size:12px;
                    color:black;
                    border: 3px teal solid;
                    height: 525px;
                    width: 250px;
                    float: right;
                    overflow-y:scroll;
                    padding: 10px;
                }

                .container{
                    width:970px;
                    height:auto;
                    margin:0 auto;
                }

                .clickAble{
                    display: inline-block;;
                    cursor:pointer;     /* <== TO INDICATE TO USER THAT THIS IS CLICKABLE... */
                }
            </style>
        </head>

        <!-- HTML CONTENT -->
        <body>
        <div class="container">
            <div id="receiver">
                <h3>receiver</h3>
                <!-- NOTICE THAT THIS IS NEW NOW... -->
                <!-- IT'S IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE -->
                <p class='bubbled-data'></p>
            </div>
            <div id="sender"><h3>sender</h3></div>
            <h2 align="right"> all contacts </h2>
            <div id="usersOnLine">
                <?php
                    foreach($result as $key => $val){
                        echo "<span class='clickAble'>" . $val['email'] . "</span><br />";
                    }
                ?>
            </div>

            <!-- THE FORM -->               
            <form id="messageForm" action = "<?php $_PHP_SELF ?>" method = "POST">
                <input type="text" name="data" id="message" placeholder="message" onFocus="fun1(this)" onBlur="fun2(this)" required="" /><br /><br />
                <!-- NOTICE THAT WE ADDED A HIDDEN FIELD TO HOLD THE DATA -->
                <input type="hidden" name="user_data" id="user_data" value="">
                <input id="send" type="submit" value="Send">
            </form>
        </div>

        <!-- JAVASCRIPT - JQUERY -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">

            (function ($) {
                $(document).ready(function (e) {
                    var receiver    = $("#receiver");
                    var clickAbles  = $(".clickAble");

                    // BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
                    // SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
                    clickAbles.on("click", function(evt){
                        var nameValue       = $(this).text();
                        receiver.find(".bubbled-data").text(nameValue);

                        // ADD THE SAME VALUE TO THE HIDDEN INPUT ELEMENT: #user_data
                        $("#user_data").val(nameValue);
                    });



                });
            })(jQuery);
        </script>

        </body>
        </html>

TEST & FIDDLE WITH IT HERE

https://jsfiddle.net/7eres0L0/

Comments