Convert string to a slug from multiply text fields using Javascript in real-time-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>