java - JSP: How to add value in a list with onClick or onSubmit event? -

hi new jsp. i'm working on simple activity can add add user on list , display it. displaying of list of users works fine have problem in adding user.

the code below displays list of users:

<div id="userlist">              <h3>list of users</h3>              <ul>                  <% (user user : data.getusers())                      {%>                  <li>                      -<%= user.getfirstname()%>                       <%= user.getlastname()%>                       <br>address: <%= user.getaddress()%>                      <br>age: <%= user.getage()%>                  </li>                  <%}%>              </ul>  </div>

the code below form add user:

<form onsubmit="addtolist()">              <ul>                  <li>                      <h3>add user</h3>                  </li>                  <li>                      first name: <input id="firstnamefield" type="text" ></input>                      last name: <input id="lastnamefield" type="text"></input>                  </li>                  <li>                      age: <input id="agefield" type="text" ></input>                      address: <input id="addressfield" type="text"></input>                  </li>                  <li>                      <button id="submit" onclick="addtolist()">submit</button>                  </li>              </ul>          </form>

and here code handle event:

<--javascript-->  <script>    function addtolist()      {        <%data.addusers(request.getparameter("firstnamefield"), request.getparameter("lastnamefield"), request.getparameter("agefield"), request.getparameter("addressfield"));%>   <%-- data.adduser adds user sample data -->       }  </script>

<--jquery-->  <script>      $(document).ready(function () {          $("#submit").click(function () {          <%              data.addusers(request.getparameter("firstnamehidden"), request.getparameter("lastnamehidden"), request.getparameter("agehidden"), request.getparameter("addresshidden"));          %>          });      });  </script>

when run there new user added null values when try submit again not trigger event. can enlighten me if i'm doing wrong? thank you.

you mixing jsp scriptlet code javascript. should call ajax api on server side javascript on addtolist event. on server side, can add user in list , javascript on success, refresh page jsp load new data.