All components dhtmlxForm Advanced usage Download files with form

Download files with form

This demo shows how you can download a file by clicking the button in the form
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Download files with form</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		.download_iframe {
			position: absolute;
			left: -100px;
			width: 50px;
			height: 50px;
			overflow: hidden;
			top: 0px;
		}
	</style>
	<script>

		var myForm, formData;

		function doOnLoad() {
			formData = [
				{type: "settings", position: "label-left", labelWidth: 70, inputWidth: 150},
				{type: "block", width: "auto", blockOffset: 0, list: [
					{type: "label", label: "Download Text Document", labelWidth: "auto", offsetTop: 20},
					{type: "combo", label: "Name", name: "name", options: [
						{value: "Trinidad Ellwood", text: "Trinidad Ellwood"},
						{value: "Travis Milne", text: "Travis Milne", selected: true},
						{value: "Latrice Bowman", text: "Latrice Bowman"},
						{value: "Trisha Cooper", text: "Trisha Cooper"},
						{value: "Elliott Campbell", text: "Elliott Campbell"},
						{value: "Vivienne Connolly", text: "Vivienne Connolly"}
					]},
					{type: "combo", label: "Country", name: "country", comboType: "image", comboImagePath: "../common/imgs_combo/", options: [
						{value: "Denmark", img: "denmark.png", text: "Denmark"},
						{value: "Finland", img: "finland.png", text: "Finland", selected: true},
						{value: "Germany", img: "germany.png", text: "Germany"},
						{value: "Italy", img: "italy.png", text: "Italy"}
					]},
					{type: "checkbox", label: "I agree with terms and conditions", checked: false, position: "label-right", labelWidth: "auto", list: [
						{type: "button", name: "download_txt", value: "Download", offsetLeft: 45}
					]}
				]},
				{type: "newcolumn"},
				{type: "block", width: "auto", blockOffset: 30, list: [
					{type: "label", label: "Download Image", labelWidth: "auto", offsetTop: 20},
					{type: "checkbox", label: "aquarium.jpg", checked: false, position: "label-right", labelWidth: "auto", list: [
						{type: "button", name: "download_img", value: "Download", offsetLeft: 45}
					]}
				]}
			];

			myForm = new dhtmlXForm("myForm", formData);
			myForm.getCombo("name").sort("asc");

			myForm.attachEvent("onButtonClick", function(name) {
				if (name == "download_txt") {
					downloadFile("../common/download.php", this.getFormData());
				}
				if (name == "download_img") {
					downloadFile("../common/download.php", {image: "y"});
				}
			});
		}

		var downloadFrame;
		function downloadFile(url, params) {

			// create iframe once if needed
			if (downloadFrame == null) {
				downloadFrame = document.createElement("iframe");
				downloadFrame.className = "download_iframe";
				downloadFrame.name = "download_frame";
				downloadFrame.border = downloadFrame.frameBorder = 0;
				document.body.appendChild(downloadFrame);
			}

			// create form for download request
			var downloadForm = document.createElement("FORM");
			downloadForm.action = url;
			downloadForm.method = "POST";
			downloadForm.target = "download_frame";
			document.body.appendChild(downloadForm);

			// add params to form
			for (var a in params) {
				var input = document.createElement("INPUT");
				input.type = "hidden";
				input.name = a;
				input.value = params[a];
				downloadForm.appendChild(input);
				input = null;
			}

			// submit form
			downloadForm.submit();

			// clear form
			window.setTimeout(function(){
				document.body.removeChild(downloadForm);
				downloadForm = null;
			}, 1);

		};
	</script>
</head>
<body onload="doOnLoad();">
	<div>This demo shows how you can download a file by clicking the button in the form</div>
	<div id="myForm" style="height: 200px;"></div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.