get child elements inside div ? java script

Question

<div id="mess">
 <h1>Bhashyam School</h1>
 <p>AC Nagar Main Road, Nellore <br>Ho, Nellore - 524001  </p>
 <p class="tel">Telephone: +(91)-9603444376</p>
</div>

<form name="contactform" method="post" action="send.php" onsubmit="this.divcontent.value = document.getElementById('mess').innerHTML;">
    <p>
    <input id="box" type="text" name="telephone" placeholder="Enter Your Mobile Number. ex:988*******"><input type="hidden" name="divcontent" id="divcontent" value="" /> <button type="submit" class="button" value="Submit">Get Sms</button>
    </p>
</form>

Hello Friends we are developing sms form, i want to grab elements h1, p & p class=tel inside of <div id="mess"> when form has been submit (onsubmit event)

What is the correct javascript code to get element inside div tag elements?

provide demo of your code : jsfiddle.net – Dipali Vasani Apr 04 '14 at 06:54 — Dipali Vasani, Apr 04 '14 at 06:54
You want the *elements*, or the text *from* those elements? – David Thomas Apr 04 '14 at 06:57 — David Thomas, Apr 04 '14 at 06:57
why dont you use **hidden** input textbox ?? – Dimag Kharab Apr 04 '14 at 06:57 — Dimag Kharab, Apr 04 '14 at 06:57

TheMohanAhuja · Accepted Answer · 2014-04-04T08:34:08.657

3

Here is a working demo of what you asked

jsfiddle

What I have done is added string to hidden field divcontent inside form

and updated onsubmit of form with

onsubmit="return getChilds();"

HTML

<div id="mess">
    <h1>Bhashyam School</h1>
    <p>AC Nagar Main Road, Nellore <br/>Ho, Nellore - 524001  </p>
    <p class="tel">Telephone: +(91)-9603444376 </p>
</div>

<form name="contactform" method="post" action="send.php" onsubmit="return getChilds();">
    <p>
        <input id="box" type="text" name="telephone" placeholder="Enter Your Mobile Number. ex:988*******"/>
        <input type="hidden" name="divcontent" id="divcontent" value="" /> 
        <button type="submit" class="button" value="Submit">Get Sms</button>
    </p>
</form>

JavaScript

<script type="text/javascript">
    function getChilds()
    {
        var arr=document.getElementById('mess').childNodes, str='';
        for(var i=0; i<arr.length; i++) {
            if(arr[i].innerHTML!=undefined) {
                str+=" "+(arr[i].textContent||arr[i].innerText);
            }
        }
        document.getElementById("divcontent").value=str;
        return true;
    }
</script>

better you should have some input with type hidden so hold such data and which is safe and better way of doing this task.

but why don't you go with jQuery for this, it offers better and cleaner way for doing many stuffs.

edited Apr 04 '14 at 08:34

answered Apr 04 '14 at 07:05

TheMohanAhuja

1,855
2
19
30

where to add your java code in head or onsubmit="?" function getChilds() { var arr=document.getElementById('mess').childNodes; console.log(arr); for(var i=0; i – user2734770 Apr 04 '14 at 07:12
just add this in your html with script, I am updating code. – TheMohanAhuja Apr 04 '14 at 07:14
check this link: http://deluxewebwise.in/lab3/ – user2734770 Apr 04 '14 at 07:23
I guess you didn't noticed I have updated code and fiddle link @user2734770 see latest code it will give you only data out of that. – TheMohanAhuja Apr 04 '14 at 07:24
i want data: Bhashyam School AC Nagar Main Road, Nellore Ho, Nellore - 524001 Telephone: +(91)-9603444376 to be delivered to the number entered in the text area box... – user2734770 Apr 04 '14 at 07:28
can you come on chat http://chat.stackoverflow.com/rooms/50321/dream – TheMohanAhuja Apr 04 '14 at 07:31
i don't have 20 reputation? – user2734770 Apr 04 '14 at 07:32
please help in this.. – user2734770 Apr 04 '14 at 07:32
ohh sorry! I didn't noticed that so what exactly you want here, do you want to combine whole result in one string? – TheMohanAhuja Apr 04 '14 at 07:34
yes , http://deluxewebwise.in/lab3/ – user2734770 Apr 04 '14 at 07:37
see my update code now with fiddle updated and if it helps you don't forget to accept my answer :-) – TheMohanAhuja Apr 04 '14 at 07:39
i want data to be delivered to the mobile number entered. please have a look the form: http://deluxewebwise.in/lab3/ – user2734770 Apr 04 '14 at 07:48
do you want form to be submitted with that string? if yes then have a look at updated code and fiddle. @user2734770 – TheMohanAhuja Apr 04 '14 at 08:27
In the above java code i want childNodes with particular class names (ex:p class="tel", p class="email"),.....that's it – user2734770 Apr 04 '14 at 13:20

score 2 · Answer 2 · answered Apr 04 '14 at 07:37

2

window.onload= function(){
  var elems = [];
  document.forms[0].onsubmit = function(){
    var nodes = document.getElementById('mess').childNodes;
    for (var i = 0 ; i < nodes.length; i++){
      if (nodes[i].nodeType == 1){
          elems.push(nodes[i].innerHTML);
      }
    }
    //console.log(elems);
  }
}

elems contains what u want

answered Apr 04 '14 at 07:37

slier

6,511
6
36
55

how to add this code? – user2734770 Apr 04 '14 at 07:52
@user2734770 this piece of code populate the data into variable `elems` on form submission..what u want to achive? – slier Apr 04 '14 at 07:55
check this link: http://deluxewebwise.in/lab3/ – user2734770 Apr 04 '14 at 07:59
i want data: Bhashyam School AC Nagar Main Road, Nellore Ho, Nellore - 524001 Telephone: +(91)-9603444376 to be delivered to the number entered in the text area box – user2734770 Apr 04 '14 at 08:00
@user2734770 u want all those data into the text input box? – slier Apr 04 '14 at 08:02
data to be delivered to the number entered.. – user2734770 Apr 04 '14 at 08:05
what is the exact code... – user2734770 Apr 04 '14 at 08:11

get child elements inside div ? java script

2 Answers2