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

问题描述

因此，我有一个想要两个按钮的表单，每个按钮会将输入的数据保存到其他位置。我不确定表单是否是执行此操作的正确方法，因为应该按下“输入”按钮来激活提交功能，当有两个不同的提交选项时，该功能将无效。我在这里遇到的其他解决方案似乎主要是使用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>

解决方法

我会在保存按钮之前添加一个名为“添加到收藏夹”的复选框，然后删除添加收藏夹按钮。这样，如果用户忽略了“收藏夹”复选框，则默认情况下会保存回车。

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