如何根据用户输入 HTML 更新多个 SPAN 元素
how to update several span elements based on user input HTML
我有一个巨大的表单,至少有 200 个输入字段 - text/radio/checkboxes
.
我将其分为几个部分以使其结构良好,并且每个部分都有一个更新按钮,该按钮接受用户输入并将其保存到数据库中。这是由 Ajax 完成的,所以我不必重新加载页面。
如何在不重新加载页面的情况下,使用用户输入的任何内容轻松更新与输入字段对应的<span>
?我是否必须对每个<span>
项目进行$("#spanid").html($("#input1").val())
,或者有没有简单的方法可以做到这一点?
下面是表单一小部分的代码。
.HTML
<form id="history" name="history" action="" method="post">
<table class="normal">
<tr><th colspan="8">HISTORY</th>
</tr>
<tr><td style="width:200px"><b>Chief Complaint Location</b></td>
<td style="width:450px"><b>Comment</b></td>
<td><b> Previous</b> </td>
</tr>
<tr><td>Head</td>
<td ><input type="text" maxlength="100" name="headH" id="headH" ></td>
<td class="data2"><span id="headSpan"><%=msmtCommentHead%></span></td>
</tr>
<tr><td>Neck</td>
<td><input type="text" maxlength="100" name="neckH" id="neckH" ></td>
<td class="data2"><span id="neckSpan"><%=msmtCommentNeck%></span></td>
</tr>
<tr><td>Upper Extremeties</td>
<td><input type="text" maxlength="100" name="upperExtremetiesH" id="upperExtremetiesH"></td>
<td class="data2"><span id="ueSpan"><%=msmtCommentUpperExtremeties%></span></td>
</tr>
<tr><td>Thoracic Spine</td>
<td><input type="text" maxlength="100" name="thoracicSpineH" id="thoracicSpineH"></td>
<td class="data2"><span id="tsSpan"><%=msmtCommentThoracicSpine%></span></td>
</tr>
<tr><td><input type="button" id="submitHistory" value="Update"/></td></tr>
</table>
</form>
Javascript:
$(function(){
$("#submitHistory").click(function() {
var query = $("#history").serialize();
$.ajax( {
type: "POST",
url: "/oscar/cmcc/History.do",
dataType: "json",
data: query
});
document.getElementById('history_cmcc').reset();
var date = new String("<%=date%>");
$("#headSpan").innerHTML = $("#headH").val()+ "," + date;
$("#neckSpan").innerHTML = $("#neckH").val() + ","+ date;
$("#tsSpan").innerHTML = $("#thoracicSpineH").val() + ","+ date;
$("#lsSpan").innerHTML = $("#lumbarSpineH").val() + ","+ date;
$("#leSpan").innerHTML = $("#lowerExtremetiesH").val() + ","+ date;
$("#chSpan").innerHTML = $("#chestHeartH").val() + ","+ date;
}
谢谢!
一般来说,你可以这样做:
$('input[type=text]').each(function() {
$(this).closest('tr').find('span').html($(this).val());
});
$('input:checked').each(function() {
$(this).closest('tr').find('span').html($(this).val());
});
每个 OP 注释的更新:
在您的示例中,如果要将单选按钮左侧的标签放在跨度内,则可以执行此操作。 这取决于您的具体要求。
$('input[type=radio]:checked').each(function() {
$(this).closest('tr').find('span').html($(this).closest('tr').find('td:eq(0)').text());
});
$(':input').each(function() {
$(this).closest('tr').find('span').html(this.value);
});
:input
应用于所有输入。也可以使用input
。
相关文章:
- 使用jquery将单个换行符替换为span元素
- 用于检索span元素内容的JavaScript
- 如何使动态树标题中的span元素可点击
- 如何在使用 fancybox 时从这个 span 元素制作一个 javascript 变量
- Javascript正则表达式:从头到尾将span元素与某个类进行匹配
- 找到最近的span元素并更改CSS类
- 如何为span元素添加/删除类onclick
- 如何使用 JQuery 检索具有特定类的 span 元素中的文本,该元素位于单击的对象内
- 鼠标悬停在一个 span 元素上多次触发
- 在 for 循环内分组并根据样式属性修改 span 元素
- 如何使用jQuery获取后代span元素
- 如何根据用户输入 HTML 更新多个 SPAN 元素
- 如何在单词周围添加 span 元素
- 从上一个 span 元素中获取样式
- 检查 span 元素是否包含“文本”,并且是父元素的最后一个子元素
- 尝试将 span 元素的值输入到数据库中
- 如何使用 jQuery 设置 span 元素的内部 HTML
- Span元素不从jQuery运行动画
- Javascript更改所有span元素的innerHTML
- 纯Javascript可以获取所有span元素,但可以通过定义的类进行特定的编辑