在一个隐藏文本输入中收集多个输入

时间:2014-04-12 23:56:58

标签: javascript jquery html

我在html中有这个表单来收集macaddress,我想在(CompleteMacAddress)文本值中输出所有输入的数据,如(10-20-30-40-50-60)

有关javascript或jquery的任何帮助吗?

<form name="form1" action="" method="get">
    <input name="MacAddressPart1" type="text" id="MacAddressPart1" size="2" maxlength="2" >
    <input name="MacAddressPart2" type="text" id="MacAddressPart2" size="2" maxlength="2">
    <input name="MacAddressPart3" type="text" id="MacAddressPart3" size="2" maxlength="2">
    <input name="MacAddressPart4" type="text" id="MacAddressPart4" size="2" maxlength="2">
    <input name="MacAddressPart5" type="text" id="MacAddressPart5" size="2" maxlength="2">
    <input name="MacAddressPart6" type="text" id="MacAddressPart6" size="2" maxlength="2">

    <input type="hidden" name="CompleteMacAddress" value="">

5 个答案:

答案 0 :(得分:4)

这应该可以正常工作:

$(function() {
    var macSelector = "input[name^='MacAddressPart']";
    $(macSelector).bind('keyup', function() {
        var macs = $.map($(macSelector), function(input) { return $(input).val(); })
        $('input[name="CompleteMacAddress"]').val(macs.join("-"))
    });
});

要看到它有效,enter link description here。请注意,它会在用户键入时更新。;)

答案 1 :(得分:1)

为所有html元素提供适当的ID(包括表单和隐藏的输入)。

$("#formID").submit(function(event) {
  $("#hiddenID").value(
    $("#MacAddressPart1").val('00')+"-"+
    $("#MacAddressPart2").val('00')+"-"+
    $("#MacAddressPart3").val('00')+"-"+
    $("#MacAddressPart4").val('00')+"-"+
    $("#MacAddressPart5").val('00')+"-"+
    $("#MacAddressPart6").val('00')
  );   
});

注意'00'会导致它默认为00-00-00-00-00-00,因为没有值。

答案 2 :(得分:0)

使用一个文本字段输入整个mac并在更改时验证长度和字符会更容易。无论如何,您可以使用基本的javascript获得单独的输入值 - &gt; document.getElementById('MacAddressPart6')。value和+到其他字符串值然后用getElementById('aaa')=

设置值

答案 3 :(得分:0)

这是你在找什么?

$('[name="form1"]').submit(function() {
    $('[name="CompleteMacAddress"]').val(
        $('[name="MacAddressPart1"]').val() + '-' + 
        $('[name="MacAddressPart2"]').val() + '-' + 
        $('[name="MacAddressPart3"]').val() + '-' + 
        $('[name="MacAddressPart4"]').val() + '-' + 
        $('[name="MacAddressPart5"]').val() + '-' + 
        $('[name="MacAddressPart6"]').val()
    );
});

修改

$('[name="form1"]').submit(function() {
    $('[name="CompleteMacAddress"]').val($('input[id^="MacAddressPart"]').map(
        function() { return this.value || '00'; }).get().join('-'));
});

答案 4 :(得分:0)

JsFiddle示例:

http://jsfiddle.net/pdLh8/3/

检测密钥+更新输入:

     $(document).ready(function () {
     $('input[id^="MacAddressPart"]').keyup(
     function () {
         var mac = [];
         $('input[id^="MacAddressPart"]').each(function (index) {
             mac.push($(this).val());
         });
         $("input[name='CompleteMacAddress']").val(mac.join('-'));
     });
 });