jquery fom表单提交前修改其值

最新推荐文章于 2022-03-17 15:28:31 发布

原创最新推荐文章于 2022-03-17 15:28:31 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript处理HTML表单的具体案例。通过绑定点击事件于确定按钮，实现了对表单数据的序列化并修改部分字段值的功能。最终通过提交表单完成数据的发送。

<form action="${ctx}/edie/test.htm" method="post" id="edie">
    <div class="adminCon boxShadow">
        <div class="adminMain boxShadow">
            <h2>测试哈</h2>
            <table class="addAdmin-table" width="100%" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="label">姓名：</td>
                        <td>
                            <input class="uiText w210" type="text" name="name" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td class="label">密码：</td>
                        <td>
                            <input class="uiText w210 l" type="password" name="password" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td class="label">学校：</td>
                        <td>
                         <select name="school" >
                         <option value="农业大学">农业大学</option>
                         <option value="家里蹲大学">家里蹲大学</option>
                         </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="label">性别：</td>
                        <td>
                            <input  type="radio"  name ="sex" value="男"/>男
                            <input  type="radio"  name ="sex" value="女"/>女 
                        </td>
                    </tr>
                    <tr>
                        <td class="label">年龄：</td>
                        <td>
                            <input class="uiText w210" type="text" name ="age" value=""/>
                        </td>
                    </tr>
                   
                    <tr>
                        <td class="label"></td>
                        <td><a class="btn" href="javascript:void(0);" id="btn_edie">确定</a><a class="btn" href="javascript:void(0);" id="btn_cancel">取消</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</form>

例如有一个form表单是这样的，我们可以写一个js文件，绑定确定按钮，在js中对方式表单的数据进行处理。
edie.js的文件如下：

$("#btn_edie").bind('click',function(){
	var $arr = $("#edie").serializeArray();
	var o = [];
	$.each($arr,function(i,v){
	    o[v.name] = v.value;
	});
	o['name'] = "haah";//可以根据name来获取其value，因此可以修改其值，而不用为每个input框设置id。
	o['school'] = "哈哈大学";
	$("#edie").submit();//表单提交
});

 我好像误导我自己了T_T，没想出来