I want to combine the data entered into these four fields into one slug. The slug should look like the following: firstname-middlename-lastname-suffix. How can this be done? Here is my code so far:
<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>
You should use convertToSlug like a common function. And in the function, you get the value of all elements and process it.
You can see the live demo here:
/* 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>see if you like this technique to achive same thing i have tried simplifying your code with an example below
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>