Получить ноды в блоке div

279

07 января 2018, 05:19

Есть примерно такой костяк разметки :

<div>
<input name="Educations[0].Facultet"/>
<input/>
//...
</div>

Как мне получить и изменить атрибут одного из input ?

UPD - блок div при первой загрузке страницы всего один. Однако по нажатию ЛКМ на кнопку в документ добавляется еще один. В новом блоке div нужно поменять Educations[0].Facultet на Educations[1].Facultet. И в каждом новом div счетчик должен увеличиваться на 1. Новый блок div добавляется так :

var non_ness = document.getElementById('not_necessery_prop');
var cloneNotNess = non_ness.cloneNode(true);
maindiv.appendChild(cloneNotNess);

Answer 1

function showInputValues() { 
  var v3 = document.querySelector("input[name='Educations[3].Facultet']").value; 
  var v1 = document.querySelector("input[name='Educations[1].Facultet']").value; 
  var v0 = document.querySelector("input[name='Educations[0].Facultet']").value; 
  console.log(v0, v1, v3); 
}

<div> 
<input name="Educations[0].Facultet" value="a"/> 
<input name="Educations[1].Facultet" value="b"/> 
<input name="Educations[3].Facultet" value="c"/> 
</div> 
<button onclick="showInputValues()">Click</button>

Answer 2

var i = 1; 
 
function addNode(nodeID,targetID) { 
  i++; 
  var non_ness = document.getElementById(targetID); 
  var maindiv = document.getElementById(nodeID); 
  var cloneNotNess = non_ness.cloneNode(true); 
  cloneNotNess.id = cloneNotNess.id + i; 
  cloneNotNess.children[0].id += i; 
  var iname = cloneNotNess.children[0].name; 
  iname = iname.replace("[0]", "[" + i + "]"); 
  console.log(iname); 
  maindiv.appendChild(cloneNotNess); 
}

<button id="knopka" onclick="addNode('maindiv','not_necessery_prop');">knopka</button> 
<div id="maindiv"> 
  <div id="not_necessery_prop"> 
    <input id="input" type="text" name="Educations[0].Facultet" /> 
  </div> 
</div>

Answer 3

Можно вот так попробовать.

class InputNode { 
  static createInput(index, value = '') { 
    let input = document.createElement('input'); 
    input.name = `Educations[${index}].Facultet`; 
    input.value = value; 
 
    return input; 
  } 
  constructor(index) { 
    this.elementAll = [ 
      InputNode.createInput(index, `value_${index++}`), 
      InputNode.createInput(index, `value_${index++}`), 
      InputNode.createInput(index, `value_${index++}`), 
    ] 
  } 
} 
 
class Count { 
  constructor() { 
    this.count = 0; 
  } 
 
  getCount() { 
    let count = this.count; 
    this.count += 3; 
 
    return count; 
  } 
} 
 
let count = new Count(); 
 
document.addEventListener('click', () => { 
  let main = document.querySelector('main'); 
 
  let inputNode = new InputNode(count.getCount()); 
 
  inputNode.elementAll.forEach(element => main.appendChild(element)); 
});

<main></main>

Answer 4

//получаем основной костяк 
var S = document.getElementById('s'), 
    n=0; 
function ND(){ 
//клонируем его 
var cloneS = S.cloneNode(true); 
//вставляем перед кнопкой 
document.body.insertBefore(cloneS,document.getElementById("btn")); 
//заменяем input-потомуку клона value (это для примера, вы можете и name и что угодно менять)  
cloneS.querySelector("input").value=++n; 
}

<div id="s"> 
<input value="0"> 
</input> 
</div> 
<button id="btn" onmousedown="ND();">new div</button>

Answer 5

Еще вариант

var maindiv = document.getElementById('maindiv');
var div = document.getElementById('div');
var click = 0;
function create() {
  var cloneDiv = div.cloneNode(true);
  click++;
  var name = "Educations[" + click + "].Facultet";
  maindiv.appendChild(cloneDiv);
  cloneDiv.setAttribute('id','cloneDiv'+ click);
  cloneDiv.children[0].name = name;
}

<div id="maindiv">
  <div id="div">
    <input type="text" name="Educations[0].Facultet">
   </div>
</div>
<button onclick="create()">Create Node</button>

Если несколько input'ов, можно сделать так:

var arr = [].slice.call(cloneDiv.children,this);
arr.forEach(function(item) {
    item.name = name;
});

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выбрать из таблицы значение?

Есть таблица с полями product_id, key, value Как выбрать из таблицы значения product_id где: 1) key = emkost AND value = 510 2) key = tok AND value = 54

298

MySQL

Получить ноды в блоке div

Выбрать из таблицы значение?

создание БД в MySQL Спорт

C# + FPS в 2д играх [требует правки]

Сборщик мусора и HandleCollector