How to write in 2 input at the same time - php

Question

Do you have any idea how to write text in two inputs at the same time, what is written in input 1 appears in input 2 but modified for example:
hello do you have any idea how to write text in two inputs at the same time, what is written in input 1 appears in input 2 but modified for example:
Input 1: this is a text
input 2: this-is-a-text
I try to use str_replace () but I can't do it in real time
<?php
$texto = $_POST['title'];
$urlcambiado = str_replace(" ", "-", $texto);
?>
<input type="text" name="title" class="form-control" placeholder="Ejemplo: sword-art-online">
<input type="text" name="url_code" class="form-control" placeholder="Ejemplo: sword-art-online">

Answer 1

This will do what you want using pure javascript:
function URLChange(titlestr) {
var url=titlestr.replace(/ /g,"-");
document.getElementsByName("url_code")[0].value=url;
}
<input type="text" name="title" class="form-control" placeholder="Ejemplo: sword-art-online" onkeyup='URLChange(this.value);'>
<input type="text" name="url_code" class="form-control" placeholder="Ejemplo: sword-art-online">

Answer 2

This has to be done on client-side using JavaScript and goes a little bit like this:
Reference the two input fields
Both have it's name attribute set to title and url_code respectively. To get a reference to it we can use the getElementsByName() method which returns a HTMLCollection - an array. Since there's just one element for each name we can append a [0] to get the first element in the array.
var firstInput=document.getElementsByName("title")[0];
var secondInput=document.getElementsByName("url_code")[0];
Attach an input event listener
To find out if the user has typed anything into the first input we need to use this listener which invokes a callback function we can then use to get the actual text.
firstInput.addEventListener("input",process);
Modify the text inside the second input
Inside the callback function we can retrieve the text from the first input, use a regular expression to replace whitespaces by a minus sign and assign the text to the second text field.
function process(e) {
secondInput.value = e.target.value.replace(/\s/g, '-');
}
Here's a complete example:
var firstInput = document.getElementsByName("title")[0];
var secondInput = document.getElementsByName("url_code")[0];
function process(e) {
secondInput.value = e.target.value.replace(/\s/g, '-');
}
firstInput.addEventListener("input", process);
<input type="text" name="title" class="form-control" placeholder="Ejemplo: sword-art-online">
<input type="text" name="url_code" class="form-control" placeholder="Ejemplo: sword-art-online">