How to set value of one input field based on another input field?

Question

I am trying to set the value of slug field by manipulating the input of another field title using JavaScript. When I type in the slug and then again i start typing in the title field the value of slug field doesn't get updated. here is my form

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>

zer00ne · Accepted Answer · 2019-01-24 15:49:25Z

Event Object

Always pass the Event Object⁰ to an event listener/handler/callback:

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

Note that the callback function syncData()¹ is a named function that's not wrapped in the event listener. Also note that when called by an event listener/handler the parenthesis ()² are removed. The reason why is because when rendered, () would run immediately rather than run when a registered event is fired. One last thing for this part is the DOM Object registered to the input event: document.forms[0]. That is a reference to the <form> tag via document.forms interface

`Event.target` & `Event.currentTarget`

The event properties: Event.target¹ and Event.currentTarget⁰ come from the Event Object. e.target is a reference to the tag that was clicked, inputted, etc. (ex. #slug) and e.currentTarget is a reference to the ancestor tag that's registered to the event (ex. form). The form.elements is an array-like object that contains all form fields of a given form, the .elements² property makes it possible to reference any of form controls by id or name -- this: form.elements.fields.title.value is the same as: document.getElementById('title').value;

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

Demo

I wasn't 100% sure about how you wanted the text input behavior so I made the typing in sync both ways.

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

Silvio Biasiol · Accepted Answer · 2019-01-24 12:58:51Z

1

Hi try using the value property instead:

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);
});

Should work :)

This is because value should be accessed with the dot notation and also setAttribute is used to modify the original value of the input which in your case is not present

edited Jan 24, 2019 at 12:58

answered Jan 24, 2019 at 12:50

Silvio Biasiol

9649 silver badges14 bronze badges

2 Comments

Randy Casburn Over a year ago

Please explain why this works so the OP can understand your change.

Silvio Biasiol Over a year ago

Yes, sorry I'm adding an explanation

Collectives™ on Stack Overflow

How to set value of one input field based on another input field?

2 Answers 2

Event Object

`Event.target` & `Event.currentTarget`

Demo

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Event.target & Event.currentTarget

Demo

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`Event.target` & `Event.currentTarget`