如何将javascript处理程序添加到按钮?

时间:2014-03-24 10:38:17

标签: java javascript model-view-controller

我的JSP表单上有一个按钮,它必须向控制器发送一个布尔值。

<button type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok-circle"></i> Activate</button>

在表单上我正在使用实际上具有状态(布尔状态)的POJO对象。

public class User implements Serializable {
    private String name;
    private boolean status;
    // getters and setters omitted 
}

我需要在按钮中添加javascript处理程序,只能使用POST方法将此状态和用户ID发送到控制器。我怎么能用javascript做到这一点?

UPD:

<c:forEach items="${users}" var="user">
    <tr>
        <td>${user.id}</td>
        <td>${user.name}</td>
        <td>${user.email}</td>
        <td>${user.country}</td>
        <td class="col-sm-1 col-md-1">
            <a href="/user/${user.id}" style="text-decoration: none">
                <button type="button" class="btn btn-primary btn-block"><i
                        class="glyphicon glyphicon-pencil"></i> Edit
                </button>
            </a>
        </td>
        <c:choose>
            <c:when test="${user.active == true}">
                <td class="col-sm-1 col-md-1">
                    <button type="button" class="btn btn-danger btn-block"><i
                            class="glyphicon glyphicon-remove"></i> Suspend
                    </button>
                </td>
            </c:when>
            <c:otherwise>
                <td class="col-sm-1 col-md-1">
                    <button type="button" class="btn btn-success"><i
                            class="glyphicon glyphicon-ok-circle"></i> Activate
                    </button>
                </td>
            </c:otherwise>
        </c:choose>
    </tr>
</c:forEach>

2 个答案:

答案 0 :(得分:0)

你可以用作:

function doSend(){

    document.forms[0].action = "url?val=true"; 
    document.forms[0].submit();

}

<button type="button" onclick="doSend()" and other attrubute>

在表单上指定方法属性。

<form name="myform" method="POST">

这将导致表单作为POST提交。

或者你可以使用隐藏字段:

<html>
<head>
 <script type="text/javascript">
 function doSend(){
    alert("hi");
    document.forms[0].setAttribute("method","POST");
    document.forms[0].submit();
}
 </script>
</head>

<body>
<form action="test2.html" method="GET">

    <input type="hidden" name="hiddenField" value="ture1"/> 
    <input type="button" onclick="doSend()" value="click"/>
</form> 
</body>
</html>

答案 1 :(得分:0)

使用ajax ..

function ajaxRequest(){
 var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
 if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
  for (var i=0; i<activexmodes.length; i++){
   try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
    //suppress error
   }
  }
 }
 else if (window.XMLHttpRequest) // if Mozilla, Safari etc
  return new XMLHttpRequest()
 else
  return false
}  

以下功能必须调用点击事件。

  function callOnClick(usrid)
   {  
    var mypostrequest=new ajaxRequest()
        mypostrequest.onreadystatechange=function(){
         if (mypostrequest.readyState==4){
          if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
           //action todo after successful return
          }
          else{
           alert("An error has occured making the request")
          }
         }
        }
        var status=encodeURIComponent(document.getElementById("status").value)// make a hidden field and set the status in value attribute
        var userid=usrid//set this value as the attribute of javascript function
        var parameters="status="+status+"&id="+userid
        mypostrequest.open("POST", "name of controller or servlet", true)
        mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        mypostrequest.send(parameters)
    }