title: Parameter passing through javascript function to a servlet
body: <p>Can we pass parameter to a servlet through javascript function? </p>
  
  <p>Here is my code wherein i am trying to pass values from addUpdate.jsp's javascript function to BookServlet on click of a button 'Get Authors names'.While I click the button it is successfully going to servlet but it does not taking the parameter that I pass through function..</p>
  
  <p>addUpdate.jsp : </p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
      &lt;%@page import="com.fulcrum.obl.model.Author"%&gt;
      &lt;%@page import="java.util.ArrayList"%&gt;
      &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;
      &lt;%@page isELIgnored="false" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function submitAddForm(button) {
      alert("hiee");
      if(button.value=="Get Authors names") {
          alert("in iff");
          //alert(document.getElementById("bookDetails"));
          document.getElementById("bookDetails").action="BookServlet?authorNames=authorNames";
      }
  
  }
  
  function setAuthorsNames() {
  
       var x =document.getElementById("select");
       var myList = document.getElementById("selected");
       var myOption = document.createElement("Option");
  
      for(var i=0;i &lt; x.options.length;i++) {
  
           if(x.options[i].selected ==true){
               alert("in if");
                myOption.text = x.options[i].value;
                myOption.value = x.options[i].value;
                myList.add(myOption);
                x.remove(x.options.selectedIndex);
  
            }
  
      }
  
  }
  
  
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h4&gt;Book Form&lt;/h4&gt;
  
  &lt;form  id="bookDetails"&gt;
  Long Title : &lt;input type="text" name="longT"&gt;
  &lt;br&gt;
  &lt;br&gt;
  Short Title : &lt;input type="text" name="shortT" /&gt;
  &lt;br&gt;
  &lt;br&gt;
  Isbn :  &lt;input type="text" name="shortT" /&gt;
  &lt;br&gt;
  &lt;br&gt;
  Date of Publication : &lt;input type="text" name="dop" /&gt;
  &lt;br&gt;
  &lt;br&gt;
  No of pages : &lt;input type="text" name="nop" /&gt;
  &lt;br&gt;
  &lt;br&gt;
  bound type : 
  &lt;select id="boundType"&gt;
    &lt;option value="0"&gt;HardBound&lt;/option&gt;
    &lt;option value="1"&gt;SoftBound&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;br&gt;
  DVD Availability :
  
  &lt;select id="dvd"&gt;
    &lt;option value="y"&gt;Yes&lt;/option&gt;
    &lt;option value="n"&gt;No&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;br&gt;
  No of copies available :  &lt;input type="text" name="noca" /&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;% 
  if(request.getAttribute("authorNamesList") != null) {
  
      ArrayList&lt;Author&gt; booksList = (ArrayList&lt;Author&gt;)request.getAttribute("authorNamesList");
  %&gt;
  
  &lt;select id="select" size="6"&gt;
   &lt;c:forEach items="${authorNamesList}" var="authorNames"&gt;
  &lt;option value="${authorNames.firstName}"&gt;${authorNames.firstName}&lt;/option&gt;
  &lt;/c:forEach&gt;
  &lt;/select&gt;
  &lt;%
  }
  %&gt;
  &lt;select size="6"  id="selected"&gt;
  
  &lt;/select&gt;
  
  &lt;input type="submit" value="Get Authors names" name="Go" onClick="submitAddForm(this)"&gt;
  &lt;input type="button" value="Add" name="Add" onClick="setAuthorsNames()"&gt;
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;input type="submit" value="Save Book" name="submitBook" onClick="submitAddForm()"&gt;
  
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is the parameter that is getting passed.. </p>
  
  <pre><code>http://localhost:8082/OBL/BookServlet?longT=&amp;shortT=&amp;shortT=&amp;dop=&amp;nop=&amp;noca=&amp;Go=Get+Authors+names
  </code></pre>