HTML-формы, добавить область по клику - PullRequest
Новая
       12

HTML-формы, добавить область по клику

0 голосов
/ 03 января 2012

Я не уверен, как спросить, что я ищу, чтобы искать инструкции. Я создаю форму, и одна из записей требует от пользователей перечисления устройства, его напряжения, ватт, усилителей, фазы и т. Д.

Мне нужна простая строка со столбцами «X», предоставляющая текстовые области для одного устройства, а затем возможность щелкнуть ссылку «добавить другое устройство» с помощью jquery / html.

Мне нравится использовать заполнитель текста, чтобы сэкономить место на странице. Я могу настроить все это для одной записи, например, «name», однако я не знаю, как реализовать строку «add entry». Все данные хранятся через PHP в MySQL.

Итак: Как называется этот тип раздела формы? B: Как это называется, когда мы хотим позволить пользователю добавить строку в этот раздел?

Мне нравится делать вещи сложнее, чем они есть на самом деле. Это моя специальность. Я думаю:)

РЕДАКТИРОВАТЬ: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit Используя этот формат с 5 столбцами на запись (хотя все они будут в одной строке / строке), я хотел бы иметь ссылку «добавить запись», которая генерирует новую пустую опцию записи. 

#elecNeeds input[type=text], textarea {
font-size: 12px;
font-style: italic; 
width: 15%;
height: 20px;
padding: 10px;  
color: #212323;
background: #E3E3E3;  
background: rgba(255, 255, 255, 0.5);
border: 2px #000 solid;
margin-bottom: 10px;
position: relative;
behavior: url(/js/PIE.htc);

    }

    <div id="elecNeeds">
    <input type="text" name="appliance" placeholder="Type of Equipment">
    <input type="text" name="voltage" placeholder="Voltage">
    <input type="text" name="watts" placeholder="Watts">
    <input type="text" name="amps" placeholder="Phase">
    <input type="text" name="notes" placeholder="Notes">
    <br />  Add an appliance
    </div>

Ответы [ 2 ]

4 голосов
/ 03 января 2012

Я не знаю, как это называется, но вы, вероятно, хотите это - http://jsfiddle.net/uPWkf/1/

<form method="post" action="#" id="myForm">
    <div id="nameFields">
        <label>Watt <input type="text" name="watt0" /></label>
        <label>Volt <input type="text" name="volt0" /></label>
        <label>Amp <input type="text" name="amp0" /></label><br/><br />
    </div>
    <input type="submit" value="submit" id="submit" />
</form>
<a href="#" onclick="return false;" id="addRow">Add New Row</a>

и JS 

var i = 1;

$("#addRow").click(function() {
    $("#nameFields").append('<label>Watt <input type="text" name="watt' + i + '" /></label><label>Volt <input type="text" name="volt' + i + '" /></label><label>Amp <input type="text" name="amp' + i + '" /></label><br/><br />');

    i++;
});


$('#myForm').submit(function() {
    var values = $('#myForm').serialize();
    alert(values);
});
2 голосов
/ 03 января 2012

Я думаю, вам нужно использовать функцию $(selector).append('<code>');. Например: 

<a href="#" class="add">Add</a>
<table class="my_fuits">
    <tr>
        <td>Fruit</td>
        <td><input type="text" name="fuits[]" /></td>
    </tr>
</table>

и код js (jQuery): 

$(document).ready(function(){

    // add one more row
    $(".add").live('click',function(){
        $(".my_fuits").append('<tr><td>Fruit '+$(".my_fruits input").length+'</td><td><input type="text" name="fuits[]" />[<a href="#" class="remove">X</a>]</td></tr>');
        return false;
    });

    //  remove row
    $(".remove").live('click',function(){
            $(this).parent().parent().remove();
            return false;
    });
});
...