更改文本框时传递隐藏 ID答案

【问题标题】：Pass hidden ID when textbox is changed更改文本框时传递隐藏 ID
【发布时间】：2012-11-25 07:45:32
【问题描述】：

我有多个文本框，每个文本框都有一个相关的隐藏字段，隐藏字段的 ID 是字符串与模型 ID 的串联（例如：“FormState25”）

如何在更改文本框时传递隐藏字段的 ID？我正在使用以下代码来检测文本框的变化：

$("#body-content-container").on('change', 'input[type="text"]', function () {
    $("#FormState").val('dirty');
});

【问题讨论】：

你想把ID传到哪里？回到控制器？
我想先修改隐藏字段的值，例如，在提交表单到控制器之前，使用Javascript从'Unchanged'变为'Modified'。
ID 是否来自您的文本输入元素？在这种情况下是“25”吗？
你想对盒子的持有状态做什么？让我知道可以帮助你。
不，这些文本框代表主对象的子对象，它们的 id 类似于：VehicleModels_56998496-6f3f-4667-9c6b-339895b67c58__Name

标签： c# jquery asp.net-mvc asp.net-mvc-3

【解决方案1】：

您可以将自定义属性添加到包含隐藏字段ID的文本框标签本身，例如：

可见

@Html.TextBoxFor(model => model.Name, new { HiddenFieldId = "FormState" + Model.Id })

这样，当文本框发生更改时，您可以获得已用于存储任何内容的隐藏字段的 ID，然后修改 javascript 以处理该隐藏字段的 ID，如下所示：

Javascript

$("#body-content-container").on('change', 'input[type="text"]', function () {
    var hiddenId = $(this).attr("HiddenFieldId");
    $("#" + hiddenId).val('dirty');
});

javascript 将从文本框中获取相应隐藏字段的HiddenFieldId 属性并更改其值。试试这个，让我知道..

【讨论】：

【解决方案2】：

您可以使用this 来引用定义匿名函数的元素，例如：

$("#body-content-container").on('change', 'input[type="text"]', function () {
    $("#FormState" + this.attr('id')).val('dirty');
});

【讨论】：

文本框的 Id 不是隐藏字段 Id 的子项
嗯，你需要以某种方式将它们联系在一起。如果您的 ID 有标准命名约定，那么您应该能够找到相关字符串作为子字符串。更好的是，如果您在循环中构造元素，则可以使用循环索引来构造 ID。祝你好运！

【解决方案3】：

试试这个：

$("input[type=text]").click(function(){
     var hiddenId = "FormState" + $(this).attr("Id");
     var hiddenField = $("#" + hiddenId);
     hiddenField.val("dirty");
});

编辑：

如果您的隐藏字段在您的输入框之后呈现，那么您可以执行以下操作：

$("input[type=text]").click(function(){        
     var hiddenField = $(this).next();
     hiddenField.val("dirty");
});

希望这会有所帮助。

【讨论】：

问题是texbox id与隐藏字段的id不同，因为texbox是使用TextboxFor扩展创建的，而隐藏字段不是模型的属性，所以它是使用隐藏扩展创建的，所以生成的 id 就像：VehicleModels_56998496-6f3f-4667-9c6b-339895b67c58__Name 和 FormState25 分别用于文本框和隐藏字段
前面带有隐藏字段的文本框怎么样？这样搜索元素的时间复杂度也较低！
输入框和隐藏的顺序是不是顺序？

【解决方案4】：

这是我过去使用的另一个技巧。将两个相关的输入字段括在 div（或其他）元素中。然后使用文本字段和隐藏字段是兄弟的事实来选择正确的隐藏字段。也许是这样的（注意：我没有测试过这个例子）：

<div id="someId">
  <input type="hidden" value="unchanged" />
  <input type="text" value="some data" />
</div>

<script type="text/javascript">
  var hiddenInput = $('#someId input:first')
  var textInput = $('#someId input:last')

  textInput.on('change', function() {
    hiddenInput.val('modified');
  });
</script>

【讨论】：