如何将变量数据放入div Jquerymobile中

时间:2017-02-15 19:46:33

标签: javascript html forms

我正在尝试从我的表单中获取变量并将它们放在div中但由于某种原因它不起作用,请帮助 出于某种原因,我这样做的方式适用于普通的HTML页面,所以我不知道如何让它适用于Jquery移动页面

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="../jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="../jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="../jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="../jquery-mobile/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>
<div data-role="page" id="page_home">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview">
      <li><a href="#page_form">Form</a></li>
      <li><a href="#page_div">Div</a></li>
      <li><a href="#page_info">Info</a></li>
    </ul>

  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

<div data-role="page" id="page_form">
  <div data-role="header">
    <h1>Header</h1>
    <a href="#back" data-icon="back" data-rel="back" data-role="button">terug</a>

  </div>
  <div data-role="content">
  <form id="filldiv">
    <input type="text" id="div1" /> 
    <input type="text" id="div2" /> 
    <input type="text" id="div3" /> 
    <button onclick="ChangeText(); return false;">Submit</button>
  </form>l
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

<div data-role="page" id="page_info">
  <div data-role="header">
    <h1>Header</h1>
    <a href="#back" data-icon="back" data-rel="back" data-role="button">terug</a>
  </div>
  <div data-role="content">
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

<div data-role="page" id="page_div">
  <div data-role="header">
    <h1>Header</h1>
    <a href="#back" data-icon="back" data-rel="back" data-role="button">terug</a>
  </div>
  <div data-role="content">
    <div class="empty" id="Div5">
    Text goes here
    </div>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

</body>
</html>

Javascript代码:

function ChangeText()
{
            // Plaats de tekst in de pagina
            var test1 = document.getElementById('div1').value;
            var test2 = document.getElementById('div2').value;
            var test3 = document.getElementById('div3').value;
            var test = test1 + "</br>" + test2 + "</br>" + test3;
            document.getElementById('Div5').innerHTML = test;
}

2 个答案:

答案 0 :(得分:1)

在所选元素/ div上使用innerHtml或text而不是value。

答案 1 :(得分:0)

此问题可能重复:javascript- function not defined error

试试这个:

&#13;
&#13;
<div data-role="page" id="page_form">
      <div data-role="header">
        <h1>Header</h1>
        <a href="#back" data-icon="back" data-rel="back" data-role="button">terug</a>

      </div>
      <div data-role="main">
      <form id="filldiv">
        <input type="text" id="div1" /> 
        <input type="text" id="div2" /> 
        <input type="text" id="div3" /> 
        <button onclick="ChangeText(); return false;">Submit</button>
      </form>l
      </div>
      <div data-role="footer">
        <h4>Footer</h4>
      </div>
      <div data-role="page">
        <script>
            function ChangeText()
            {
              // Plaats de tekst in de pagina
              var test1 = document.getElementById('div1').value;
              var test2 = document.getElementById('div2').value;
              var test3 = document.getElementById('div3').value;
              var test = test1 + "</br>" + test2 + "</br>" + test3;
              document.getElementById('Div5').innerHTML = test;
            }
        </script>
        <!-- the rest of your stuff -->
    </div>
&#13;
&#13;
&#13;