HTML和Javascript;我想在段落中重複我的表單結果

我知道我可能以最不優雅的方式做到這一點，但我仍然是初學者。我想要生成一個用戶表單，用戶可以在其中輸入變量。點擊按鈕時，這些變量出現在段落中的適當位置（Ex .. name，Date）。我將代碼中的一些代碼從一個框複製到另一個框......現在我想創建一個段落，其中變量位於相關句子的中間。HTML和Javascript;我想在段落中重複我的表單結果

<!DOCTYPE html> 
<html lang = "en-US"> 
<head> 
<meta charset = "UTF-8"> 
<title>textBoxes.html</title> 
<script type = "text/javascript"> 


    function sayHi(){ 
    // THIS is WHERE input VARIABLES are set, followed by the OUTPUT 
    //this defines the First Week of Sickness Paid Start Date 
    var BPCName = document.getElementById("BPCName"); 
    var OUTBPC = document.getElementById("OUTBPC"); 
    var name = BPCName.value; 
    OUTBPC.value = " " +name+ "" 
    //This defines the last week of Sickness Benefits Paid 
    var LWPName = document.getElementById("LWPName"); 
    var OUTLWP = document.getElementById("OUTLWP"); 
    var name = LWPName.value; 
    OUTLWP.value = " " +name+ "" 
    //This defines Total Weeks of Sickness Benefits Paid 
    var TWSPName = document.getElementById("TWSPName"); 
    var OUTTWSP = document.getElementById("OUTTWSP"); 
    var name = TWSPName.value; 
    OUTTWSP.value = " " +name+ "" 
    // This Defines the Date the Medical Was received 
    var MEDRName = document.getElementById("MEDRName"); 
    var OUTMEDR = document.getElementById("OUTMEDR"); 
    var name = MEDRName.value; 
OUTMEDR.value = " " +name+ "" 
//This Defines the Medical Provider 
    var MEDPName = document.getElementById("MEDPName"); 
    var OUTMEDP = document.getElementById("OUTMEDP"); 
    var name = MEDPName.value; 
    OUTMEDP.value = " " +name+ "" 
// THis Defines the Date of Incapacity indicated on the Medical 
    var INCName = document.getElementById("INCName"); 
    var OUTINC = document.getElementById("OUTINC"); 
    var name = INCName.value; 
    OUTINC.value = " " +name+ "" 

    } // end sayHi 
</script> 
<link rel = "stylesheet" 
    type = "text/css" 
    href = "textBoxes.css" /> 
</head> 
<body> 
<h1>Automatic</h1> 
<form action = ""> 
    <fieldset> 
    <label>Start Date: </label> 
    <input type = "text" 
    id = "BPCName" /> 
    <input type = "button" 
    value = "click me" 
    onclick = "sayHi()"/> 
    <input type = "text" 
    id = "OUTBPC" /> 
    </fieldset> 
</form> 

    <form action = ""> 
    <fieldset> 
    <label>Last Week of Benefits Paid: </label> 
    <input type = "text" 
    id = "LWPName" /> 
    <input type = "button" 
    value = "click me" 
    onclick = "sayHi()"/> 
    <input type = "text" 
    id = "OUTLWP" /> 
    </fieldset> 

     <form action = ""> 
    <fieldset> 
    <label>Total Weeks of Sickness Benefits Paid: </label> 
    <input type = "text" 
    id = "TWSPName" /> 
    <input type = "button" 
    value = "click me" 
    onclick = "sayHi()"/> 
    <input type = "text" 
    id = "OUTTWSP" /> 

      <form action = ""> 
    <fieldset> 
    <label>Date Medical Received: </label> 
    <input type = "text" 
    id = "MEDRName" /> 
    <input type = "button" 
    value = "click me" 
    onclick = "sayHi()"/> 
    <input type = "text" 
    id = "OUTMEDR" /> 
      <form action = ""> 

    <fieldset> 
    <label>Name of Practitioner: </label> 
    <input type = "text" 
    id = "MEDPName" /> 
    <input type = "button" 
    value = "click me" 
    onclick = "sayHi()"/> 
    <input type = "text" 
    id = "OUTMEDP" /> 
     <form action = ""> 

    <fieldset> 
    <label>Date of Incapacity Indicated on Medical: </label> 
    <input type = "text" 
    id = "INCName" /> 
    <input type = "button" 
    value = "click me" 
    onclick = "sayHi()"/> 
    <input type = "text" 
    id = "OUTINC" /> 
     <form action = ""> 
    </fieldset> 
</form> 

    <h2> Example Document</h2> 

    <p>The client was sent an EForm form requesting submission of original medical to confirm eligibility for benefits. 
The client was paid XXXXX weeks of benefits during the period XXXX to XXXXX 

The client submitted an original doctor’s note signed by XXXX dated XXX 
Claimant notified in writing that claim is on order. 
The medical addresses all weeks in which sickness benefits were paid. 
</P> 
</html>

來源

2014-11-06 Ojay

使用示例進行說明plz – chaitanya90 2014-11-06 17:56:52

您是否正在尋找代碼的最後一位用戶輸入替換段落？ – chaitanya90 2014-11-06 17:59:42

這是正確的。我希望輸入顯示在代碼末尾的段落 – Ojay 2014-11-06 18:14:28

下面是使用jQuery和正則表達式的例子：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Replace example</title> 
</head> 
<body> 
    <p id="text">Hello, my name is {{ name }}.</p> 
    <p> 
     <form> 
      <input type="text" id="name" value="Sally"> 
     </form> 
     <button id="name-button">Replace</button> 
    </p> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     // Replace {{ name }} when the user clicks the button 
     $('#name-button').click(function() { 
      var currentText = $('#text').html(); 
      var name = $('#name').val(); 
      var newText = currentText.replace(/{{ name }}/, name) 
      $('#text').html(newText); 
     }); 
    }); 
    </script> 
</body> 
</html>

這裏的一個demo。

來源

2014-11-06 18:10:22

由Joseph回答..這是在JQuery中做到這一點的方式。但是，建議的解決方案一次替換一個模式，這意味着您將不得不再次單擊該按鈕來替換具有相同模式的其他字符串（如果有的話）。

它像：（採用約瑟夫的代碼來說明）

<!DOCTYPE html> 
<html> 
<head> 
    <title>Replace example</title> 
</head> 
<body> 
    <p id="text">Hello, my last name is {{ name }}. Also my father's last name is {{ name }}.</p> <!-- Don't mind the sentence --> 
    <p> 
     <form> 
      <input type="text" id="name" value="Sally"> 
     </form> 
     <button id="name-button">Replace</button> 
    </p> 
</body> 
</html>

所有你要做的就是全局搜索他們可以通過傳遞全局標誌是/g來完成。所以Jquery的變爲：

var newText = currentText.replace(/{{ name }}/g, name)

一切都是一樣的約瑟夫的只是一點點修改。

來源

2014-11-06 19:01:45 chaitanya90

非常感謝。我現在唯一的問題是，我無法獲得'code'$（'＃name-button'）on（'click'，function（）{來工作 – Ojay 2014-11-08 21:13:40

你把它放在document.ready中嗎？例如$（document）.ready（function（）{$（'＃name-button'）。on（'click'，function（）{}）;}）; – chaitanya90 2014-11-09 04:28:13

HTML和Javascript;我想在段落中重複我的表單結果

回答

相關問題