如何使用 JS 在 HTML 表单中有两个提交选项？

Question

所以，我有一个表单，我想要有两个按钮，每个按钮都会将输入的数据保存到不同的位置。我不确定表单是否是执行此操作的正确方法，因为按“输入”按钮应该会激活提交功能，当有两个不同的提交选项时该功能不起作用。我在这里遇到的其他解决方案似乎主要使用 PHP，但我的后端使用 Firbase，所以我的解决方案必须在 Javascript 中。一个按钮会将输入的 link 保存到书签 collection，另一个按钮会将其保存到收藏夹 collection.

这是我的尝试（无效）：

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const btnName = document.getElementsByClassName('btn-type').name;
    console.log(btnName);
    if (btnName === 'save_bookmark') {
        let theCurrentUser = auth.currentUser;
        db.collection('users/'+ theCurrentUser.uid +'/bookmarks').add({
            website: form['website'].value,
            url: form['url'].value
        }).catch(err => {
            console.log(err.message);
        })
    } else if (btnName === 'save_favorite') {
        db.collection('favorites').add({
            website: form['website'].value,
            url: form['url'].value
        });
    }
    form.website.value = '';
    form.url.value = '';
})

这里是对应的HTML:

<div class='row logged-in show-none'>
    <form class='col s12' id='add-bookmark'>
        <div class='row'>
            <div class='input-field col s4'>
                <input type='text' name='website' placeholder='Enter name of bookmark'>
            </div>
            <div class='input-field col s4'>
                <input type='text' name='url' placeholder='Enter link to bookmark'>
            </div>
            <div class='input-field col s1'>
                <button class='btn waves-effect waves-light' name='save_bookmark' value='save'>Save</button>
            </div>
            <div class='input-field col s1'>
                <button class='btn waves-effect waves-light btn-type' name='save_favorite' value='favorite'>Favorite</button>
            </div>
        </div>
    </form>
</div>

Answer 1

我会在保存按钮前添加一个名为“添加到收藏夹”的复选框，然后删除添加收藏夹按钮。这样一来，如果用户忽略收藏夹复选框，您将默认为正常保存输入。

<div class='input-field col s1'><input id="fav" type='checkbox' name='favorite' value='favorite'></div>

那么你可以：

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const fav = document.getElementById('fav').checked;
        if (fav) {
                db.collection('favorites').add({
                website: form['website'].value,
                url: form['url'].value
            });    
        } else {
            let theCurrentUser = auth.currentUser;
                db.collection('users/'+ theCurrentUser.uid +'/bookmarks').add({
                website: form['website'].value,
                url: form['url'].value
            }).catch(err => {
                console.log(err.message);
            })
        }
        form.website.value = '';
        form.url.value = '';
    })

如何使用 JS 在 HTML 表单中有两个提交选项？

How to have two submit options in an HTML form with JS?

javascript

html

forms

firebase

submit