Get content of DIV using javascript, .innerHTML not working?

Question

I currently have a jQuery drag and drop, and want to insert the final results in a database. I want to use Javascript to get the values, but I keep getting the result 'NULL', instead of the actual content (generated by PHP/MySQL)

This is my JavaScript

function getValue() {
var ajaxRequest;  // The variable that makes Ajax possible!
try{

  // Opera 8.0+, Firefox, Safari
  ajaxRequest = new XMLHttpRequest();
    }catch (e){

  // Internet Explorer Browsers
  try{
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }catch (e) {

     try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
     }catch (e){

        // Something went wrong
        alert("Your browser broke!");
        return false;
     }
  }
  }

var left1 = document.getElementById('left1').getAttribute('value');
var left2 = document.getElementById("left2").getAttribute('value'); 
var left3 = document.getElementById("left3").getAttribute('value');

 var queryString = "?left1=" + left1 ;
 queryString +=  "&left2=" + left2 + "&left3=" + left3;
  ajaxRequest.open("GET", "http://localhost:8888/ff/public_html/drag_and_drop.php" + queryString, true);
 ajaxRequest.send(null); 
}

PHP Code:

$dinner1 = $_GET['dinner1'];
$dinner2 = $_GET['dinner2'];
$dinner3 = $_GET['dinner3'];

$query2 = "INSERT INTO weekly_print (dinner1, dinner2, dinner3) VALUES ('".$dinner1."','".$dinner2."','".$dinner3."')";
            $result2 = mysql_query ($query2) or trigger_error("Query: $query\n<br />MySQL Error: " . mysql_error());
            if (@mysql_num_rows($result2) != 0) {
                echo 'Success!!';

        }
}

I have tried using it without the getAttrubute('value');, however I kept getting [object HTMLDivElement] as a result.

These are similar questions, but they have not worked for me at all.

how get content of div via javascript
Get content of a DIV using JavaScript
JavaScript innerHTML not working

When using innerHTML I get the result '[object HTMLDivElement]'.

I know I need to change over to mysqli instead of mysql, its on a testing server at the moment, so please ignore that.

My HTML:

<div class="column" id="left1" style="border: 2px solid #a13f80;"></div>
<div class="column" id="left2" style="border: 2px solid #a13f80;"></div>
<div class="column" id="left3" style="border: 2px solid #a13f80;"></div>

Danger: You are using an obsolete database API and should use a modern replacement. You are vulnerable to SQL injection attacks that a modern API would make it easier to defend yourself from. — Quentin
– Quentin, Commented Sep 7, 2015 at 8:49
Div elements don't have values. Your div elements don't have value attributes (which would be invalid anyway) and they don't have any content. What are you trying to get? — Quentin
– Quentin, Commented Sep 7, 2015 at 8:50

Vicky Gonsalves · Accepted Answer · 2015-09-07 08:52:05Z

2

you just need to get values instead of attibutes: document.getElementById('left1').value;

Replace your code with :

var left1 = document.getElementById('left1').value;
var left2 = document.getElementById("left2").value; 
var left3 = document.getElementById("left3").value;

And Convert your div structure to input fields as getting values from div and passing it to php is very non-standard method:

<input class="column" id="left1" style="border: 2px solid #a13f80;" />
<input class="column" id="left2" style="border: 2px solid #a13f80;" />
<input class="column" id="left3" style="border: 2px solid #a13f80;" />

edited Sep 7, 2015 at 8:52

answered Sep 7, 2015 at 8:43

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Fushy Over a year ago

That was the first thing i tried, but my result was [object HTMLDivElement]?

Vicky Gonsalves Over a year ago

Oh you dont have any inputs

Fushy Over a year ago

with document.getElemebetByID() you dont need inputs? Or am i going about this the wrong way?

sebilasse Over a year ago

nothing to do with getElementByID - but only inputs have a .value

Fushy Over a year ago

Can you suggest how i can improve this? @Vicky Gonsalves

|

Dennis · Accepted Answer · 2015-09-07 08:50:51Z

1

Your divs are empty, thats why innerHTML is not working

PS: Can't comment to little points

edited Sep 7, 2015 at 8:50

answered Sep 7, 2015 at 8:47

Dennis

3931 gold badge5 silver badges16 bronze badges

8 Comments

RobG Over a year ago

innerText is non–standard and not supported by all browsers in use. This should have been a comment, not an answer.

Fushy Over a year ago

as previously mentioned var left1 = document.getElementById('left1').value; is not working, i get the result [object HTMLDivElement].

Fushy Over a year ago

@Denni007 They are not empty, they are generated by PHP as they come out of a database.

Dennis Over a year ago

Oh, I can comment my own answer, that's interesting. Sorry but I need 50 reputation vor comments.

Dennis Over a year ago

@Fushy How does the HTML looks like after fill? Can you show the problem with something like codepen?

|

Shailesh Katarmal · Accepted Answer · 2015-09-07 09:01:02Z

-1

USe innerText or textContent attribute to get div text.

left1div = document.getElementById('left1');
var left1divval = left1div.textContent || left1div.innerText;   
alert(left1divval);

See Working Example

edited Sep 7, 2015 at 9:01

answered Sep 7, 2015 at 8:50

Shailesh Katarmal

2,7931 gold badge15 silver badges16 bronze badges

2 Comments

Fushy Over a year ago

I have changed it to this, but now its "undefined"?

Shailesh Katarmal Over a year ago

check the working example... its working fine. there is some other error in your code.

Collectives™ on Stack Overflow

Get content of DIV using javascript, .innerHTML not working?

3 Answers 3

7 Comments

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related