Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2013, 23:56
Новичок на форуме
Отправить личное сообщение для Spirtt0 Посмотреть профиль Найти все сообщения от Spirtt0
 
Регистрация: 22.01.2013
Сообщений: 4

Объединить input и select в динамической форме
Доброго дня, уважаемое сообщество

Есть небольшой скрипт, который динамически формирует список для select, и формирует поле input, но вот как динамически вывести их вместе ума не приложу, по отдельности все выводится отлично.

Код:
var lyricslist = JSON.parse( '<?php echo $lyricsjson ?>' );
var tracknum = 1;

function addInput(){
    
    var newDiv=document.createElement('div');
    var newTrack = document.createElement('input');
    
    var trackNumber = 'track'+tracknum;
	
    newTrack.setAttribute('id',trackNumber);
    newTrack.setAttribute('name',trackNumber);
    newTrack.setAttribute('type','text');
    newTrack.setAttribute('size','60');

    var selectHTML = "";
    
    selectHTML="<select name='ltrack"+ tracknum +"'>";

    for(var key in lyricslist) {
	selectHTML+= "<option value='"+lyricslist[key].id+"'>"+lyricslist[key].title+"</option>";
}
        selectHTML += "</select>";
    
	newDiv.innerHTML = selectHTML;

	document.getElementById('dynamicInput').appendChild(newDiv);
	tracknum++;
}


Форма:
<form id="tracks" name="tracks" class="new" method="post" action="testpost.php">
    <div id="dynamicInput">
-- вот сюда динамически вставляется элемент
    </div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
</form>
    <input type="button" value="Save" onclick="tracks.submit()"/>


в вышеприведенном коде вставляется select, не подскажете как корректно добавить перед ним еще и input ?
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2013, 00:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Spirtt0,
строка 26
document.getElementById('dynamicInput').appendChild(newTrack);
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2013, 11:15
Новичок на форуме
Отправить личное сообщение для Spirtt0 Посмотреть профиль Найти все сообщения от Spirtt0
 
Регистрация: 22.01.2013
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Spirtt0,
строка 26
document.getElementById('dynamicInput').appendChild(newTrack);
Спасибо, почти то что надо ! но получается что select добавляется в newDiv , а newTrack в div dynamicInput из-за чего они не в одну строку, вопрос как корректно положить их рядом, чтобы и input и select были в newDiv ?
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2013, 11:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Spirtt0,
function addInput(){

    var newDiv=document.createElement('div');
    var newTrack = document.createElement('input');

    var trackNumber = 'track'+tracknum;

    newTrack.setAttribute('id',trackNumber);
    newTrack.setAttribute('name',trackNumber);
    newTrack.setAttribute('type','text');
    newTrack.setAttribute('size','60');

    var select = document.createElement('select');
    select.setAttribute('name','ltrack'+ tracknum);
    for(var key in lyricslist) {
    select.options[select.options.length] = new Option(lyricslist[key].title, lyricslist[key].id);
    }
    newDiv.appendChild(newTrack);
    newDiv.appendChild(select);
	document.getElementById('dynamicInput').appendChild(newDiv);

	tracknum++;
}
Ответить с цитированием
  #5 (permalink)  
Старый 24.01.2013, 13:57
Новичок на форуме
Отправить личное сообщение для Spirtt0 Посмотреть профиль Найти все сообщения от Spirtt0
 
Регистрация: 22.01.2013
Сообщений: 4

спасибо , то что надо !
Ответить с цитированием
  #6 (permalink)  
Старый 24.01.2013, 17:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Кстати, рекомендуется вместо
newTrack.setAttribute('id',trackNumber);
newTrack.setAttribute('name',trackNumber);
newTrack.setAttribute('type','text');
newTrack.setAttribute('size','60');


писать
newTrack.id = newTrack.name = trackNumber;
newTrack.type ='text';
newTrack.size = 60;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Изменить input на select fantasy_h1 Элементы интерфейса 6 20.09.2012 16:49
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
ширина select и input Shaci (X)HTML/CSS 1 15.02.2011 09:10
GetElementById не хочет работать в динамической форме Игорёk Events/DOM/Window 8 23.06.2009 13:27