PalleDK · March 3, 2025 16:25
diff --git a/index.dna b/index.dna
 <!DOCTYPE html>
 <html lang="en">

 <!--HAS_WEBDNA_TAGS-->

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple AJAX/WebDNA Forms Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #eee;
        }
        form {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 15px;
        }
        input {
            padding: 8px;
            width: 300px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px 15px;
        }
             
        .container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        .box {
            width: 300px;
            height: 150px;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
        }
        .box:nth-child(2) { background-color: lightgreen; }                
    </style>
 </head>
 <body>

 <h1>Multiple AJAX Forms</h1>
 <p>Update content using Ajax and WebDNA without reloading page</p>

 <div class="container">
 	<div class="box" id="area_1">Box 1<br>[cart]</div>
 	<div class="box" id="area_2">Box 2<br>[cart]</div>
 </div>

 <!-- Form 1 -->
 <form class="WebDNA_AjaxForm">
 	<input name="dnaID" value="area_1" type="hidden">
 	<input type="text" id="request1" name="request" required>
 	<button type="submit">Submit</button>
 </form>

 <!-- Form 2 -->
 <form class="WebDNA_AjaxForm">
 	<input name="dnaID" value="area_2" type="hidden">
 	<input type="text" id="request2" name="request" required>
 	<button type="submit">Submit</button>
 </form>

 <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.WebDNA_AjaxForm').forEach(function(form) {
            form.addEventListener('submit', function(event) {
                event.preventDefault(); // Prevent form submission
                
                var requestName = this.querySelector('input[name="request"]').value; // Get request name from the current form
                var dnaID = this.querySelector('input[name="dnaID"]').value; // Get dnaID from the current form
                
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'parse.dna?request=' + encodeURIComponent(requestName) + '&dnaID=' + encodeURIComponent(dnaID), true); // Send request name and dnaID as parameters
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        document.getElementById(dnaID).innerHTML = xhr.responseText; // Insert the content into the element with the id specified by dnaID
                    } else {
                        document.getElementById(dnaID).innerHTML = 'Error loading content.';
                    }
                };
                xhr.onerror = function() {
                    document.getElementById(dnaID).innerHTML = 'Error loading content.';
                };
                xhr.send();
            });
        });
    });
 </script>

 </body>
 </html>
diff --git a/parse.dna b/parse.dna
 <!--HAS_WEBDNA_TAGS-->

 [showif [dnaID]=area_1]
 Box 1<br>[cart]<br>[request]
 [/showif]

 [showif [dnaID]=area_2]
 Box 2<br>[cart]<br>[request]
 [/showif]
	<!DOCTYPE html>
	<html lang="en">

	<!--HAS_WEBDNA_TAGS-->

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Multiple AJAX/WebDNA Forms Example</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	background-color: #eee;
	}
	form {
	margin-bottom: 20px;
	border: 1px solid #ccc;
	padding: 15px;
	}
	input {
	padding: 8px;
	width: 300px;
	margin-bottom: 10px;
	}
	button {
	padding: 10px 15px;
	}

	.container {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	}
	.box {
	width: 300px;
	height: 150px;
	background-color: lightblue;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	}
	.box:nth-child(2) { background-color: lightgreen; }
	</style>
	</head>
	<body>

	<h1>Multiple AJAX Forms</h1>
	<p>Update content using Ajax and WebDNA without reloading page</p>

	<div class="container">
	<div class="box" id="area_1">Box 1<br>[cart]</div>
	<div class="box" id="area_2">Box 2<br>[cart]</div>
	</div>

	<!-- Form 1 -->
	<form class="WebDNA_AjaxForm">
	<input name="dnaID" value="area_1" type="hidden">
	<input type="text" id="request1" name="request" required>
	<button type="submit">Submit</button>
	</form>

	<!-- Form 2 -->
	<form class="WebDNA_AjaxForm">
	<input name="dnaID" value="area_2" type="hidden">
	<input type="text" id="request2" name="request" required>
	<button type="submit">Submit</button>
	</form>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	document.querySelectorAll('.WebDNA_AjaxForm').forEach(function(form) {
	form.addEventListener('submit', function(event) {
	event.preventDefault(); // Prevent form submission

	var requestName = this.querySelector('input[name="request"]').value; // Get request name from the current form
	var dnaID = this.querySelector('input[name="dnaID"]').value; // Get dnaID from the current form

	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'parse.dna?request=' + encodeURIComponent(requestName) + '&dnaID=' + encodeURIComponent(dnaID), true); // Send request name and dnaID as parameters
	xhr.onload = function() {
	if (xhr.status === 200) {
	document.getElementById(dnaID).innerHTML = xhr.responseText; // Insert the content into the element with the id specified by dnaID
	} else {
	document.getElementById(dnaID).innerHTML = 'Error loading content.';
	}
	};
	xhr.onerror = function() {
	document.getElementById(dnaID).innerHTML = 'Error loading content.';
	};
	xhr.send();
	});
	});
	});
	</script>

	</body>
	</html>
	<!--HAS_WEBDNA_TAGS-->

	[showif [dnaID]=area_1]
	Box 1<br>[cart]<br>[request]
	[/showif]

	[showif [dnaID]=area_2]
	Box 2<br>[cart]<br>[request]
	[/showif]