Добавление полей формы html из пользовательского ввода

У меня есть форма, которая запрашивает у пользователя указание типа устройства и указать, сколько атрибутов они хотели бы присвоить этому типу устройства. Эта форма вызывает указанные ниже php-файлы, которые используют цикл для создания необходимого количества атрибутов.Добавление полей формы html из пользовательского ввода

Я использовал имя = "атрибут". $ I, чтобы иметь возможность идентифицировать каждый атрибут на следующей странице php для отправки информации в базу данных.

<?php echo $_POST['device-name']; ?> 

    <?php 

     $num=$_POST['number-of-attributes']; 
     $num=intval($num); 

     for($i=0; $i<$num; $i++) { 

      newAttribute($i); 

     } 

     function newAttribute($i) { 

      echo ("<div id=\"new-attribute\">"); 
      echo ("<h3>New Attribute</h3>"); 
      echo ("<label for=\"attribute".$i."\">Name</label>"); 
      echo ("<input id=\"attribute\" type=\"text\" name=\"attribute".$i."\">"); 
      echo ("</div>"); 

     } 

    ?>

Однако я также хочу, чтобы пользователь мог нажать, например:

<div id="small-button">New Attribute</div>

и создать еще один набор полей для определения атрибута.

Как мне это сделать?

Заранее спасибо

источник

2013-08-27 mickzer

Вы должны вставить элемент в DOM с помощью JavaScript. Вы знаете какой-либо JavaScript? –

Как я могу вставить элементы ввода в DOM с помощью javascript и назначить каждому из них имя с добавочным значением, чтобы идентифицировать их на следующей странице php, чтобы отправить их в базу данных? – mickzer

Использование JavaScript/JQuery на клиентской стороне:

var template = "<div class=\"new-attribute\">" 
      + "<h3>New Attribute</h3>" 
      + "<label for=\"attribute\">Name</label>" 
      + "<input id=\"attribute\" type=\"text\" name=\"attribute\">" 
      + "</div>"; 

$(document).ready(function() { 
// The DOM has loaded 
    $("#small-button").on('click', function() { 
    // The user clicked your 'New Attribute' button 
     // Append a new attribute to the <body> with `template` we defined above: 
     $(body).append(template); 
    }); 
});

Примечание: Я изменил id="new-attribute" к class="new-attribute" поскольку там будет более 1.

источник

2013-08-27 19:09:46 Ozzy

Для этого вам понадобится JavaScript для работы. В вашем HTML-документе, в конце body element добавьте следующий script element:

<script type="text/javascript"> 

var numberOfAttributes = 1; 

function newAttributeFields(e) { 
    // Creates the div 
    var div = document.createElement('div'); 
    div.id = 'new-attribute'; 

    // Appends the fields 
    div.innerHtml = '<h3>New attribute</h3><label for="attribute' + numberOfAttributes + '">Name</label><input id="attribute" type="text" name="attribute' + numberOfAttributes + '">'; 

    // Appends it to the body element 
    document.getElementsByTagName('body')[0].appendChild(div); 

    // Increments the number of attributes by one 
    numberOfAttributes = numberOfAttributes + 1; 
} 

var smallButton = document.getElementById('small-button'); 

// When the 'small button' is clicked, calls the newAttributeFields function 
smallButton.addEventListener('click', newAttributeFields, false); 

</script>

источник

2013-08-27 19:09:31 federicot

Добавление полей формы html из пользовательского ввода

ответ

Смежные вопросы