OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 bindex.php	5.85 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 createForm.php	4.21 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 function.php	1.11 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 index.php	5.67 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 save-form.php	2.13 KB	05/19/2025 10:07:19 AM	rw-r--r--

Editing: index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form Builder</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <style>
        .container {
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

.form-builder,
        .form-preview {
            width: 100%;
        }

.form-builder input {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="step-1" style="width: 100%;">
            <h1 class="text-center mb-4">Dynamic Form Builder</h1>
            <h3 class="text-left">What do you want to build?</h3>
            <form id="form-type-form" onsubmit="startCustomForm(event)">
                <div class="mb-3">
                    <input type="text" id="form-type" name="formType" class="form-control" placeholder="Enter form type (e.g., Registration Form)" required>
                </div>
                <button type="submit" class="btn btn-primary mt-3">Next</button>
            </form>
        </div>

<div id="step-2" class="form-builder d-none">
            <h1 class="text-center mb-4">Dynamic Form Builder</h1>
            <h3>Enter form attributes:</h3>
            <form id="field-form">
                <div class="mb-3">
                    <input type="text" id="field-name" class="form-control" placeholder="Field Name" required>
                </div>
                <div class="mb-3">
                    <input type="text" id="field-type" class="form-control" placeholder="Field Type (text, email, password, etc.)" required>
                </div>
                <button type="button" class="btn btn-success mt-3" onclick="addField()">Add Field</button>
            </form>
        </div>

<div class="form-preview d-none" style="padding-top: 3rem;">
            <h3>Preview of Your Form:</h3>
            <form id="generated-form">
            </form>
            <button class="btn btn-primary mt-3" onclick="submitForm()">Submit</button>
        </div>
    </div>

function startCustomForm(event) {
            event.preventDefault();
            formType = document.getElementById('form-type').value;
            document.getElementById('step-1').classList.add('d-none');
            document.getElementById('step-2').classList.remove('d-none');
        }

function addField() {
            const fieldName = document.getElementById('field-name').value;
            const fieldType = document.getElementById('field-type').value;

if (!fieldName || !fieldType) {
                alert("Please enter both field name and field type.");
                return;
            }

let label = document.createElement('label');
            label.textContent = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
            label.classList.add('form-label');

let input = document.createElement('input');
            input.type = fieldType; // Use the user-specified type
            input.name = fieldName;
            input.classList.add('form-control');
            input.placeholder = `Enter your ${fieldName}`;

let formGroup = document.createElement('div');
            formGroup.classList.add('mb-3');
            formGroup.appendChild(label);
            formGroup.appendChild(input);

document.getElementById('generated-form').appendChild(formGroup);

formData.push({
                name: fieldName,
                type: fieldType
            });

// Show the form preview section if it's not already visible
            document.querySelector('.form-preview').classList.remove('d-none');

// Clear input fields for next entry
            document.getElementById('field-name').value = '';
            document.getElementById('field-type').value = '';
        }

// Function to handle form submission and send data to the server
        function submitForm() {
            // Prepare data to send to the server
            const formInputs = document.querySelectorAll('#generated-form input');
            const formDataToSend = [];

formInputs.forEach(input => {
                formDataToSend.push({
                    name: input.name,
                    value: input.value,
                    type: input.type
                });
            });

// Create an object with formType and all field data
            const data = {
                formType: formType,
                fields: formDataToSend
            };

// Send data to server (replace 'save-form.php' with your actual server-side script)
            fetch('save-form.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data) // data is the object with formType and fields
                })
                .then(response => response.json())
                .then(data => {
                    alert('Form submitted and saved successfully!');
                    console.log(data);
                })
                .catch(error => {
                    alert('Error submitting the form.');
                    console.error(error);
                });
        }
    </script>
</body>

</html>