jquery - JQuery 自动更新隐藏输入

Question

我想用正在输入的值更新隐藏的输入。

如果您在名称文本输入框中输入“Foo Bar”，我希望隐藏的 item_name 变为“向 Foo Bar 应用费用”

<input type="text" class="input-xlarge" id="name" name="name" id="appendedInputButton" placeholder="Studnet's Name">
<button type="submit" class="btn btn-primary" >Next</button>
 <script type="text/javascript">
$("#name").on("keyup change", function() {
var value = this.value; 
<input type="hidden" name="item_name" value="Apply Fee to ". $("#dom_element").text(value); /> 
});
 </script>

Answer 1

<input type="text" class="input-xlarge" id="name" name="name"  placeholder="Studnet's Name" />

<input id="myHidden" type="hidden" name="item_name"  /> 

<button type="submit" class="btn btn-primary" >Next</button>
 <script type="text/javascript">
     $("#name").on("keyup", function() {
     var value = $(this).val();
     $("#myHidden").val("Apply Fee to " + value); 
   });
 </script>

Answer 2

对新手来说更具可读性：D

$('#name').on('keyup', function() {
    var hidden_input = $('#your_hidden');
    var prepend_txt = 'Apply Fee to';
    var name_val = $(this).val();
    hidden_input.val(prepend_txt+' '+name_val);
});

Answer 3

您不能在脚本代码中添加这样的标签。您可以看到调试控制台按 F12 以查看这实际上是无效的。这样的事情必须解决问题：

<input type="text" id="studentname" class="input-xlarge" name="name" placeholder="Studnet's Name">
<button type="submit" class="btn btn-primary" >Next</button>
<input type="hidden" name="item_name" value="" id = "hiddeninput" />

<script type="text/javascript">
/* Trigger function when the #studentname input is changed */
$("#studentname").change(function() {
  /* Make the hidden input value be the value of the input, pre-pending the "Apply fee to " */
  $("#hiddeninput") . val("Apply Fee to " + $(this).val());
  });
 </script>

笔记：

1. 任何 html 标签只能有 1 个 id，并且 id 在一个页面中必须是唯一的。
2. Javascript/jquery 修改 html。它本身不显示 HTML，所以在其中写一个标签是没有意义的。