CODEWITHSUNDEEP
phpjavascriptajaxjquery
Madurai
Madurai

Reputation: 297

How to get dynamically created javascript div id by jquery and store in php?

var count=0;
    function createOne() {
        var divTag = document.createElement("div");

dynamically created div

        var br= document.createElement("br");
        count++;
        divTag.id = "div1"+count;

Id increment +1

        divTag.setAttribute("align", "center");

        divTag.style.margin = "0px auto";
        divTag.style.width="430px";
        divTag.style.height="35px";
        divTag.style.background="olive";
        divTag.className = "dynamicDiv";

        divTag.innerHTML = "This HTML Div tag created "
                            + "using Javascript DOM dynamically.";

        document.body.appendChild(divTag);
           document.body.appendChild(br);
    }

> Need to save in php using Jquery.

<body>
    <h1 align="center">
    Click it
    <input type="button" id="dev" onClick="createOne()" value="GET">
    </h1>
</body>

Upvotes: 1

Views: 3215

Answers (5)

David Barker
David Barker

Reputation: 14620

** Using jQuery **

 // Within your createone() function 

 // Location of your PHP file
 var url = 'savemyvar.php';

 $.post(url, { div : divTag.id }).success(function(data, status, xhr)
 {
     // Do something on success
 }).error(function(data)
 {
     // Do something on error
 });

Info on $.post a helper function for $.ajax

$.ajax documentation This will send your divTag object to the PHP script that you can use 

$_REQUEST['div']

to access.

Upvotes: 1

Iftah
Iftah

Reputation: 9572

I suggest you post the data by Ajax 

createOne = function() {
     var $div = $('#div1'+count);
     $.ajax({
        type: "POST",
        url: "some.php",
        data: { id: "div1"+count, html: $div.html() }
     }).done(function( msg ) {
        alert( "Data Saved: " + msg );
     });

}

Upvotes: 1

iambriansreed
iambriansreed

Reputation: 22241

If you are using jQuery then use it. Convert your function to jQuery and use jQuery's ajax functions.

JavaScript

jQuery(function($){

    $('#dev').click(function(){ createOne(); });

    window.count = 0;
    function createOne() {

        var new_id = 'div1' + (++count);

        $('body').append('<div class="dynamicDiv" id="' + new_id + '" style="margin: 0px auto; width: 430px; height: 35px; background-color: olive;">This HTML Div tag created using Javascript DOM dynamically.</div><br/>');    

        $.get('/div-id-saver.php', { 'id': new_id }, function(response){  
            console.log('post response:' + response);
        });

    }

});

HTML

<body>
    <h1>
    Click it
    <input type="button" id="dev" value="GET">
    </h1>
</body>

More info: http://api.jquery.com/category/ajax/shorthand-methods/

Upvotes: 1

JoDev
JoDev

Reputation: 6873

In the ajax call, the data will look like:

var mydata = new Array ();
$("div[id^='div']").each (function (){
       mydata.push ({$(this).attr ("id") : $(this).text ()});
});

I use the text of the div as the value, but you can change it to your needs...

Upvotes: 1

webnoob
webnoob

Reputation: 15934

In your createOne() function, you can do an AJAX post back to a PHP script passing through the ID of the element you just created.

You can find more information on JQuery's AJAX here

You haven't specified what you want to do with the information or when so this should help to get started.

Upvotes: 1

Related Questions