2014-04-12 4 views
0

У меня есть эта форма в 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=""> 

+1

'Java'! =' JavaScript'. Пожалуйста, прочитайте описание тегов, которые вы используете, если не уверены, какой из них выбрать. – Pshemo

ответ

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

Я знаю. Поскольку он не использовал классы на первом месте (в своем примере с оригиналом), это было моим первым решением. Автор может настроить его, чтобы использовать более подходящие селектора, конечно. Я настоятельно рекомендую ему изменить свой пример, чтобы быть более точным. – leandroico

+0

Является ли это поводом для downvote на этом решении, кстати? Или это просто простой саботаж, чтобы сделать ваш свет ярче? – leandroico

1

Дайте все ваши HTML элементы соответствующие идентификаторы (включая формы и скрытый ввод).

$("#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 упаковывают нет никакого значения.

+0

Это не оптимальный способ. –

+0

Потому что? Его гораздо читаемость, чем другое предлагаемое решение. –

+0

Это читаемо, но если одно имя изменено, код не будет работать. –

0

было бы намного проще просто использовать одно текстовое поле для ввода всего мака и проверки длины и символов при изменении. В любом случае вы можете получить индивидуальное значение ввода с помощью базового javascript -> document.getElementById ('MacAddressPart6'). Значение и + к другим строковым значениям затем установить значение также с помощью getElementById ('aaa') =

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('-')); 
}); 
+0

Это не оптимальный способ. –

+0

И по оптимальному вы имеете в виду ...? – ThatWeirdo

+0

Если какое-либо имя случайно изменяется, код не будет работать. Вместо этого вы можете сделать это более чистым, например, @Leandro answerd. –

0

JsFiddle Пример:

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

Обнаружение KeyUp + обновление ввода:

 $(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('-')); 
    }); 
}); 
Смежные вопросы