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>
2 answers
solution1
0 2019-01-24 12:50:41
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
solution2
0 2019-01-24 15:49:25
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.