添加Bootsrap微调器类以在提交时加载微调器

时间:2019-12-11 15:47:46

标签: javascript html css

我想在我的javascript中添加引导程序微调框边框,该边框仅在表单提交时加载,而在未提交表单时隐藏

const ui = new UI();

function eventList() {
    const submitSignupForm = document.querySelector('#submitForm');

    //trigger the button
    submitSignupForm.addEventListener('click', signUpUser);
}

eventList();

async function signUpUser(e) {
    e.preventDefault();

    const name = document.querySelector('#name').value;
    const email = document.querySelector('#email').value;
    const phone_number = document.querySelector('#phone_number').value;
    const address = document.querySelector('#address').value;
    const password = document.querySelector('#password').value;
    const confirmPassword = document.querySelector('#confirmPassword').value;

    if (!name || !email || !phone_number || !address || !password || !confirmPassword) {
        ui.printMessage('Fill all Fields!!!', 'alert-danger');
    } else if (password != confirmPassword) {
        ui.printMessage('Password Must be Equal to Confirm Password', 'alert-danger');
    } else {
        ui.printMessage('Thank You for Your Info, Processing!', 'alert-success');
        submitSignupForm.classList.add('spinner-border', 'spinner-border-sm');



        //get user details
        const userDetails = {
            full_name: name,
            email: email,
            phone: phone_number,
            address: address,
            password: password,
            confirmPassword: confirmPassword
        };

        // return console.log(userDetails)
        //send through the api

        await fetch('url', {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userDetails)
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            console.log(data);
            return window.location.href = '/login.html';
        })
        .catch(function(error) {
            console.log(error.message);
            ui.printMessage(error.message, 'alert-danger');
        });
    }
}
// }

0 个答案:

没有答案