CODEWITHSUNDEEP
formsjspmodel-view-controller
user1331582
user1331582

Reputation: 105

spring mvc multiple form on jsp

Hello guys is it possible to have multiple forms on single jsp and also with a single button?

Here is my jsp page where i hava two forms, i know this way it is, it only save the second form.

<html>
<head>
<title>Update General Info</title>
<script type="text/javascript">
function validateForm()
{
var name=document.getElementById("name").value;
 var surname=document.getElementById("surname").value;
var email=document.getElementById("email").value;
var amka=document.getElementById("amka").value;
if (name.length == 0)   
  {
  alert("Name must be filled out");
  return false;
 } else if(surname.length == 0){
      alert("Surname must be filled out");
      return false;
  }else if(email.length == 0){
      alert("Email must be filled out");
      return false;
  }else if(amka.length == 0){
      alert("Amka must be filled out");
      return false;
  }
}
</script>
</head>
<body>
<h1>Update General Info</h1>

<c:if test="${!empty user}">
<c:url var="saveArticleUrl" value="/articles/updateGeneralSave.html" />
<form:form onsubmit="return validateForm()" modelAttribute="user" method="POST" >
<table bgcolor="DBEADC" border=1>
<tr>
<th>Id</th>
<th>Team</th>
<th>Name</th>
<th>Surname</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>AMKA</th>
<th>Status</th>
<th>Department</th>
</tr>


<tr>
<td><form:input readonly="true" path="id" value="${user.id}"></form:input></td>
<td><form:input readonly="true" path="team" value="${user.team}"></form:input></td>
<td><form:input id="name" path="name" value="${user.name}"></form:input></td>
<td><form:input id="surname" path="surname" value="${user.surname}"></form:input></td>
<td><form:input readonly="true" path="username" value="${user.username}"></form:input></td>
<td><form:input type="password" readonly="true" path="password" value="${user.password}"></form:input></td>
<td><form:input id="email" path="email" value="${user.email}"></form:input></td>
<td><form:input id="amka" path="amka" value="${user.amka}"></form:input></td>
<td><form:input id="status" path="status" value="${user.status}"></form:input></td>

<td><form:select  path="department">
<c:forEach items="${departments}" var="dep">
<c:if test="${dep.dep_name==user.department }">
<OPTION selected VALUE="${dep.dep_name}"><c:out value="${dep.dep_name}"/></OPTION>
</c:if>
<c:if test="${dep.dep_name!=user.department }">
<OPTION VALUE="${dep.dep_name}"><c:out value="${dep.dep_name}"/></OPTION>
</c:if>

</c:forEach>
</form:select></td>
</tr>
</table>




</form:form>
</c:if>
<c:if test="${!empty phones}">
<c:url var="saveArticleUrl" value="/articles/updatePhoneSave.html" />
<form:form onsubmit="return validateForm()" modelAttribute="updatePh" method="POST" action="${saveArticleUrl}">
<table bgcolor="DBEADC" border=1>
<tr>
<th>Id</th>
<th>Phone</th>
<th>Mobile</th>
<th>Fax</th>
</tr>



<tr>
<td><form:input readonly="true" path="id" value="${phones.id}"></form:input></td>
<td><form:input id="phone" path="phone" value="${phones.phone}"></form:input></td>
<td><form:input id="mobile" path="mobile" value="${phones.mobile}"></form:input></td>
<td><form:input path="fax" value="${phones.fax}"></form:input></td>
</tr>


</table>



<input type="submit" value="Update" />
</form:form>

</c:if>
</body>
</html>

and the controllers

RequestMapping(value = "updateGeneral" , method = RequestMethod.GET)
        public ModelAndView updateGeneral(@ModelAttribute("user") Users user ,@ModelAttribute("updatePh") Phone updatePh, @RequestParam("id")Integer id){
         Map<String, Object> model = new HashMap<String, Object>();
            model.put("user",  articleService.getUser(id));
            model.put("departments", articleService.listDepartments());
            //twra mpike
            model.put("phones",  articleService.getPhones(id));
        return new ModelAndView("updategeneral",model);
     }
     //evala akoma ena modelattri
     @RequestMapping(value = "updateGeneralSave" , method = RequestMethod.POST)
        public ModelAndView updateGeneralSave(@ModelAttribute("user") Users user){


         articleService.updateUser(user);

        return new ModelAndView("redirect:/articles/listusers.html");
     }


 @RequestMapping(value = "updatePhoneSave" , method = RequestMethod.POST)
        public ModelAndView updatePhonesave(@ModelAttribute("updatePh") Phone updatePh){


         articleService.updatePhone(updatePh);  
        return new ModelAndView("redirect:/articles/listusers.html");
     }

Upvotes: 2

Views: 12526

Answers (5)

paul
paul

Reputation: 13471

Your only option is doing for ajax, you have to realize that if you Controller method will render a page after the first submit your second submit doing by HTTP will never take effect.

    function submitForm(form, index){
       $.ajax({
        dataType: "json",
        method: "POST",
        url: "your controller url",
        data:$('#form').serialize(),
        success: function (data) {
           if(index > 0){
              submitForm(form+=1, index--)
           }
        }
    });

}

Upvotes: 0

Rob
Rob

Reputation: 1

You need to loop through the forms on the webpage using document.forms[i] and with each form individually call the submit

Upvotes: 0

jddsantaella
jddsantaella

Reputation: 3687

You can have multiple forms in a JSP, but you can NOT send both at the same time.

You should mix both forms and both actions, retrieve all information in the action/controller and save phone and user information. Another options would be to use Ajax to send one of the form and send the other as usually.

By the way, your problem has nothing to do with Spring.

Upvotes: 4

Rahul Agrawal
Rahul Agrawal

Reputation: 8971

You can do following trick like Instead of sumbit button have only normal button as

<input type="button" value="Update" onClick="submit2forms();"/>

and on click of this button call below javascript method as

        <script language="javascript">
            function submit2forms() {
                document.getElementById("form1").submit();
                document.getElementById("form2").submit();
            }
        </script>

Upvotes: -1

storm_buster
storm_buster

Reputation: 7568

yes of courses, you can make your button to submit both your forms. But you have do it with ajax.

Upvotes: 0

Related Questions