在div中获取子元素? JavaScript的

时间:2014-04-04 06:54:17

标签: javascript php html html5

<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>

您好朋友我们正在开发短信表单,我想抓取元素h1p&amp;表单提交(onsubmit事件)后,p class=tel<div id="mess">

在div标签元素中获取元素的正确javascript代码是什么?

2 个答案:

答案 0 :(得分:3)

以下是您提出的问题的工作演示

jsfiddle

我所做的是将字符串添加到表单

中的隐藏字段divcontent

并使用

更新了表单的onsubmit
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>

更好的是,您应该拥有input类型hidden,因此请保留此类数据,这是执行此任务的安全且更好的方式。

但为什么不和jQuery一起使用它,它提供了更好,更清洁的方法来做很多事情。

答案 1 :(得分:1)

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包含您想要的内容