2016-04-20 2 views
-2

Я создаю страницу php для регистрации в лагере, очень простой, и я не хочу замазывать страницу несколькими ярлыками/текстовыми полями. То, о чем я думал, состояло в том, чтобы по умолчанию иметь один текстовый блок и один ярлык и, возможно, синий текст, который говорит, добавить еще одну (или даже кнопку), которая при нажатии на страницу будет содержать текущие данные, но добавит дополнительную метку и текстовое поле, чтобы дополнительная информация может быть добавлен. Вот как я беру данные за 1, может ли это легко быть изменено для достижения моего предыдущего результата?PHP Создать еще одну кнопку

<td><label for="lblName">Campers Name:</label></td> 
<td class="style1"><input type="text" name="txtName" 
    maxlength="100" size="30"></td> 

EDIT
Ссылка объявления ничего не делает, когда я нажимаю, я уверен, что я пропускаю очевидное, но здесь полный синтаксис, что я должен изменить, чтобы сделать его работу?

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("#newCamper").on('click', function() { 
     $('#Campers').after(
     '<div id="Campers">' + 
     '<td><label for="lblName">Campers Name: </label></td>' + 
     '<td class="style1"><input type="text" name="txtName" maxlength="100" size="30"></td>' + 
     '<a href="#" id="rmCamper"> remove this</a>' + 
     '</div>' 
    ); 
    }); 
    $(document).on('click', '#rmCamper', function() { 
     $(this).closest('#Campers').remove(); 
    }); 
</script> 
</head> 
<body> 
    <div id="Campers"> 
     <td><label for="lblName">Campers Name:</label></td> 
     <td class="style1"><input type="text" name="txtName" maxlength="100" size="30"></td> 
     <a href="#" id="newCamper">Add another</a> 
    </div> 
</body> 
</html> 

EDIT # 2
, когда я иду на локальный на моей машине, и нажать на кнопку Добавить это изменяет URL на локальный # но никакие дополнительные поля не добавляются к странице?

+0

Вы хотите кнопку, которая эффективно добавляет пару с меткой/текстом? Итак, если вы нажмете кнопку 50 раз, вы получите 50 входов для ввода ваших данных? –

+0

Сделайте это в JS и присвоите атрибуту name динамический массив? – chris85

+0

@BobbyJack - хорошо пункт. Я должен, вероятно, ограничить количество дополнительных добавлений. – user2676140

ответ

0

Я знаю, что вы ищете ответ на PHP, но для чего вам нужно (манипулирование DOM), вам будет лучше использовать JavaScript. Вы можете создать другое поле ввода и прирастить переменную для добавления в поле идентификатора. См. this question. Если вы отслеживаете общее количество полей ввода, которые были созданы таким образом, вы можете перебирать их по форме для захвата всех данных.

+0

Зачем вам увеличивать переменную до атрибута ID (предполагая, что это то, что вы имеете в виду). В первую очередь нет атрибута идентификатора, и атрибут name можно легко превратить в массив, чтобы предотвратить любые проблемы. – icecub

+0

@icecub - Да, хорошая точка. – DanWake

1

Я думаю, вы можете использовать немного кода jquery для выполнения этой работы;) все, что вам нужно сделать, это включить https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js на свою страницу.

<div id="Campers"> 
    <td><label for="lblName">Campers Name:</label></td> 
    <td class="style1"><input type="text" name="txtName" maxlength="100" size="30"></td> 
    <a href="#" id="newCamper">Add another</a> 
</div> 

// jquery code below: 

$("#newCamper").on('click', function() { 
    $('#Campers').after(
    '<div id="Campers">' + 
    '<td><label for="lblName">Campers Name: </label></td>' + 
    '<td class="style1"><input type="text" name="txtName" maxlength="100" size="30"></td>' + 
    '<a href="#" id="rmCamper"> remove this</a>' + 
    '</div>' 
); 
}); 
$(document).on('click', '#rmCamper', function() { 
    $(this).closest('#Campers').remove(); 
}); 

https://jsfiddle.net/yb88s47s/

+0

Убедитесь, что вы не используете 'name =" txtName "' на каждом входе.Вместо этого добавьте use 'name =" txtName _ "+ i', где i увеличивается с каждым добавленным входом. – SunKnight0

+0

Да, каждое поле должно быть уникальным для предотвращения переопределения значений, thx @ SunKnight0 :) –

+0

Можно ли всегда иметь кнопку «Добавить еще одну кнопку» внизу? Или это много кодирования? – user2676140

1

В реальной жизни один, вероятно, будет лучше использовать JavaScript для этого на самом деле. Это вполне возможно только с php. Взгляните на следующий пример:

<?php 
$names = isset($_GET['txt']) ? $_GET['txt'] : []; 
$i = 0; 
?> 
<form method="get"> 
    <?php foreach ($names as $name) : ?> 
     <label for="txt<?= $i ?>">member</label> 
     <input name="txt[]" id="xt<?= $i ?>" value="<?= $name ?>"> 
     <br> 
     <?php $i++ ?> 
    <?php endforeach; ?> 
    <label for="txt<?= $i ?>">member</label> 
    <input name="txt[]" id="xt<?= $i ?>"> 
    <button type='submit'> 
     add 
    </button> 
</form> 

Эта форма будет представлять для себя. Он начинается с получения массива имен (обратите внимание на [] на поле txt[]). Затем он повторяет их и отображает каждый из них в качестве входа. После цикла вы просто добавляете 1 лишнее, пустое поле.

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

Посмотрите на код в действии here. Не стесняйтесь спрашивать, что-то неясно.

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