Untitled

avatar
unknown
plain_text
a year ago
3.7 kB
8
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Format aplikimi</title>
<style>
    .error {
        color: red;
    }
</style>
</head>
<body>
    <h2>Format aplikimi</h2>
    <form id="applicationForm">
        <div>
            <label for="firstName">Emri:</label>
            <input type="text" id="firstName" name="firstName" required>
        </div>
        <br>
        <div>
            <label for="lastName">Mbiemri:</label>
            <input type="text" id="lastName" name="lastName" required>
        </div>
        <br>
        <div>
            <label for="age">Mosha:</label>
            <input type="number" id="age" name="age" required>
        </div>
        <br>
        <div>
            <label for="phone">Nr telefoni:</label>
            <input type="tel" id="phone" name="phone">
        </div>
        <br>
        <div>
            <label for="email">Adresa e emailit:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <br>
        <div>
            <label>Interesat:</label><br>
            <input type="checkbox" id="interest1" name="interest1" value="sports">
            <label for="interest1">Sporti</label><br>
            <input type="checkbox" id="interest2" name="interest2" value="music">
            <label for="interest2">Muzika</label><br>
            <input type="checkbox" id="interest3" name="interest3" value="movies">
            <label for="interest3">Filmat</label>
        </div>
        <br>
        <div>
            <button type="button" id="submitButton" onclick="displaySummary()">Dergo</button>
        </div>
    </form>

    <div id="displayInfo"></div>

    <script>
        // Function to display application summary
        function displaySummary() {
            const firstName = document.getElementById('firstName').value;
            const lastName = document.getElementById('lastName').value;
            const age = document.getElementById('age').value;
            const phone = document.getElementById('phone').value;
            const email = document.getElementById('email').value;

            // Basic validation (you can expand this as needed)
            if (firstName.trim() === '' || lastName.trim() === '' || age === '' || email === '') {
                alert('Please fill in all required fields.');
                return;
            }

            // Displaying input data
            const interests = [];
            if (document.getElementById('interest1').checked) {
                interests.push(document.getElementById('interest1').value);
            }
            if (document.getElementById('interest2').checked) {
                interests.push(document.getElementById('interest2').value);
            }
            if (document.getElementById('interest3').checked) {
                interests.push(document.getElementById('interest3').value);
            }

            const displayDiv = document.getElementById('displayInfo');
            displayDiv.innerHTML = `
                <h3>Application Summary:</h3>
                <p><strong>Emri:</strong> ${firstName}</p>
                <p><strong>Mbiemri:</strong> ${lastName}</p>
                <p><strong>Mosha:</strong> ${age}</p>
                <p><strong>Nr telefoni:</strong> ${phone}</p>
                <p><strong>Adresa e emailit:</strong> ${email}</p>
                <p><strong>Interesat:</strong> ${interests.length > 0 ? interests.join(', ') : 'None selected'}</p>
            `;
        }
    </script>
</body>
</html>
Editor is loading...
Leave a Comment