Question

I am working on a CMS system “tries” to support multilingual natively.

I have form fields like

<input name="title[en]" type="text">

and using a slugger plugin which works successfully when I select the input field:

$("input[name=title\\[en\\]]").stringToSlug({getPut: "input[name=url\\[en\\]]"});

Question is: My en,fr,de,es values comes from db. How can make a foreach loop to tell jquery it should write the same line for multiple language like:

$("input[name=title\\[en\\]]").stringToSlug({getPut: "input[name=url\\[en\\]]"});
$("input[name=title\\[fr\\]]").stringToSlug({getPut: "input[name=url\\[fr\\]]"});
$("input[name=title\\[de\\]]").stringToSlug({getPut: "input[name=url\\[de\\]]"});
$("input[name=title\\[es\\]]").stringToSlug({getPut: "input[name=url\\[es\\]]"});

Answer 1

This only involves a simple refactoring technique: make a loop. If you create an array of the languages you want to use, you can use the jQuery .each method to acheive this.

$.each(["en", "fr", "de", "es"], function(index, lang) {
  $("input[name=title\\[" + lang + "\\]]").stringToSlug({getPut: "input[name=url\\[" + lang + "\\]]"}); 
}

If you are concerned about performance and don’t want the overhead involved in the .each method, you can use a traditional for loop instead:

var langs = ["en", "fr", "de", "es"];
for(var i = 0; i < langs.length; i++) {
  var lang = langs[i];
  $("input[name=title\\[" + lang + "\\]]").stringToSlug({getPut: "input[name=url\\[" + lang + "\\]]"}); 
}