JavaScript: onClick event works without firing

Question

I'm modifying a template taken from somewhere on the internet. Here, pagination is done. The end page will have the form submission. I tried to modify it without affecting any of the CSS. So I didn't change the tag to button. I'm using anchor tag with an onClick event which will submit the form. But the onClick event works on page loading instead of onClicking.

function renderPagination(wizard, options, state) {
  if (options.enablePagination) {
    var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
      buttonTemplate = "<li><a href=\"#{0}\" role=\"menuitem\">{1}</a></li>",
      submitButtonTemplate = "<li><a href = \'#{0}\' onClick=" + document.getElementById('studentForm').submit() + " role=\"menuitem\">{1}</a></li>",
      buttons = "";

    if (!options.forceMoveForward) {
      buttons += buttonTemplate.format("previous", options.labels.previous);
    }

    buttons += buttonTemplate.format("next", options.labels.next);

    if (options.enableFinishButton) {
      buttons += buttonTemplate.format("finish", options.labels.finish);
    }

    if (options.enableCancelButton) {
      buttons += buttonTemplate.format("cancel", options.labels.cancel);
    }

    wizard.append(pagination.format(options.actionContainerTag, options.clearFixCssClass,
      options.labels.pagination, buttons));

    refreshPagination(wizard, options, state);
    loadAsyncContent(wizard, options, state);
  }
}

Answer 1

You're not actually passing the JS to be executed into the string template, you're actually executing that JS and inserting the toString result of that execution into the template, your variable assignment should be:

      submitButtonTemplate = "<li><a href = \'#{0}\' onClick=" + "\"document.getElementById('studentForm').submit()\"" + " role=\"menuitem\">{1}</a></li>",