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

Я пытаюсь создать форму с помощью начальной загрузки 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í
    });
  })

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

больше нет id = "name" в вашем html

— 12.03.2019 10:12

пожалуйста, прикрепите html и скрипт в одном фрагменте кода для лучшей проверки и понимания

— 12.03.2019 10:13

javascript html css forms bootstrap-4

12.03.2019 10:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 232

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

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

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

12.03.2019 10:10

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

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

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

12.03.2019 10:16

Ответ принят как подходящий

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

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

Грэйзи Милле! Ora ho un ultimo dubbio: mi chiedevo se fosse possibile impostare un valore massimo di cifre che possono essere digitate in un campo del form

— 12.03.2019 12:00

С помощью JavaScript выполните следующее решение: stackoverflow.com/questions/8354975/…

— 12.03.2019 12:09

12.03.2019 10:18

Ваши проблемы:

Метод 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>

12.03.2019 10:28

в 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>

12.03.2019 10:58

Другие вопросы по теме

Встроенная публикация в Instagram недостаточно отзывчива

Как получить доступ ко всем данным в вызове API

Как настроить изображение, не затрагивая фоновое изображение в HTML и CSS

Поместите изображение, отвечающее требованиям

Входные значения флажков во всплывающем окне не передаются через POST

Мне нужно изменить текст при нажатии определенной кнопки

У меня есть всплывающая подсказка на чистом CSS, которая состоит из псевдоэлементов, принимая содержимое за атрибут, как мне добавить ссылку во всплывающую подсказку?

Получить значение в текстовое поле, сравнив два значения из двух полей со списком

Лучшая практика в HTML? Как удалить запись таблицы с помощью отправки?

Проверка маски ввода

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

Ответы 5

Другие вопросы по теме

Похожие вопросы