Как заполнить поле в модале существующим контактом при открытии? - PullRequest
Новая
       18

Как заполнить поле в модале существующим контактом при открытии?

0 голосов
/ 28 ноября 2018

Здравствуйте, я создаю книгу контактов, в которую вы можете добавлять и редактировать контакты.Теперь я хочу, чтобы кнопка «Редактировать» открывала модальный режим, в котором можно вносить изменения в контакт и сохранять.Почему не работает с document.getElementById("name").value = kontakt.name;, чтобы получить данные существующего контакта в модальном режиме при открытии?Это работало раньше при использовании сайта html.Таким образом, нет проблем с синтаксисом

У меня есть этот модальный 

  <div class="container">
                <h2></h2>


                <!-- The Modal -->
                <div class="modal" id="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Kontakt erstellen</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>

                            <div class="modal-body">
                                <div class="container">

                                    <form>
                                        <div class="form-group row">
                                                    <label for="name" class="col-sm-2 col-form-label">Name</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-label" placeholder="Name" id="name">
                                                    </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="email" class="col-sm-2 col-form-label">E-Mail</label>
                                            <div class="col-sm-10">
                                                <input type="email" class="form-label" placeholder="E-Mail" id="email">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="plz" class="col-sm-2 col-form-label">PLZ</label>
                                            <div class="col-sm-10">
                                                <input type="number" class="form-label" placeholder="PLZ" id="plz">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                                <label for="ort" class="col-sm-2 col-form-label">Ort</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-label" id="ort" placeholder="Ort">
                                                </div>
                                            </div>
                                        <div class="form-group row">
                                            <label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary btn-block" onclick="login()" >Speichern</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

Это кнопка редактирования, которая создается в таблице с каждым новым контактом 

// edit button
var button = document.createElement('button');
button.onclick = function() {
    Initialize(kontakt.id);
    $('#dialog').modal('show');

Это функция инициализации, которая должна помещать контактные данные в пустые поля.Здесь приходит ошибка от.В нем говорится TypeError: document.getElementById (...) имеет значение null 

function kontaktBearbeitenInit(id) {

    let kontakt = kontakteSpeicher.findContacttoId(id);

    document.getElementById("name").disabled = true;
    document.getElementById("name").value = kontakt.name;
    document.getElementById("email").value = kontakt.email;
    document.getElementById("Ort").value = kontakt.ort;
    document.getElementById("plz").value = kontakt.plz;
    document.getElementById("strasse").value = kontakt.strasse;

}

1 Ответ

0 голосов
/ 28 ноября 2018

Попробуйте заменить 

document.getElementById("Ort").value = kontakt.ort;

на 

document.getElementById("ort").value = kontakt.ort;


const container = document.getElementsByClassName('container')[0];
var button = document.createElement('button');
container.appendChild(button);
button.innerHTML = 'Create';
button.classList.add('btn', 'btn-primary');
button.onclick = function() {
    $('#dialog').show();
    Initialize();
}

function closeModal() {
    $('#dialog').hide();
}

function Initialize() {

    let kontakt = {
      name: 'John',
      email: 'test@example.com',
      ort: 'ort',
      plz: 'plz',
      strasse: 'strasse'
    }
    document.getElementById("name").disabled = true;
    document.getElementById("name").value = kontakt.name;
    document.getElementById("email").value = kontakt.email;
    document.getElementById("ort").value = kontakt.ort;
    document.getElementById("plz").value = kontakt.plz;
    document.getElementById("strasse").value = kontakt.strasse;

}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <h2></h2>

  <!-- The Modal -->
  <div class="modal" id="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Kontakt erstellen</h4>
          <button type="button" class="close" data-dismiss="modal" onclick="closeModal()">&times;</button>
        </div>

        <div class="modal-body">
          <div class="container">

            <form>
              <div class="form-group row">
                <label for="name" class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-label" placeholder="Name" id="name">
                </div>
              </div>
              <div class="form-group row">
                <label for="email" class="col-sm-2 col-form-label">E-Mail</label>
                <div class="col-sm-10">
                  <input type="email" class="form-label" placeholder="E-Mail" id="email">
                </div>
              </div>
              <div class="form-group row">
                <label for="plz" class="col-sm-2 col-form-label">PLZ</label>
                <div class="col-sm-10">
                  <input type="number" class="form-label" placeholder="PLZ" id="plz">
                </div>
              </div>
              <div class="form-group row">
                <label for="ort" class="col-sm-2 col-form-label">Ort</label>
                <div class="col-sm-10">
                  <input type="text" class="form-label" id="ort" placeholder="Ort">
                </div>
              </div>
              <div class="form-group row">
                <label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
                <div class="col-sm-10">
                  <input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
                </div>
              </div>
            </form>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
        </div>
      </div>
    </div>
  </div>

</div>
...