Scribd Logo
Upload

Welcome to Scribd!

  • Membership Form

    Uploaded by

    aljon rosario
    10 views6 pages
    The document is a sports club membership application form that allows users to enter their name, address, age, profession, and residential status. It uses JavaScript to validate the form fields, simulate sending the application via email, and redirect to a success page if submitted successfully. The form gathers applicant details, disables the submit button on click to prevent duplicate submissions, and uses promises to fake an asynchronous email send process before redirecting.

    Original Description:

    hi

    Original Title

    membership form

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document is a sports club membership application form that allows users to enter their name, address, age, profession, and residential status. It uses JavaScript to validate the form fields, simulate sending the application via email, and redirect to a success page if submitted successfully. The form gathers applicant details, disables the submit button on click to prevent duplicate submissions, and uses promises to fake an asynchronous email send process before redirecting.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views6 pages

    Membership Form

    Uploaded by

    aljon rosario
    The document is a sports club membership application form that allows users to enter their name, address, age, profession, and residential status. It uses JavaScript to validate the form fields, simulate sending the application via email, and redirect to a success page if submitted successfully. The form gathers applicant details, disables the submit button on click to prevent duplicate submissions, and uses promises to fake an asynchronous email send process before redirecting.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    <!

    DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Sports Club Membership Application</title>

    </head>

    <body>

    <h1>Sports Club Membership Application</h1>

    <form id="send-mail">

    <div>

    <label for="name">Name</label>

    <input type="text" id="name" required>

    </div>

    <div>

    <label for="address">Address</label> <br />

    <textarea id="address" cols="30" rows="5" required></textarea>

    </div>

    <div>

    <label for="age">Age</label> <br />

    <input type="number" id="age" min="1" max="150" required>


    </div>

    <div>

    <label for="profession">Profession</label> <br />

    <input type="text" id="profession" required>

    </div>

    <div>

    <label for="resedential-status">Resedential Status</label>

    <div>

    <input type="radio" name="resedential-status" value="resident" required> Resident

    <input type="radio" name="resedential-status" value="non-resident" required> Non Resident

    </div>

    </div>

    <br />

    <button id="btn">Submit</button>

    </form>

    <script type="text/javascript">

    /**

    * Getting all inputs and button in form

    * */

    const nameInput = document.getElementById('name')


    const addressInput = document.getElementById('address')

    const ageInput = document.getElementById('age')

    const professionInput = document.getElementById('profession')

    const resedentialStatusInputs = document.querySelectorAll('[name="resedential-status"]')

    /**

    * Get form element

    * */

    const form = document.getElementById('send-mail')

    /**

    * Get button element

    * */

    const btn = document.getElementById('btn')

    /**

    * Set residential status = resident

    */

    let residential_status = 'resident'


    /**

    * To update the resedential_status value upon clicking input radio buttons

    */

    resedentialStatusInputs.forEach(element => {

    element.addEventListener('change', function (e) {

    residential_status = e.target.value

    })

    })

    /**

    * Wait 3 seconds serve as fake sending email to club adminitrator

    */

    const sendMail = () => {

    return new Promise((resolve, reject) => {

    let sent = false;

    setTimeout(() => {

    sent = true

    resolve(sent)

    }, 3000)

    })
    }

    /**

    * Submit application

    */

    form.addEventListener('submit', function (event) {

    event.preventDefault() // To prevent page reloading upon submit application

    let name = nameInput.value;

    let address = addressInput.value;

    let age = ageInput.value;

    let profession = professionInput.value;

    btn.innerText = 'Sending...' // text=Sending...

    btn.setAttribute('disabled', true) // To make button not clickable

    sendMail().then((sent) => {

    // sent - let's say if fake sending email is sent successfully. it returns true or false

    if (sent) {

    btn.innerText = 'Email sent' // text=Email sent

    setInterval(() => {
    btn.innerText = 'Submit' // text=Submit

    window.location.href = `success.html?name=${name}&age=${age}&address=$
    {address}&profession=${profession}&residential_status=${residential_status}`

    }, 1500)

    } else {

    btn.setAttribute('disabled', false) // To make button clickable

    }).catch((error) => {

    console.error(error)

    })

    })

    </script>

    </body>

    </html>

    You might also like