3

I am creating a custom page layout (I am also using a custom masterpage). I have created a CEWP and linked it to a notepad file, the file is just HTML and Javascript

<table border="0" width="200" cellspacing="0" cellpadding="3">
<form name="where">
  <tr>
    <td width="100%">
<select name="city" size="1" onchange="updateclock(this);"> 
<option value="" selected>Local time</option>
<option value="0">London GMT</option> 
<option value="1">Rome</option>
<option value="7">Bangkok</option>
<option value="8">Hong Kong</option>
<option value="9">Tokyo</option> 
<option value="10">Sydney</option>
<option value="12">Fiji</option>
<option value="-10">Hawaii</option>
<option value="-8">San Francisco</option> 
<option value="-5">New York</option>
<option value="-3">Buenos Aires</option>
</select>

</td>
  </tr>
  <tr>
    <td width="100%">
<script language="JavaScript">

/*
Drop Down World Clock- By JavaScript Kit (http://www.javascriptkit.com)
Portions of code by Kurt @ http://www.btinternet.com/~kurt.grigg/javascript
This credit notice must stay intact
*/

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br />')

zone=0;
isitlocal=true;
ampm='';

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}

function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;

if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}


setTimeout('WorldClock()',1000);
}

window.onload=WorldClock
//-->
</script>
</td>
</form>
  </tr>
</table>

however when I click OK after referencing the file in the web part I receive the following message -

enter image description here

I have not seen this error before, would anyone be able help me understand why it is happening?

Thanks

  • check out what String.format("{0:H:m:s tt}",new Date()) gives you in a SharePoint page – Danny '365CSI' Engelman Jan 5 '16 at 11:44
3

I found out why - not good news

https://support.office.com/en-ca/article/Content-Editor-Web-Part-c1350ff6-934c-4c2e-8e53-1ec3b548a0dc

The Content Editor Web Part does not accept the HTML FORM element. If you need to add a Web Part that uses the FORM element, consider using the Page Viewer Web Part or the Form Web Part.

3

After more researching I have found out how to get this to work

As stated here there is already a FORM tag on the top level master page so if you try to add your form in page layout or add html layout with form element on the page using standard Content Editor Web Part you will get nested forms which is not well formed html

All I had to do was created custom form tags so I changed line 2 from

<form name="where">

to

<clockform name="where">

and line 82

</form>

to

</clockform>

Now I have a fully functioning clock in my page layout.

enter image description here

  • Nice. I was going to suggest using Angular.js which essentially does the same thing because you have to use <ng-form> but you also get the added benefit of using Angular to build nice forms! – Arin Zandbergen Jan 11 '17 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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