Help needed with form submission
Asked by Akhere Areghan:

Hello,

I want to collect responses from my html form to be saved into an output file (txt).

When I test the code below in the preview state it does exactly what I want it to do. When I click on save data to file button I get a pop-up asking me to open or save as (the txt file).

When I published the form in confluence. The save data to file button does not do anything. Please help.

Please see test code used below

\<!DOCTYPE html\>  
\<html\>  
\<head\>  
\<title\>Save form Data in a Text File using JavaScript\</title\>  
\<style\>  
\* {  
box-sizing: border-box;  
}  
div {  
padding: 10px;  
background-color: #f6f6f6;  
overflow: hidden;  
}  
input\[type=text\], textarea, select {  
font: 17px Calibri;  
width: 100%;  
padding: 12px;  
border: 1px solid #ccc;  
border-radius: 4px;  
}  
input\[type=button\]{  
font: 17px Calibri;  
width: auto;  
float: right;  
cursor: pointer;  
padding: 7px;  
}  
\</style\>  
\</head\>  
\<body\>  
\<div\>  

\<!--Add few elements to the form--\>

\<div\>  
\<input type="text" id="txtName" placeholder="Enter your name" /\>  
\</div\>  
\<div\>  
\<input type="text" id="txtAge" placeholder="Enter your age" /\>  
\</div\>  
\<div\>  
\<input type="text" id="txtEmail" placeholder="Enter your email address" /\>  
\</div\>  
\<div\>  
\<select id="selCountry"\>  
\<option selected value=""\>-- Choose the country --\</option\>  
\<option value="India"\>India\</option\>  
\<option value="Japan"\>Japan\</option\>  
\<option value="USA"\>USA\</option\>  
\</select\>  
\</div\>  
\<div\>  
\<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"\>\</textarea\>  
\</div\>  
\<div\>  
\<input type="button" id="bt" value="Save data to file" onclick="saveFile()" /\>  
\</div\>

\</div\>  
\</body\>  
\<script\>  
let saveFile = () =\> {  

// Get the data from each element on the form.  
const name = document.getElementById('txtName');  
const age = document.getElementById('txtAge');  
const email = document.getElementById('txtEmail');  
const country = document.getElementById('selCountry');  
const msg = document.getElementById('msg');  

// This variable stores all the data.  
let data =  
'\\r Name: ' + name.value + ' \\r\\n ' +  
'Age: ' +age.value + ' \\r\\n ' +  
'Email: ' + email.value + ' \\r\\n ' +  
'Country: ' + country.value + ' \\r\\n ' +  
'Message: ' + msg.value;  

// Convert the text to BLOB.  
const textToBLOB = new Blob(\[data\], { type: 'text/plain' });  
const sFileName = 'formData.txt'; // The file to save the data.

let newLink = document.createElement("a");  
newLink.download = sFileName;

if (window.webkitURL != null) {  
newLink.href = window.webkitURL.createObjectURL(textToBLOB);  
}  
else {  
newLink.href = window.URL.createObjectURL(textToBLOB);  
newLink.style.display = "none";  
document.body.appendChild(newLink);  
}

newLink.click();  
}  
\</script\>  
\</html\>


Answers:
author: marc -Collabello--Phase Locked-
body: Hi [@Akhere Areghan](/t5/user/viewprofilepage/user-id/4583588) , Confluence will filter out (remove) the code in the \`\<script\>\` tag. The reason is that Confluence does not allow embedded scripts, because they can be a security risk.

comments: author: Akhere Areghan
body: Thanks Marc Please do you know of an alternative method to use? That would enable me achieve my goal? [@marc -Collabello--Phase Locked-](/t5/user/viewprofilepage/user-id/1205132)


author: marc -Collabello--Phase Locked-
body: There's no simple solution which works like your script. Your options are:

* use a form addon and save the data in Confluence
* build your own addon using Atlassian frameworks (needs lots of programming)


author: Akhere Areghan
body: Thanks [@marc -Collabello--Phase Locked-](/t5/user/viewprofilepage/user-id/1205132) much appreciated


Tags: cloud

confluence-cloud