JQuery добавить больше элементов формы - PullRequest
Новая
       5

JQuery добавить больше элементов формы

0 голосов
/ 20 декабря 2011

Итак, вот мой вопрос: я хочу, чтобы наши продавцы добавили больше телефонных номеров в контакт с клиентами.

У нас есть форма, которая выглядит следующим образом. (обратите внимание, я показываю только часть из нашей области контактов) 

<form>
<div id="numbers">
<input id="no1" value="" class="phone" type="numbers"/>
</div>
</form>

так что, в общем-то, я хочу, чтобы он ушел, когда он набирает один номер телефона, добавляет новое поле ввода под ним и спрашивает, хотят ли они еще добавить.

Тогда мне нужно найти лучший способ их хранения, какие-либо предложения?

Я думал объединить их следующим образом 

025555555,0311555445,044585522

Ответы [ 3 ]

1 голос
/ 20 декабря 2011
  1. Вам нужно указать имя в этом поле, иначе форма не отправит его вместе с сообщением.Отправляются только входы с именами. Если, конечно, вы отправляете через AJAX и сами создаете данные публикации.
  2. Не храните данные как значения, разделенные запятыми.Держите отдельную таблицу для телефонных номеров и используйте отношения один-ко-многим между человеком и его телефонными номерами.Нормализованные данные - это (почти) правильный путь.
  3. Вам действительно нужны неограниченные номера телефонов?Или достаточно небольшого фиксированного числа?Скажем, телефон, альтернативный телефон и сотовый?Если 3 сработает, почему бы просто не создать три текстовых поля и сделать последние два необязательными?
  4. Вы можете использовать что-то вроде следующего:

Пример: 

$(function() {
     $(document).on('blur','[name="phone"]', function() {
         var $phones = $('[name="phone"]'),
             empty = $phones.filter( function() { return !$(this).val(); } ).length;
         if (empty == 0) { // don't add a new one unless they all have values
            $phones.filter(':last').after( '<input type="text" name="phone" class="phone" type="numbers" />' );
         }
     });
});
0 голосов
/ 20 декабря 2011

Что я думаю, это так: 

register(1);
function register(i)
{
    $('#no'+i).blur(function()
    {
        if($('#no'+i).val().get().matches(reg))
        {
            generated_id="#no"+++i;
            $('#numbers').append('<div><input type="text" id='+generated_id+'...></div>')
            register(i);
        }
    })
}
0 голосов
/ 20 декабря 2011

Попробуйте это демо - http://jsfiddle.net/cAMAe/2/

$('#numbers input').last().keypress(function() {
  if($('#numbers input').last().val().length > 5)
  {
     $(this).clone('false').appendTo("#numbers");
    $('#numbers input').last().val('');
  }
});

Просто измените id на класс.Если по какой-либо причине вы не можете удалить идентификатор, выполните следующие действия внутри блока if 

$input = $('#numbers input').last();
$input.clone(false).find("*").attr("id",$input.attr("id")+'111').attr('value','').appendTo("#number");
...