Изменение названия переключателей с помощью Javascript

Я использую простую функцию дублирования JS для дублирования div. Внутри находится информация о форме с переключателями, в том числе одна группа под названием «getOrRequest». Каждый div представляет собой книгу и должен иметь собственное значение getOrRequest.

Имя необходимо изменить, чтобы сделать каждую дублированную группу переключателей доступной для выбора, не затрагивая все остальные переключатели. Как лучше всего изменить эти ценности?

Вот как я дублирую div, если это проблема.

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
bookInfo.appendChild(copyDiv);

Затем я попробовал несколько способов изменить значение имени. Нравится:

bookInfo.copyDiv.getOrRequest_0.setAttribute("name", "'getOrRequest' + idNumber + '[]'");
bookInfo.copyDiv.getOrRequest_1.setAttribute("name", "'getOrRequest' + idNumber + '[]'");

А также это:

bookInfo.copyDiv.getOrRequest_0.name = 'getOrRequest' + idNumber + '[]';
bookInfo.copyDiv.getOrRequest_1.name = 'getOrRequest' + idNumber + '[]';

getOrRequest_0 и getOrRequest_1 - это идентификаторы входных значений, но я пробовал это несколькими способами, и, похоже, ничего не работает. Заранее спасибо!

РЕДАКТИРОВАТЬ: БОЛЬШЕ ИНФОРМАЦИИ

Вот конкретный код, который я использую:

function addAnotherPost(){

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
var size = copyDiv.childNodes.length;

copyDiv.id = 'addListing' + idNumber;

for(var j = 0; j < size; j++){
   if(copyDiv.childNodes[j].name === "getOrRequest[]"){
      copyDiv.childNodes[j].name = "getOrRequest" + idNumber + "[]";
   }
}

bookInfo.appendChild(copyDiv);

idNumber++;
}

И это просто не работает .. Дивы дублируются, но значение имени не меняется.


javascript forms radio-button
person zgilly    schedule 11.07.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать это - http://jsfiddle.net/ZKHF3/

    <div id="bookInformation">
        <div id="addListing">
            <input type="radio" name="addListing0[]" />
            <input type="radio" name="addListing0[]" />
        </div>
    </div>
    <button id="button">Add Listing</button>

    <script>
    document.getElementById("button").addEventListener("click", AddListing, false);

    var i = 1;
    var bookInfo = document.getElementById('bookInformation');

    function AddListing() {
        var copyDiv = document.getElementById('addListing').cloneNode(true);
        var size    = copyDiv.childNodes.length;

        copyDiv.id = "listing" + i;
        for ( var j = 0; j < size; j++ ) {
            if ( copyDiv.childNodes[j].nodeName.toLowerCase() == 'input' ) {
                copyDiv.childNodes[j].name = "addListing" + i + "[]";
            }
        }

        bookInfo.appendChild(copyDiv);
        i++;
    }
    </script>
person Zoltan Toth    schedule 11.07.2012
comment
Я добавил дополнительную информацию к своему вопросу. Ваш пример очень помог, но я просто не знаю, что здесь делать. - person zgilly; 11.07.2012
comment
Можете ли вы обновить мою скрипку соответствующим HTML / JS? так что я могу понять, в чем проблема - person Zoltan Toth; 11.07.2012
comment
Только что сделал, большое спасибо за помощь ... Я добавил только часть этого, так что он не работает, но, надеюсь, вы понимаете идею. - person zgilly; 12.07.2012
comment
add listing функциональность работает так, как вы хотели? Подскажите, пожалуйста, что должно произойти, когда я нажму add another book? - person Zoltan Toth; 12.07.2012
comment
Копирование div работает, и новые div правильно пронумерованы (первый - addListing, второй - addlisting1 и т. Д.). Однако переключатели внутри новых div не меняются. При нажатии кнопки «добавить другую книгу» копирование и изменение завершаются. - person zgilly; 12.07.2012

arrow_upward
0
arrow_downward

Проблема в том, что вы ищете дочерние узлы div, но флажки не являются дочерними узлами, это узлы-потомки. Искомые узлы вложены в метку. Обновите свой код, чтобы искать все входные данные-потомки, используя copyDiv.getElementsByTagName("input"):

var idNumber = 0;
function addAnotherPost() {
    var bookInfo = document.getElementById('bookInformation');
    var copyDiv = document.getElementById('addListing').cloneNode(true);
    copyDiv.id = 'addListing' + idNumber;

    var inputs = copyDiv.getElementsByTagName("input");
    for(var j = 0; j < inputs.length; j++){
       if(inputs[j].name === "getOrRequest[]"){
          inputs[j].name = "getOrRequest" + idNumber + "[]";
       }
    }

    bookInfo.appendChild(copyDiv);
    idNumber++;
}

http://jsfiddle.net/gilly3/U5nsa/

person gilly3    schedule 11.07.2012