单击按钮时向弹簧表单添加其他字段答案

【问题标题】：add additional fields to a spring form when a button is clicked单击按钮时向弹簧表单添加其他字段
【发布时间】：2018-03-03 04:40:04
【问题描述】：

我有以下课程

public class Student {

private String firstName;
private String lastName;
private BigDecimal balance;
private List<Option> options;

...
}

这是我的表格

    <form:form action="processForm" modelAttribute="student">

    First name: <form:input path="firstName" />

    <br><br>

    Last name: <form:input path="lastName" />

    <br><br>

    Balance: <form:input path="balance" />

    <br><br>


    School Options: 

    <button onclick="addOptionForm('options')">Add a school option</button>

    <br><br>

    <div id="options"></div>


    <input type="submit" value="Submit" />

</form:form>

AJAX 函数是

function addOptionForm(id) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById(id).innerHTML = this.responseText;
    }
};
xhttp.open("GET", "option-form", true);
xhttp.send();
}

单击Add school option 按钮时，我尝试使用AJAX 加载额外字段。问题是点击按钮后提交表单。

那么有没有办法用 JavaScript 或 AJAX 做到这一点，我可以从绑定的 Student 对象访问列表吗？

【问题讨论】：

标签： ajax forms spring-mvc

【解决方案1】：

您需要添加属性type='button' 以防止提交。 type='submit' 是 button 的默认行为。

<button type="button" onclick="addOptionForm('options')">Add a school option</button>

【讨论】：

是表单提交的原因吗？
@AmmarSamater 忽略我之前的回答