Переименование имен атрибутов, если они удалены перед отправкой с помощью jQuery - PullRequest
Новая
       4

Переименование имен атрибутов, если они удалены перед отправкой с помощью jQuery

0 голосов
/ 16 октября 2011

У меня есть список входных данных, сгенерированных jQuery: 

<input type='text' name='field["+ j++ +"]' />
<input type='file' name='field["+ j++ +"]' />
<textarea name='field["+ j++ +"]' value='' />
<textarea name='field["+ j++ +"]' value=''/>

j ++ увеличивается, когда пользователь добавляет новое поле ввода, и оно наконец выглядит так: 

<input type='text' name='field[0]' />
<input type='file' name='field[1]' />
<textarea name='field[2]' value='' />
<textarea name='field[3]' value=''/>

ТеперьУ пользователя есть возможность удалить поле с помощью кнопки, например: если я удалил поле [2], это приведет к следующему: 

<input type='text' name='field[0]' />
<input type='file' name='field[1]' />
<textarea name='field[3]' value=''/>

Проблема в том, что увеличенные поля больше не подходят позже, потому что вместосписок вроде 0,1,2,3 ... у меня 0,1,3 ...

Я просто хочу изменить числовой атрибут полей после того, который был удален, чтобы соответствовать другиминкрементные поля

Другое дело: пользователь может перетаскивать поля, чтобы изменить порядок.Поэтому, если 1 поле удалено, поле сразу после этого должно занять его номер и т. Д.

Код для удаления поля: 

$("#deletebtn").live("click", function(){
  $(this).parent("li").remove();
});

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

1 голос
/ 16 октября 2011

Вы можете опустить индекс, используйте только field[]

0 голосов
/ 16 октября 2011

Прежде всего: если вы используете эти формы имени для публикации с php (или asp) в качестве массива, вам нужно перечислить имя входных данных, вы можете использовать просто name = "field []".

Если вы хотите, чтобы таким образом были только имена, тогда присвойте своему вводу класс: 

<input type='text' class="input" name='field[0]' />
<input type='file' class="input" name='field[1]' />
<textarea class="input" name='field[2]' value='' />
<textarea class="input" name='field[3]' value=''/>

Затем с помощью jquery, каждый раз, когда пользователь меняет порядок / удаляет ввод, просто выполняйте эту функцию: 

function re_order(class)
{
  $('.'+class).each(function(index,element){
    this.name='field['+index']';
  });
}

где класс - это класс, указанный для входных данных.

0 голосов
/ 16 октября 2011

Добавить общее имя класса для всех элементов, используя порядок: 

<input type='text' name='field[0]' class='dynamic-order' />
<input type='file' name='field[1]' class='dynamic-order' />
<textarea name='field[2]' value='' class='dynamic-order' />
<textarea name='field[3]' value='' class='dynamic-order' />

Затем, после удаления элемента, переберите поля и установите новый индекс: 

$("#deletebtn").live("click", function(){
  $(this).parent("li").remove();
  $( ".dynamic-order" ).each(
    function( index ) {
    this.name = "field["+index+"]";
    }
  );
});

edit: я обнаружил некоторые проблемы с вашим jsfiddle, вот исправленная версия:

http://jsfiddle.net/ZKFHH/1/

По некоторым причинам имена не всегда показывают самое последнее значение, вы должны проверить свойство для него.

...