CODEWITHSUNDEEP
javascriptphpjqueryajax
user3055639
user3055639

Reputation: 69

How to save DIV content to MySql

How can i save the content of a DIV in MySql ?

I have the scripts that connect the index.php with mydata_post.php where i call the data to be saved in MySql.

Now the problem is where i try to save the data after getting displayed in a DIV i get empty content in MySql Table.

The script works if i call from an Input instead a Div.

The Div content that i want to save are in:

<form name="form1" method="POST" action="mydata_post.php">


<div id="name2" name="name"></div>
<div id="lastname2" name="lastname"></div>

<input type="submit" name="Submit" value="Submit">


</form>

Any one can help, where it can be the mistake?

    <!DOCTYPE html>
    <html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
        <head>
            <meta charset="utf-8" />

            <link href="main.css" rel="stylesheet" type="text/css" />
        </head>
        <body>


<form name="form1" method="POST" action="mydata_post.php">


<div id="name2" name="name"></div>
<div id="lastname2" name="lastname"></div>

<input type="submit" name="Submit" value="Submit">


</form> 
            <center>
                <h1>Authorization step:</h1>
                <div id="user-info"></div>
                <button id="fb-auth">Please login here</button>
            </center>

            <div id="result_friends"></div>
            <div id="fb-root"></div>

            <script>
            function sortMethod(a, b) {
                var x = a.name.toLowerCase();
                var y = b.name.toLowerCase();
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            }

            window.fbAsyncInit = function() {
                FB.init({ appId: '<?= $sApplicationId ?>',
                    status: true,
                    cookie: true,
                    xfbml: true,
                    oauth: true
                });

                function updateButton(response) {
                    var button = document.getElementById('fb-auth');

                    if (response.authResponse) { // in case if we are logged in
                        var userInfo = document.getElementById('user-info');
                        var myname = document.getElementById('name2');



                        FB.api('/me', function(response) {
                            myname.innerHTML = response.name;

                            userInfo.innerHTML = '<img name="userimage" src="https://graph.facebook.com/' + response.id + '/picture">'+ "<br> Your Name:" + response.name + "<br> Your ID:" + response.id ;
                            button.innerHTML = '<div id="logout_bt">Logout</div';
                        });

                    // get friends
                    FB.api('/me/friends?limit=<?= $iLimit ?>', function(response) {
                        var result_holder = document.getElementById('result_friends');
                        var friend_data = response.data.sort(sortMethod);

                        var results = '';
                        for (var i = 0; i < friend_data.length; i++) {
                            results += '<div><img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">' + friend_data[i].name + "<br> Your ID:" + friend_data[i].id + '</div>';
                        }

                            // and display them at our holder element
                            result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;
                        });

                    FB.api('/me/friends?limit=<?= $iLimit ?>', function(response) {
                        var id_holder = document.getElementById('lastname2');
                        var id_data = response.data.sort(sortMethod);

                        var id_results = '';
                        for (var i = 0; i < id_data.length; i++) {
                            id_results += '<div> ' + id_data[i].id + '</div>';
                        }

                            // and display them at our holder element
                            id_holder.innerHTML = '<h2>Result list of your friends:</h2>' + id_results;
                        });


                        button.onclick = function() {
                            FB.logout(function(response) {
                                window.location.reload();
                            });
                        };
                    } else { // otherwise - dispay login button
                        button.onclick = function() {
                            FB.login(function(response) {
                                if (response.authResponse) {
                                    window.location.reload();
                                }
                            }, {scope:''});
                        }
                    }
                }

                // run once with current status and whenever the status changes
                FB.getLoginStatus(updateButton);
                FB.Event.subscribe('auth.statusChange', updateButton);
            };

            (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
            }());
            </script>

    </body>
    </html>

mydata_post.php - File

 <?php

    $host=""; // Host name
    $username=""; // Mysql username
    $password=""; // Mysql password
    $db_name=""; // Database name
    $tbl_name=""; // Table name

    // Connect to server and select database.
    mysql_connect("$host", "$username", "$password")or die("cannot connect");
    mysql_select_db("$db_name")or die("cannot select DB");

    // Get values from form
    $name=$_POST['name'];
    $lastname=$_POST['lastname'];
    $email=$_POST['email'];

    // Insert data into mysql
    $sql="INSERT INTO $tbl_name(name, lastname, email)VALUES('$name','$lastname','$email')";
    $result=mysql_query($sql);

    // if successfully insert data into database, displays message "Successful".
    if($result){
    echo "Successful";
    }

    else {
    echo "ERROR";
    }

    ?>

Upvotes: 1

Views: 5282

Answers (3)

Sankar
Sankar

Reputation: 652

Follow the below code

<div id="name">
    <span>hi</span>
</div>

<input type="button" onclick="test()" value="click"/>

Below is jquery 

<script>
function test(){
var a=$('#name').html();
alert(a);
}
</script>

JSFiddle link demo

Get that value from jquery and then assign that string value into textarea. After that get $_POST['textarea'] value for insert into MYSQL.

Upvotes: 1

Ryan Willis
Ryan Willis

Reputation: 624

You would have to create a hidden input like this:

<input type=hidden name=name />

And call a wrapping submit function in the form's onsumbit attribute before it POSTs to put the data from the div into the hidden field.

<form name="form1" method="POST" action="mydata_post.php" onsubmit="moveData();">

<script>
function moveData(){
var data = document.getElementById('divNameID').innerHTML;
var form = document.getElementsByName('form1')[0];
form['name'].value = data;
}
</script>

As a side note, you're also going to want to clean your strings and switch to PDO or mysqli to prevent SQL injection.

Upvotes: 0

user4035
user4035

Reputation: 23749

You must use inputs, not divs in order to pass their contents through form. This won't work:

<div id="name2" name="name"></div>

This will:

<input type="text" name="name" value="" />

Also, you are missing "email" input in your HTML, while using it in mydata_post.php. So you must use something like this:

<form name="form1" method="POST" action="mydata_post.php">

<input type="text" id="name2" name="name" value="" />
<input type="text" id="lastname2" name="lastname" value="" />
<input type="text" id="email2" name="email" value="" />

<input type="submit" name="Submit" value="Submit">

</form>

Also remember to escape your data before using it in SQL request with mysql_real_escape_string. Or switch to PDO or mysqli and use prepared statements.

Upvotes: 1

Related Questions