form嵌套问题

form是不能嵌套的,嵌套后会导致第一个form后的数据都不能提交

<form action="form.jsp" id="form1">
<input type="text" name="value1" />
<form action="12.jsp" id="form2">
<input type="text" name="value2" />
</form>
<input type="text" name="value3" />
<input type="submit" value="提交" onclick="submitForm();"/>
</form>

<script type="text/javascript">
function submitForm(){
document.getElementById("form1").submit();
}
</script>

如上代码,只能获取到value1和value2的值,value3的值将丢失。
解决方法,有几种思路。

<form action="form.jsp" id="form1">
<input type="text" name="value1" />
<input type="text" name="value3" />
<form action="12.jsp" id="form2">
<input type="text" name="value2" />
</form>

<input type="submit" value="提交" onclick="submitForm();"/>
</form>

<script type="text/javascript">
function submitForm(){
document.getElementById("form1").submit();
}
</script>

改成这样就OK了,或者写js将丢失的数值给记录下。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于El-Form表单的嵌套,你可以使用El-Form-Item组件来实现。在El-Form中,每个表单项都需要包裹在El-Form-Item组件中,而El-Form-Item又可以嵌套在另一个El-Form-Item中。 以下是一个示例代码,展示了如何嵌套El-Form表单: ```html <template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="教育信息"> <el-form-item label="学校" prop="school"> <el-input v-model="form.school"></el-input> </el-form-item> <el-form-item label="专业" prop="major"> <el-input v-model="form.major"></el-input> </el-form-item> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', gender: '', school: '', major: '' }, rules: { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], gender: [{ required: true, message: '请选择性别', trigger: 'change' }], school: [{ required: true, message: '请输入学校', trigger: 'blur' }], major: [{ required: true, message: '请输入专业', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过,执行提交操作 console.log('提交表单'); } else { // 表单验证失败,给出提示 console.log('表单验证失败'); return false; } }); } } }; </script> ``` 在上面的示例代码中,El-Form-Item组件可以进行嵌套,例如教育信息部分的学校和专业字段。注意,嵌套的El-Form-Item组件也需要设置对应的prop属性和表单验证规则。 希望这个示例对你有所帮助!如果你有任何其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值