Bootstrap 4 входное значение ext

Question

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

Форма:

$('#contact-modal').on('show.bs.modal', function() {
    alert("prima");
    $("#name").attr({
      "value": 'ëtestí'
    });
  })

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-modal">
  modal
</button>

<div id="contact-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">◊</a>
        <h3>Contact Form</h3>
      </div>
      <form id="contactForm" name="contact" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" class="form-control">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" class="form-control">
          </div>
          <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" class="form-control"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-success" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>

Функция, которая никогда не работает:

  $('#contact-modal').on('show.bs.modal', function() {
    alert("prima");
    $("#name").attr({
      "value": ëtestí
    });
  })

Я действительно могу использовать любую помощь, спасибо!

Answer 1

в JQuery:

используйте # для идентификатора $('#myid'), <input type="text" id="myid" />

использовать. для класса $('.myclass'), <input type="text" class="myclass" />

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

как для $("[name=myname]") или $("input[name=myname]")

<input type="text" name="myname" />

для $("input[type=text]") <input type="text" />

$('#contact-modal').on('show.bs.modal', function() {
   $("input[name=name]").val('ëtestí');
 });

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-modal">
  modal
</button>

<div id="contact-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">◊</a>
        <h3>Contact Form</h3>
      </div>
      <form id="contactForm" name="contact" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" class="form-control">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" class="form-control">
          </div>
          <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" class="form-control"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-success" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>

Answer 2

Ваши вопросы:

• В методе attr используются два параметра ("key", value), а не объект ({key: value})
• Для изменения значений элементов формы вы должны предпочесть метод jQuery val()
• Используемый вами селектор jQuery ("#name") не существует. У вас есть вход с атрибутом name, но не с id="name". Поэтому либо добавьте id="name" к элементу ввода, либо измените селектор jQuery на ("[name=name])
• Ваше значение ëtestí не является строкой, и переменная с таким именем не существует. Я считаю, что это связано с ошибками копирования и вставки.
• Ваш html немного: Атрибут for элемента label нацелен на атрибут id, а не атрибут name. Это поднимает некоторые проблемы доступности. Вы должны либо добавить соответствующий атрибут id к метке, либо обернуть метку вокруг элемента формы

Я включил все это в этот фрагмент

$('#contact-modal').on('show.bs.modal', function() {
  $("[name=name]").val("ëtestí");
})

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-modal">
  modal
</button>

<div id="contact-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">◊</a>
        <h3>Contact Form</h3>
      </div>
      <form id="contactForm" name="contact" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="contactForm-name">Name</label>
            <input type="text" id="contactForm-name" name="name" class="form-control">
          </div>
          <div class="form-group">
            <label for="contactForm-email">Email</label>
            <input type="email"id="contactForm-email" name="email" class="form-control">
          </div>
          <div class="form-group">
            <label for="contactForm-message">Message</label>
            <textarea id="contactForm-message" name="message" class="form-control"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-success" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>

Answer 3

Суть в том, что .attr (...) получает значение объектов только в начале (при создании html). val () получает значение свойства объекта, которое может меняться много раз.

Попробуйте это:

<script>
$('#contact-modal').on('show.bs.modal', function() {
    alert("prima");
    $("#name").val("etesti")
})
</script>

Answer 4

Вы должны выбрать вход по имени:

<script>
    $('#contact-modal').on('show.bs.modal', function() {
        alert("prima");
        $("input[name='name']").val("ëtestí");
    })
</script>

Answer 5

Попробуй вот так

<script>
$('#contact-modal').on('show.bs.modal', function() {
    alert("prima");
    $("#name").val("etesti")
})
</script>