javascript - 将动态文本插入表单标题

Question

我有一个多页表单，并想更改每页上的标题以反映插入在表单第一页上的 projectID

<div data-role="page" id="chapter1">
  <div data-role="header">
  <h1>Site Information ***(<!--want ProjectID entered here-->)*** <h1>
 </div><!--/header-->


 <div data-role="content">
 <Fieldset>
   <div class="_50">
     Project ID:<input type="text" name="ProjectID"> ***<!--ProjectID entered here-->***  
   </div> 
 <div class="_50">
    Project Name:<input type="text" name="ProjectName">
   </div>


<div data-role="page" id="chapter2">
 <div data-role="header">
 <h1>Samples Collected ***(<!--want ProjectID entered here-->)*** </h1>
 </div><!--/header-->

 <div data-role="content">

由于不熟悉创建网络表单，我不知道如何完成这项任务。协助将不胜感激

Answer 1

向您的 h1 字段添加一个类或 id，然后将其用于：

$('#id_of_element).text('Your text to insert');

或者，如果 h1 在每个 上都是唯一的#chapter：

$('#chapter1 h1, #chapter2 h1').text('Your text to insert');

Answer 2

尝试这个：

$("h1").html( $("h1") + " " + $("#ProjectID").val() )

Answer 3

动态更改页眉、页脚和内容的正确方法是.trigger('pagecreate')在将标记附加到页面后使用。

基本页面解剖

<div data-role=page>
 <div data-role=header></div>
 <div data-role=content>stuff</div>
</div>

jQuery 移动

用新标题替换旧标题。

$('[data-role=header]').html('<div data-role=header><h1>new header</h1></div>');

增强新标记。

$('[data-role=page]').trigger('pagecreate');

演示

Answer 4

将动态文本插入表单标题- 试试这种方式

 $("input[name='ProjectID']").on('keyup',function(){
     var val = $(this).val();
     var h = $(this).closest("div[id^='chapter']").find("div[data-role='header']").find("h1");
     $(h).html( $(h).html() + " " + val);
 });

Answer 5

第一个分配给标题的 id

  <div data-role="header">
   <h1 id="header_content">Site Information ***(<!--want ProjectID entered here-->)***     <h1>

集 ID 的脚本代码

 var projectId=111;
 $('#header_content').html('Site Information ***('+projectId+')***');