表单提交后如何更新对象属性以用于后续函数？

安全阿岳

2026-6-25

如何更新对象中的特定属性？

我尝试了多种写法，现在不确定代码是否合理。代码如下：

let object= {
    proprety1:'',
    // 其他属性...
}

根据这些属性是否已填充，会显示不同的.div：

document.addEventListener("DOMContentLoaded", function(){
    if(object.proprety1 === "")
        document.querySelector('.first-screen-div').style.display = 'flex';
        form.addEventListener('submit', function(event) {
            newObjectForm(event);
        });
    }else {
        document.querySelector('.second-screen-div').style.display = 'flex';
    }
})

表单由以下函数处理：

let form = document.getElementById('object-form');
form.addEventListener('submit', newObjectForm);
function newObjectForm(event){
    event.preventDefault();
    let objectOne = document.getElementById('object-one').value;

    object.proprety1= objectOne 

    document.getElementById('object-form').submit();
}

表单代码：

<div class="first-screen-div">
    <form method="GET" action="" class="" id="object-form">
        <input type="text" id="object-one" name="object-one" placeholder="" class="" required><br><br> 
        <button class="" type="submit">Submit</button>
    </form>
</div>

我希望表单提交后用输入值更新空属性，后续函数能复用这个值，但在函数外打印object.proprety1看不到表单输入的值，怀疑属性没更新，试过push()也没用，找不到问题所在，求建议？

问题分析与修复方案

1. 语法错误：if语句缺少花括号

你的DOMContentLoaded回调里，if条件后未加{}，导致只有第一行代码属于if分支，后续的form.addEventListener与else分支逻辑完全不匹配，会直接抛出语法错误，代码无法正常执行。

2. 重复绑定表单提交事件

你在DOMContentLoaded里绑定了一次submit事件，又在全局作用域重复绑定，会导致newObjectForm被触发两次，逻辑混乱。

3. 页面刷新导致数据丢失

newObjectForm里先调用event.preventDefault()阻止默认提交，随后又调用document.getElementById('object-form').submit()，这会触发浏览器默认表单提交行为，导致页面刷新。页面刷新后所有全局变量都会重置，之前更新的object.proprety1自然丢失。

4. 过早获取DOM元素

全局作用域里的let form = document.getElementById('object-form');会在DOM加载完成前执行，此时object-form元素还不存在，form会是null，绑定事件时会报错。

修正后的完整代码

JavaScript部分

let object = {
    proprety1: '',
    // 其他属性...
};

document.addEventListener("DOMContentLoaded", function(){
    const form = document.getElementById('object-form');
    const firstScreenDiv = document.querySelector('.first-screen-div');
    const secondScreenDiv = document.querySelector('.second-screen-div');

    // 初始化显示对应页面
    if(object.proprety1 === ""){
        firstScreenDiv.style.display = 'flex';
    } else {
        secondScreenDiv.style.display = 'flex';
    }

    // 只绑定一次提交事件
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止默认提交，避免页面刷新
        const objectOne = document.getElementById('object-one').value;
        // 更新对象属性
        object.proprety1 = objectOne;
        
        // 这里可以直接验证更新结果
        console.log(object.proprety1); // 现在能看到表单输入的值了
        
        // 切换到第二个页面
        firstScreenDiv.style.display = 'none';
        secondScreenDiv.style.display = 'flex';
        
        // 如果需要向后端提交数据，改用fetch异步发送，不要用默认submit
        // fetch('', { method: 'GET', body: new FormData(form) })
        //   .then(res => res.json())
        //   .then(data => console.log(data));
    });
});

HTML部分

<div class="first-screen-div" style="display: none;">
    <form method="GET" action="" id="object-form">
        <input type="text" id="object-one" name="object-one" placeholder="" required><br><br> 
        <button type="submit">Submit</button>
    </form>
</div>
<div class="second-screen-div" style="display: none;">
    <!-- 第二个页面内容 -->
</div>

关键说明

不要使用默认表单提交（会刷新页面），若需与后端交互，用fetch或AJAX异步发送数据，这样页面不会刷新，object中的数据可保留。
所有DOM操作都要放在DOMContentLoaded回调内，确保元素已加载完成。
避免重复绑定事件，保证逻辑唯一性。
push()是数组方法，对象更新属性直接用对象.属性 = 值即可，无需使用push()。

内容的提问来源于stack exchange，提问作者PhilM