1

I'm using Sharepoint Online through our company's Office 365 subscription. I wrote a page that generates a company standard email signature:

<html>
<head>
<style type="text/css">
div.row {margin:0 0 5px 0;float:left;width:100%;padding:6px 0;}
div.row label {float:left;display:block;width:15em;padding:0 6px;}
</style>
</head>
<body>
<div>
   <h1 id="pageTitle">Email Signature Generator</h1>
</div> 
<br>
<br>
<div class="row">
    <label for="txt_FullName" id="FullName-ariaLabel">Full Name</label>
    <input id="txt_FullName" name="txt_FullName" type="text"/>
</div>
<div class="row">
    <label for="txt_JobTitle" id="JobTitle-ariaLabel">Job Title</label>
    <input id="txt_JobTitle" name="txt_JobTitle" type="text" />
</div>
<div class="row">
    <label for="txt_DirectPhoneNumber" id="DirectPhoneNumber-ariaLabel">Direct Phone Number (xxx.xxx.xxxx):</label>
    <input id="txt_DirectPhoneNumber" name="txt_DirectPhoneNumber" type="text" />
</div>
<div class="row">
    <label for="txt_EmailAddress" id="EmailAddress-ariaLabel">Email Address:</label>
    <input id="txt_EmailAddress" name="txt_EmailAddress" type="text" />
</div>
<div class="row">
<input type="checkbox" id="social" checked="checked" />&nbsp;Include social media links and images?
</div>
<div class="row">
<input type="submit" id="btnSubmit" value="Submit form" />
</div>

<div id="signaturePanel" style="display:none">
  <div style="font-size:10pt; font-family:'Arial',sans-serif;color:#0E5881;">
    Please copy/paste everything below the line into your email signature:
  </div>
  <hr>
  <br>
  <br>
  <div style="font-size:12pt; font-family:'Arial',sans-serif;color:#133467">
    <b><span id="fullNameOut"></span></b>
  </div>
  <div style="font-size:10pt; font-family:'Arial',sans-serif;color:#0E5881">
    <span id="jobTitleOut"></span>
  </div>
  <div style="font-size:10pt; font-family:'Arial',sans-serif;color:#656565">
    <b>Office:&nbsp;</b>123.123.1230&nbsp;&#124;&nbsp;Direct:</b>&nbsp;<span id="phoneNumberOut"></span>&nbsp;&#124;&nbsp;<b>Fax:</b>&nbsp;123.123.1230
    <br>
    <a id="emailOut" href="mailto:"></a>&nbsp;&#124;&nbsp;<a href="http://www.example.com">www.Example.com</a>
  </div>
  <br>
  <div style="font-size:20pt; font-family:'Arial',sans-serif;color:#676767">
    <b>Example.com</b>
  </div>
      <div id="socialOut" style="display:none">
    <a href="https://twitter.com"><img src="twitimg.png" alt="Twitter" height="54" width="54"></a>
    <a href="https://www.linkedin.com/"><img src="liimg.png" alt="LinkedIn" height="54" width="54"></a>
    <a href="http://www.example.com"><img src="blogimg.png" alt="Blog" height="54" width="54"></a>
    </div>
  <br>

  <script type="text/javascript" language="javascript">
    document.getElementById("btnSubmit").addEventListener("click", function() {
  document.getElementById("signaturePanel").style.display = "inherit";
  document.getElementById("fullNameOut").innerHTML = document.getElementById("txt_FullName").value;
  document.getElementById("jobTitleOut").innerHTML = document.getElementById("txt_JobTitle").value;
  document.getElementById("phoneNumberOut").innerHTML = document.getElementById("txt_DirectPhoneNumber").value;
  var email = document.getElementById("txt_EmailAddress").value;
  var emailOut = document.getElementById("emailOut");
  emailOut.innerHTML = email;
  emailOut.href = "mailto:" + email;
  if (document.getElementById("social").checked) {
    document.getElementById("socialOut").style.display = "inherit";
  }
});
</script>
</body>
</html>

It runs OK within a Sharepoint page, however, when it submits and shows the result it lasts for about 3 seconds and the page seems to refresh and the page goes back to scratch, removing the results. I've tried to add the code to the source of the page, use a Page Viewer Web Part, and embedding the code. It all has the same result. Is there a way to get this content to run in Sharepoint Online?

1 Answer 1

1

I figured it out shortly after I posted. I changed

<input type="submit" id="btnSubmit" value="Submit form" />

to

<input type="button" id="btnSubmit" value="Submit form" />

From what I was able to find, type="submit" posts the form content, which looks like a page refresh.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.