How to pass div value to page using ajax jQuery?

Question

I have one div where timer is set. On submit of page I want div value to insert into database

I am trying to post it using ajax.Here is my code In this , instead of name I want to send div value.

I tried to get value using getElementById but not getting how to pass it. or else there any other way to get div value and store it in database.

here is my code:

<div id="timecounter" >00:05:00</div>

<script>    
    $("button").click(function() {

    $.post("test_post.php", {
            name: "Donald Duck"
        },
        function(data, status) {
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
 </script>

Answer 1

You can use innerHtml property as :-

divObj= document.getElementById("timecounter")

   alert (divObj.innerHTML); 

Refer link click here for all possible scenarios ...

Answer 2

First, find the element. The fastest way is by ID . Next, use innerHTML to get the HTML content of the element.

document.getElementById('timecounter').innerHTML;

Answer 3

Since you mentioned jQuery in both your question tag and title, here's a jQuery-specific solution to your problem:

var timecounter_val = $('#timecounter').html(); // Store HTML of `timecounter` `div` in `timecounter_val` variable.

If you want, you can also use javascript to access HTML of the div element. Here's how you can do that.

var timecounter_val = document.getElementById('timecounter').innerHTML;

Answer 4

you can use $.ajax to do the action. Details on $.ajax or you can use the Details on $.post which you are currently using, just change the code as below

$.post("test_post.php", {
        param: $("timecounter").html()
    },
    function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    });

In server you can access it using the word param

Hope this helps :)