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>

注意：

任何html标记只能有1个id，并且页面中的id必须是唯一的。
Javascript / jquery修改html。它不会单独显示HTML，因此只在其中编写标记是没有意义的。

JQuery自动更新隐藏输入

3 个答案: