HTML在下面的标签中显示输入结果

时间:2017-09-13 14:52:25

标签: javascript jquery html css

我目前允许用户在表单中输入这些选项,在每个元素下我想在每个元素下面放置一个p标签,这个数据类似于此

Radio: Review/Change
Policy Number: 123545
Last Name: Smith
First Name: Bob
Comments: bob is nice.

这是我当前的输入。

<div class ="radio">
        <input type="radio" name="type" value="R" /> Review/Change<br/>
        <input type="radio" name="type" value="N" />New Business <br/>
        <input type="radio" name="type"  value="H" />Hold/Trial <br/>
        <input type="radio" name="type"  value="B" /> Brokerage <br/>
    </div>
    <div class="information">
        <p> Policy Number: <input id="polNum" name="polNum" type="text"/></p>

        <p>Control Number:<input id="membNbr" name="membNbr" type="text"/></p>

        <p>Last Name or Business Name: <input id="lastName" name="lastName"  type="text"/></p>

        <p>First Name:<input id="firstName" name="firstName" type="text"/></p>

        <p>Comments:
            <textarea name="comment" id="comment" cols="30" rows="2"></textarea></p>

    </div>`

1 个答案:

答案 0 :(得分:1)

以下是如何对单选按钮和文本框执行此操作的示例。

&#13;
&#13;
function displayRadioSelection(radioValue) {

  document.getElementById("display_radioSelection").innerHTML = radioValue;
}

function displayPolicyNumber() {
  document.getElementById("display_policyNumber").innerHTML = document.getElementById("polNum").value;
}
&#13;
.display {
  color: blue;
  font-size: small;
}
&#13;
<div>
  <input type="radio" name="type" value="R" onclick="javascript: displayRadioSelection(this.value)" /> Review/Change<br/>

  <input type="radio" name="type" value="N" onclick="javascript: displayRadioSelection(this.value)" /> New Business
  <br/>

  <input type="radio" name="type" value="H" onclick="javascript: displayRadioSelection(this.value)" /> Hold/Trial
  <br/>

  <input type="radio" name="type" value="B" onclick="javascript: displayRadioSelection(this.value)" /> Brokerage
  <br/>

  <span class="display" id="display_radioSelection" />
</div>

<div>
  Policy Number:
  <input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" />
  <br/>
  <span class="display" id="display_policyNumber" />
</div>
&#13;
&#13;
&#13;