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

Question

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

这是我的尝试（不起作用）：

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 = '';
    })