下記のような処理で、HTMLに8桁の日付を入力後にマウスポインタが離れた時に、JavaScriptでスラッシュ区切りになるような処理を追加したいです。

HTML

<body>
<form id="formId" name="formName" action="cgi-bin/abc.cgi" method="post">
<p>
誕生日:<input type="num" id="birth" name="birth" maxlength="8" max="21000000">
</p>
<p>
<input type="submit" value="送信する" onclick="onButtonClick()">
<input type="reset" value="入力内容をリセットする">
</p>
</form>
</body>

Javascript

function onButtonClick() {
    var str= document.forms.formId.birth.value;
  var date = toDate(str);
}

function toDate (str) {
  var arr = (str.substr(0, 4) + '/' + str.substr(4, 2) + '/' + str.substr(6, 2)).split('/');
  return arr;
}

しかし、toDateの処理で文字列の連結がうまくいきません。なぜでしょうか?すみませんが、ご教示お願いします。