nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

HTML macro

Hua Yang

I was testing out HTML Macro, enabled by our admin, by using a very simple page, including a simple JScript. The HTML was running fine if directly loaded into browser (I use Chrome), however it doesn't work if included as part of confluence page. The code is like this, and "action="javascript:handleIt()"" is not calling the function "handleit" at all when this code is part of confluence page. Please help me understand. Thanks.

<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script type="text/javascript">

function handleIt() {
alert("hello");
}

</script>
</head>

<body>
<form name="CandidateTable" action="javascript:handleIt()">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input name="Submit" type="submit" value="Add Candidate"/>
</form>
</body>

</html>

Accepted answers

Davin Studer

In the html macro just do something like this. Don't add the html, head, or body elements ... that is invalid html. You cannot nest a html DOM tree within a body element.

&lt;style type="text/css"&gt;
table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}
td, th {
	border: 1px solid #dddddd;
	text-align: left;
	padding: 8px;
}
tr:nth-child(even) {
	background-color: #dddddd;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function handleIt() {
	alert("hello");
}
&lt;/script&gt;
&lt;form name="CandidateTable" action="javascript:handleIt()"&gt;
	First name:&lt;input type="text" name="fname"&gt;&lt;br&gt;
	Last name: &lt;input type="text" name="lname"&gt;&lt;br&gt;
	&lt;input name="Submit" type="submit" value="Add Candidate"/&gt;
&lt;/form&gt;

You would need to save the data elsewhere though. The above html will not save it to Confluence. You could achieve this through AJAX calls to a web service (that you create). I think a better method if you want to do it all in Confluence would be to check out ConfiForms. You can create forms like that (without programming) and store the data. You can do CRUD (create, update, delete) operations on the data and all sort of reporting. It's not free, but it is surprisingly well priced for all the slew of things it can do.

All comments

Nic Brough -Adaptavist-

It's too late for javascript to execute in the body of a macro - the <head> section of your code is effectively ignored because the <head> of the page has already been completed before the body of the page starts.

Hua Yang

Thank you, @Nic Brough [Adaptavist], for your answer. Would you kindly share how it should be modified? I saw on the answer to another post that <html> <head> and <body> should not be used in html macro, so I deleted those tags, and still same thing that the JScript is not getting executed as the form action.

My final goal is to have a page where someone can enter information (thru a form), keep those information saved on server, and have a checkbox for each item to indicate if any of them is claimed by anyone (like a simple check-in/check-out system). Is there a way to achieve this goal, all within a confluence page?

Thank you very much!

Nic Brough -Adaptavist-

As I said, your javascript won't run. The point is that your scripts need to be placed in the structure of the page, not as part of the content.

Confluence is not a checking system or for doing "forms", it's a wiki-like documentation system. You might find some add-ons in the marketplace to help you, but I'd be looking at something that has a proper process flow, like JIRA

Davin Studer

In the html macro just do something like this. Don't add the html, head, or body elements ... that is invalid html. You cannot nest a html DOM tree within a body element.

&lt;style type="text/css"&gt;
table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}
td, th {
	border: 1px solid #dddddd;
	text-align: left;
	padding: 8px;
}
tr:nth-child(even) {
	background-color: #dddddd;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function handleIt() {
	alert("hello");
}
&lt;/script&gt;
&lt;form name="CandidateTable" action="javascript:handleIt()"&gt;
	First name:&lt;input type="text" name="fname"&gt;&lt;br&gt;
	Last name: &lt;input type="text" name="lname"&gt;&lt;br&gt;
	&lt;input name="Submit" type="submit" value="Add Candidate"/&gt;
&lt;/form&gt;

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

html

html-macro