JS name initials

Question

am trying go get "Name Initials" in contact form 7 but am not sure how to do that.

<script type="text/javascript">
var $initials = document.getElementById("initials");
var fullName = 'full-name';
getInitials(fullName);

function getInitials(_name) {
    var names = _name.split(" ");
    var initials = "";
    if (names.length < 2) {
        throw "Please, First name and Last Name!";
    } else {
        initials = String(names[0][0] + ". " + names[names.length - 1][0] + ".").toUpperCase();
        $initials.innerHTML = fullName + " initials: " + "<b>" + initials + "</b>";
        return initials;
    }
}
</script>

......
      <label>FULL NAME (First Middle Last)</label>
        [text* full-name placeholder "First Middle Last"]
        [dynamictext initials-show id:initials]
......

any help welcome!

Answer 1

There were multiple issues with your javascript and cf7 shortcode. So, I had to rewrite most of it. This code is tested and working.

JS

<script type="text/javascript">
var initials = document.getElementById("initials");
var fullName = document.getElementById("fullname");

fullName.addEventListener("input", (e) => {

    var names = e.target.value.split(" ");
    var nameinitials = ""

    if (names.length == 2) {
       var nameinitials = names[0][0].toUpperCase() + "." + names[1][0].toUpperCase();
    }

    if (names.length >= 3) {
       var nameinitials = names[0][0].toUpperCase() + "." + names[1][0].toUpperCase() + "." + names[2][0].toUpperCase();
    }

    initials.value = nameinitials

});

</script>

CF7

<label>FULL NAME (First Middle Last)</label>
[text* full-name placeholder id:fullname "First Middle Last"]
[dynamictext initials-show id:initials]

[submit "SUBMIT"]