0

Пишу модуль на сайт для добавления документа(научных статей, журналов и т.д.). Вид формы представлен на скриншоте ниже. форма

Так как у одного документа может быть много авторов и ключевых слов, мне нужно сделать так, чтобы при нажатии на кнопку Добавить автора создавалось 3 новых поля: Фамилия, Имя и Отчество нового автора соответственно, а при нажатии на надпись Удалить справа от полей, эти поля удалялись. Аналогично с ключевыми словами.

Код формы (лишнее вырезано):

  <h3>Авторы:</h3>
  <button type="submit" class="btn btn-success">Добавить автора</button> <br><br>

  <div class="form-group">
    <div class="col-sm-3">
        <input type="text" class="form-control" name="author_second_names[]" placeholder="Фамилия"> 
    </div>
    <div class="col-sm-3">
        <input type="text" class="form-control" name="author_first_names[]" placeholder="Имя">
    </div>
    <div class="col-sm-3">
        <input type="text" class="form-control" name="author_patronymics[]" placeholder="Отчество">
    </div> 
    <div class="col-sm-3">
        <a href="#">Удалить</a>
    </div>
  </div>

  <h3>Ключевые слова:</h3>
  <button type="submit" class="btn btn-success">Добавить ключевое слово</button> <br><br>

  <div class="form-group">
    <div class="col-sm-3">
        <input type="text" class="form-control" name="keywords[]" placeholder="ключевое слово">
    </div> 
    <div class="col-sm-3">
        <a href="#">Удалить</a>
    </div>              
  </div>

  <button type="submit" class="btn btn-primary">Добавить документ</button>

И дополнительный вопрос: есть ли в Bootstrap'e или в jquery какая-нибудь более удобная структура для добавления/удаления ключевых слов? А то мой вариант выглядит, на мой взгляд, недостаточно эстетично.

1
  • для ключевых слов можно использовать один из существующих tagEditor плагинов
    – user176262
    1 апр 2018 в 16:28

1 ответ 1

0

$('#addAutor').click(function (e) {
  e.preventDefault();
  var frame = $('#formFrame').append(
    '<div class="form-group">' +
    '<div class="col-sm-3">' +
    '<input type="text" class="form-control" name="author_second_names[]" placeholder="Фамилия">' +
    '</div>' +
    '<div class="col-sm-3">' +
    '<input type="text" class="form-control" name="author_first_names[]" placeholder="Имя">' +
    '</div>' +
    '<div class="col-sm-3">' +
    '<input type="text" class="form-control" name="author_patronymics[]" placeholder="Отчество">' +
    '</div>' +
    '<div class="col-sm-3">' +
    '<a class="delWord" href="#">Удалить</a>' +
    '</div>' +
    '</div>'
  );
});
    
$('#formFrame').on('click', '.delWord', function (e) {
  e.preventDefault();
  $(this).parents('.form-group').remove();
});
.form-group {
  display: flex;
  margin-bottom: 10px
}
.form-group > * {
  margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<h3>Авторы:</h3>
<div id="formFrame">
  <div class="form-group">
    <div class="col-sm-3">
      <input type="text" class="form-control" name="author_second_names[]" placeholder="Фамилия"> 
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="author_first_names[]" placeholder="Имя">
    </div>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="author_patronymics[]" placeholder="Отчество">
    </div> 
    <div class="col-sm-3">
      <a class="delWord" href="#">Удалить</a>
    </div>
  </div>
</div>
<a href="#" class="btn btn-success" id="addAutor">Добавить автора</a>

С ключевыми словами все аналогично.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.