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: bindex.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;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">Dynamic Form Builder</h1>
        <div id="step-1" class="step">
            <h3>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" required>
                </div>
                <button type="submit" class="btn btn-primary mt-3">Next</button>
            </form>
        </div>

<div id="step-2" class="step d-none">
            <h3>Select Fields for Your Form</h3>
            <form id="field-options">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="name" id="field-name">
                    <label class="form-check-label" for="field-name">Name</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="email" id="field-email">
                    <label class="form-check-label" for="field-email">Email</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="password" id="field-password">
                    <label class="form-check-label" for="field-password">Password</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="phone" id="field-phone">
                    <label class="form-check-label" for="field-phone">Phone Number</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="address" id="field-address">
                    <label class="form-check-label" for="field-address">Address</label>
                </div>
                <button type="button" class="btn btn-success mt-3" onclick="generateForm()">Generate Form</button>
            </form>
        </div>

<div id="step-3" class="step d-none">
            <h3>Your Generated Form</h3>
            <form id="generated-form" class="mt-3">
                
            </form>
            <button class="btn btn-primary mt-3" onclick="saveFormData()">Save Form</button>
            <button class="btn btn-secondary mt-3" onclick="restart()">Build Another Form</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 generateForm() {
            const selectedFields = document.querySelectorAll('#field-options input:checked');
            const formContainer = document.getElementById('generated-form');
            formContainer.innerHTML = ''; // Clear previous form

selectedFields.forEach(field => {
                let label = document.createElement('label');
                label.textContent = field.value.charAt(0).toUpperCase() + field.value.slice(1);
                label.classList.add('form-label');

let input = document.createElement('input');
                input.type = field.value === 'password' ? 'password' : 'text';
                input.name = field.value;
                input.classList.add('form-control');
                input.placeholder = `Enter your ${field.value}`;

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

formContainer.appendChild(formGroup);
            });

document.getElementById('step-2').classList.add('d-none');
            document.getElementById('step-3').classList.remove('d-none');
        }

function saveFormData() {
            const formData = {
                formType: formType,
                fields: []
            };

document.querySelectorAll('#generated-form .form-control').forEach(input => {
                formData.fields.push({
                    name: input.name,
                    placeholder: input.placeholder,
                    type: input.type
                });
            });

fetch('/save-form-data.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                alert('Form saved successfully!');
                console.log(data);
            })
            .catch(error => {
                alert('Error saving form.');
                console.error(error);
            });
        }

function restart() {
            document.getElementById('step-3').classList.add('d-none');
            document.getElementById('step-1').classList.remove('d-none');
        }
    </script>
</body>
</html>