Как установить значение одного поля ввода на основе другого поля ввода? - PullRequest
Новая
       6

Как установить значение одного поля ввода на основе другого поля ввода?

0 голосов
/ 24 января 2019

Я пытаюсь установить значение поля slug, манипулируя вводом другого заголовка поля, используя JavaScript. Когда я набираю пробку, а затем снова начинаю печатать в поле заголовка, значение поля пробки не обновляется. вот моя форма 

document.getElementById('title').addEventListener("input", function(){
    let title = document.getElementById('title').value;       
    console.log(title);
    title = title.toLowerCase();
    title = title.replace(/\s+/g, '-');
    document.getElementById('slug').setAttribute("value", title);
    console.log(document.getElementById('slug').value);
});
<form method="POST" action="http://laravel.dv/admin/blog/post/store" id="create-post" enctype="multipart/form-data">
  <input type="hidden" name="_token" value="2HeXBBKd1HSmpuGvjYqF1KygbGsCQaZtkuUthi1s">            <div class="page-title">
      <h1>Create A Blog</h1>
  </div>
  <br>
  <div class="row">
    <div class="col-12">
      <div class="form-control">
          <input type="text" id="title" name="title" value="" placeholder="Title" >
      </div>
      <div class="form-control">
          <input type="text" id="slug" name="slug" value="" placeholder="Slug" >
      </div>
      <div class="form-control">
          <input type="file" name="image" placeholder="Image upload">
      </div>
      <div style="margin: 0 0 20px;">
          <textarea name="body" id="summernote"></textarea>
      </div>
    </div>
      <div class="col-12">
          <input type="submit" name="btnSubmit" class="btn-primary" value="Save Post" />
      </div>
  </div>
</form>

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Объект события

Всегда передавать объект события⁰ слушателю / обработчику / обратному вызову события: 

document.forms[0].addEventListener("input", syncData); 
           ³                                     ²
function syncData(eventObj) {...
           ¹         ⁰

Обратите внимание, что обратный вызовfunction syncData() ¹ - это именованная функция, которая не включена в прослушиватель событий.Также обратите внимание, что при вызове прослушивателем / обработчиком событий скобки () ² удаляются.Причина в том, что при визуализации () будет запускаться немедленно, а не запускаться при запуске зарегистрированного события.Последнее, что нужно сделать в этой части, - это объект DOM, зарегистрированный для события ввода: document.forms[0].Это ссылка на тег <form> через document.forms интерфейс

Event.target & Event.currentTarget

Свойства события: Event.target ¹ и Event.currentTarget ⁰ происходят из объекта события.e.target - это ссылка на тег, который был нажат, введен и т. Д. (Например, #slug), а e.currentTarget - это ссылка на тег предка, зарегистрированный для события (например, form).form.elements является массивоподобным объектом, который содержит все поля формы данного form, свойство .elements ² позволяет ссылаться на любой из элементов управления формы с помощью id или name - это: form.elements.fields.title.value совпадает с: document.getElementById('title').value;

  const form = e.currentTarget;⁰
  const active = e.target;¹
  const fields = form.elements;²

Демо

Я не был на 100% уверен в том, какВы хотели, чтобы ввод текста был таким, чтобы я синхронизировал набор текста в обоих направлениях. 

<!DOCTYPE html>
<html>

<head>
  <style>
    .as-console-wrapper {
      width: 350px;
      min-height: 100%;
      margin-left: 45%;
    }
    
    .as-console-row.as-console-row::after {
      content: '';
      padding: 0;
      margin: 0;
      border: 0;
      width: 0;
    }
  </style>
</head>

<body>
  <form method="POST" action="http://laravel.dv/admin/blog/post/store" id="create-post" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="2HeXBBKd1HSmpuGvjYqF1KygbGsCQaZtkuUthi1s">
    <div class="page-title">
      <h1>Create A Blog</h1>
    </div>
    <br>
    <div class="row">
      <div class="col-12">
        <div class="form-control">
          <input type="text" id="title" name="title" value="" placeholder="Title">
        </div>
        <div class="form-control">
          <input type="text" id="slug" name="slug" value="" placeholder="Slug">
        </div>
        <div class="form-control">
          <input type="file" name="image" placeholder="Image upload">
        </div>
        <div style="margin: 0 0 20px;">
          <textarea name="body" id="summernote"></textarea>
        </div>
      </div>
      <div class="col-12">
        <input type="submit" name="btnSubmit" class="btn-primary" value="Save Post" />
      </div>
    </div>
  </form>
  <script>
    document.forms[0].addEventListener("input", syncData);

    function syncData(e) {
      const form = e.currentTarget;
      const active = e.target;
      const fields = form.elements;
      let txt;
      if (active.type === 'text') {
        txt = active.value.toLowerCase().replace(/\s+/g, '-');
        console.log(txt);
        active.title = txt;
        fields.title.value = txt;
        fields.slug.value = txt;
      }
    }
  </script>
</body>

</html>
0 голосов
/ 24 января 2019

Здравствуйте, попробуйте вместо этого использовать свойство value: 

document.getElementById('title').addEventListener("input", function(){
  let title = document.getElementById('title').value;        
  console.log(title);
  title = title.toLowerCase();
  title = title.replace(/\s+/g, '-');
  document.getElementById('slug').value = title;
  console.log(document.getElementById('slug').value);
});

Должно работать:)

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

...