如何连接3个文本字段值并传递给隐藏文本字段

Question

＆＃13;

＆＃13;

<label class="textRight label95 select205">Cost Center: </label>
<input type="hidden" name="label_0" value="Cost Center" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

＆＃13;

＆＃13;

＆＃13;

我希望合并在所有这些文本字段中输入的值，并在此处传递隐藏字段<input type="hidden" name="label_0" value="Cost Center" />。怎么能实现这一目标？请帮忙。

Answer 1

您可以使用map获取每个项目的值，然后join。

像这样：

＆＃13;

＆＃13;

var inputs = $('[name="value_0"]').on('keyup', combine);

function combine() {
  var val = inputs.map((i, input) => input.value).get().join('');
  $('[name=label_0]').val(val);
  console.log($('[name=label_0]').val());
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="textRight label95 select205">Cost Center: </label>
<input type="hidden" name="label_0" value="Cost Center" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" name="value_1" value="" maxlength="10" placeholder="another input - not calculated" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试此代码

 var Inputs = ('input[type="text"]');
$(Inputs).each(function () {
               
                   $("input[name='label_0']").val($("input[name='label_0']").val()+' '+$(this).val())
               });
               console.log($("input[name='label_0']").val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label class="textRight label95 select205">Cost Center: </label>
<input type="hidden" name="label_0" value="Cost Center" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="1" maxlength="10" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="2" maxlength="10" />

<input type="text" name="value_0" class="input64 inputTxtGray" value="3" maxlength="10" />

Answer 3

首先，您必须为输入使用id属性。我假设您将使用以下ID

<label class="textRight label95 select205">Cost Center: </label>
<input type="hidden" id="label_0" name="label_0" value="Cost Center" />

<input type="text" id="value_1" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" id="value_2" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" id="value_3" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

您可以按照以下方式执行您的要求：

$("#label_0").val($("#value_1").val() + $("#value_2").val() + $("#value_3").val());

修改

＆＃13;

＆＃13;

$("#merge").click(function() {
  $("#label_0").val($("#value_1").val() + $("#value_2").val() + $("#value_3").val());
});

$("#getValue").click(function() {
  alert($("#label_0").val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="textRight label95 select205">Cost Center: </label>
<input type="hidden" id="label_0" name="label_0" value="Cost Center" />

<input type="text" id="value_1" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" id="value_2" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<input type="text" id="value_3" name="value_0" class="input64 inputTxtGray" value="" maxlength="10" />

<br />

<button id="merge">Merge Values</button>
<button id="getValue">Get Hidden Value</button>

＆＃13;

＆＃13;

＆＃13;