如何基于另一个输入字段设置一个输入字段的值？

Question

我试图通过使用JavaScript操纵另一个字段标题的输入来设置slug字段的值。当我键入子弹，然后再次开始在标题字段中键入时，子弹字段的值不会得到更新。这是我的表格

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

                  
        

def get(self, request, *args, **kwargs):
    context = {}
    context['devices'] = get_devices(request.user)
    return render(request, self.template_name, context)

def post(self, request, *args, **kwargs):
    post_data = request.POST
    print(request.POST.getlist('devices_selected'))
    save_data(request.POST.getlist('devices_selected')) 
    return redirect('/dashboard.html')

Answer 1

您好，尝试使用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还用于修改输入的原始值（在您的情况下不存在）

Answer 2

Event Object

始终将事件对象⁰传递给事件侦听器/处理程序/回调：

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

请注意，回调function syncData()¹是一个没有包装在事件侦听器中的命名函数。另请注意，当由事件侦听器/处理程序调用时，括号()²被删除。原因是因为()在呈现时将立即运行，而不是在触发注册事件时运行。这部分的最后一件事是注册到输入事件document.forms[0]的DOM对象。这是通过document.forms界面对<form>标签的引用

---

Event.target和Event.currentTarget

事件属性：Event.target¹和Event.currentTarget⁰来自事件对象。 e.target是对单击，输入等的标签的引用（例如#slug），e.currentTarget是对已注册到事件的祖先标签的引用（例如{ {1}}）。 form是一个类似数组的对象，包含给定form.elements的所有表单字段，.elements²属性使通过form或id-这个：name与：form.elements.fields.title.value

document.getElementById('title').value;

---

演示

我不确定您希望文本输入行为如何，因此我无法同时进行两种输入。

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