Quiero combinar los datos ingresados en estos cuatro campos en un solo slug. El slug debería tener el siguiente aspecto: nombre-segundo nombre-apellido-sufijo. ¿Cómo se puede hacer esto? Aquí está mi código hasta ahora:
<label for="first_name" />First Name</label> <input onload="convertToSlug(this.value)" onkeyup="convertToSlug(this.value)" type="text" name="first_name" value="" /> <label for="middle_name" />Middle Name</label> <input onload="convertToSlug(this.value)" onkeyup="convertToSlug(this.value)" type="text" name="middle_name" value="" /> <label for="last_name" />Last Name</label> <input onload="convertToSlug(this.value)" onkeyup="convertToSlug(this.value)" type="text" name="last_name" value="" /> <label for="suffix" />Suffix</label> <input onload="convertToSlug(this.value)" onkeyup="convertToSlug(this.value)" type="text" name="suffix" value="" /> </form> <script> /* Encode string to slug */ function convertToSlug( str ) { //replace all special characters | symbols with a space str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ').toLowerCase(); // trim spaces at start and end of string str = str.replace(/^\s+|\s+$/gm,''); // replace space with dash/hyphen str = str.replace(/\s+/g, '-'); document.getElementById('url').value = str; //return str; } </script> <form> <input type="text" id="url" name="url" value="" /> </form>Debe usar convertToSlug como una función común. Y en la función, obtienes el valor de todos los elementos y los procesas.
Puedes ver la demostración en vivo aquí:
/* Encode string to slug */ function convertToSlug() { var first_name = document.getElementById('first_name').value; var middle_name = document.getElementById('middle_name').value; var last_name = document.getElementById('last_name').value; var suffix = document.getElementById('suffix').value; // put all text into a array to join by dash var strings = [first_name, middle_name, last_name, suffix]; // filter the empty value before join to ignore empty input var str = strings.filter(e => e.length > 0).join('-'); //replace all special characters | symbols with a space str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ').toLowerCase(); // trim spaces at start and end of string str = str.replace(/^\s+|\s+$/gm, ''); // replace space with dash/hyphen str = str.replace(/\s+/g, '-'); document.getElementById('url').value = str; //return str; } <form> <div> <label for="first_name" />First Name</label> <input onkeyup="convertToSlug()" type="text" name="first_name" id="first_name" value="" /> </div> <div> <label for="middle_name" />Middle Name</label> <input onkeyup="convertToSlug()" type="text" name="middle_name" id="middle_name" value="" /> </div> <div> <label for="last_name" />Last Name</label> <input onkeyup="convertToSlug()" type="text" name="last_name" id="last_name" value="" /> </div> <div> <label for="suffix" />Suffix</label> <input onkeyup="convertToSlug()" type="text" name="suffix" id="suffix" value="" /> </div> <div> <label for="suffix" />Slug/Result</label> <input type="text" id="url" name="url" value="" /> </div> </form>vea si le gusta esta técnica para lograr lo mismo que he intentado simplificar su código con un ejemplo a continuación
var root = document.querySelector(".root"), resultEl = document.querySelector(".result") root.oninput = function(){ resultEl.innerText = getValues(root) } function getValues(el){ var output = "" el.querySelectorAll(".values").forEach(each=>{ if(each.value != ""){output += each.value + "-"} }) return output.slice(0,-1) } <div class="root"> <input class="values" type="text"> <input class="values" type="text"> <input class="values" type="text"> <input class="values" type="text"> <div class="result"></div> </div>