Question

如果任何表单输入更改，如何更改立即提交按钮文本？

//This applies to whole form
$('#test').change(function() {
  $("#send").prop("value","Change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
  <input id="Input1" value="Input1" />
  <input id="Input2" value="Input2" />
  <input type="submit" id="send" value="Send" />
</form>

此处，按钮文字在光标离开输入后更改。

实例：http://jsfiddle.net/rgg3A/56/

Answer 1

使用input事件
使用:input Selector，选择所有input, textarea, select and button元素

$('#test').find(':input').on('input', function() {
  document.getElementById('send').value = this.value;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="test">
  <input id="Input1" value="Input1">
  <input id="Input2" value="Input2">
  <input type="submit" id="send" value="Send">
</form>

Answer 2

您需要将侦听器放在输入本身上，在这种情况下将其附加到onKeyDown事件：

$('input').on("keydown", function() {
  send.value = "Change";
});

Updated Fiddle

Answer 3

需要最少更改的解决方案是使用keyup事件。即。

$('#test').keyup(function() {
   send.value = "Change";
});

这样，输入#test父级中的任何输入字段都将触发该事件。

Answer 4

您可以使用jquery输入event和selector来完成此操作。

＆＃13;

$('input').on("keydown", function() {
      $('#send').val(this.value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
    <input id="Input1" value="Input1">
    <input id="Input2" value="Input2">
    <input type="submit" id="send" value="Send">
</form>

＆＃13;

Answer 5

由于你原来的问题没有直接提到JQuery，除非它被用作选择器，这个让我挂了一个正确的JavaScript答案。

所以这个答案和其他例子一样，但只使用简单的'JavaScript'。使用input事件，就像其他答案一样。

document.getElementById('test').addEventListener('input', function(e) {
  document.getElementById('send').value = e.target.value;
});

<form id="test">
  <input id="Input1" value="Input1">
  <input id="Input2" value="Input2">
  <input type="submit" id="send" value="Send">
</form>

这里的区别在于它正在正确地监听表单元素上的冒泡事件，只注册一次事件监听器（而不是将相同的事件监听器应用于多个元素），并使用Event.target属性来计算哪个元素被修改了。

如果任何表单输入更改[JS]，更改（立即）提交按钮文本

5 个答案: