How to make HTML Button perform action in Java?

how to handle multiple submit buttons in html forms
html button onclick
how to link submit button to another page in html
html button action
submit button redirect to another page html
html button formaction
button redirect html
button in html form

Basically I'm creating an upvote/downvote system, Now I've created two buttons in HTML :

<button type="button" name="upvote"></button>
<br>
<input type="number" th:value = "${commentValue}" disabled>
<br>
<button type="button" name="downvote"></button>

First button with name attribute - "upvote" and second with "downvote" , Now I want to catch a click on button and change the commentValue accordingly, If user clicks upvote, comment value must incriment and on downvote it must decrement

I found some topics that said to implement ActionListener, Create JButton objects and etc. but isn't there any simpler way ?

This is my code right now, The buttons do nothing. :

Controller :

private int numberValue = 0;

@GetMapping("/check")
public String nuberCheck(Model model){

    model.addAttribute("commentValue", numberValue);

    return "numberCheck";
}

@PostMapping("/check")
public String upvote(Model model, @RequestParam String action){
    if (action == "upvote"){
        numberValue++;
        model.addAttribute("commentValue", numberValue);
    }else if (action == "downvote"){
        numberValue --;
        model.addAttribute("commentValue", numberValue);
    }
    return "numberCheck";

}

numberCheck :

<form action="#" th:action="@{/check}" method="post">
    <button type="button" name="action" th:value="upvote" th:text = "upvote"></button>
    <br>
    <input type="number" th:value = "${commentValue}" disabled>
    <br>
    <button type="button" name="action" th:value = "dowvnote" th:text = "dowvnote"></button>
</form>

FIXED

Change button types to "submit" and then in controller :

@PostMapping("/check")
public String check(Model model,@RequestParam String action) {

    System.out.println(action);

    if (action.equals("upvote")) {
        numberValue++;
        model.addAttribute("numberValue", numberValue);
    }

    if (action.equals("dowvnote")) {
        numberValue--;
        model.addAttribute("numberValue", numberValue);
    }
    return "numberCheck";
}

@RequestParam String action "action" is the name attribute of button and "save" and "cancel" are the "value" attributes :) hope it helps

Sample:

HTML:

<form action="#" data-th-action="@{/action}" data-th-object="${model}" method="post">
    <button type="submit" name="upvote"></button>
    <button type="submit" name="downvote"></button>
</form>

Java:

@RequestMapping(value="/action", method=RequestMethod.POST)
public ModelAndView onClickAction() {}

HTML button formaction Attribute, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. HTML <button> tag The first submit button submits the form data to "action_page.php", and the This attribute overrides the form's action attribute. Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Talent Hire technical talent

Use the following and implement in your code

$(document).ready(function(){
$("#up").click(function(){
    var up = $.post("/upvote", {changeBy: 1}, function(dataBack){

        $("#upvote").text(dataBack);
    });

});
$("#down").click(function(){
    var down = $.post("/downvote", {changeBy: 1},
    function(dataBack){
        $("#downvote").text(dataBack);
    });

  });
});

HTML button formmethod Attribute, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Definition and Usage. The formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form's action attribute.. The formaction attribute is only used for buttons with type="submit".

You can use jquery for that. first add jquery library in your html page and write function like below inside script tag

function upVote(){
var counter= $('.comment').val();
counter++;
 $('.coment').val(counter);

}
function downVote(){
var counter= $('.comment').val();
counter--;
 $('.coment').val(counter);

}
<button type="submit"  name="upvote" th:onclick="'upVote();'"></button>
<br>
<input type="number" class="comment"th:value = "${commentValue}" disabled>
<br>
<button type="submit" name="downvote" th:onclick="'upVote();'"></button>

onclick Event, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� How to Make Button onclick in HTML The onclickattribute is an event attributethat is supported by all browsers. It appears when the user clicks on a button element. If you want to make a button onclick, you need to add the onclickevent attribute to the <button>element.

There is one best way to solve this.When you click button trigger one event and at that event increasse or decrease value.,use that value in an thymeleaf and pass it to the controller.

HTML button value Attribute, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Here's an example of creating a tool-bar button and menu item that perform the same function: Action leftAction = new LeftAction (); //LeftAction code is shown later button = new JButton (leftAction) menuItem = new JMenuItem (leftAction); To create an Action object, you generally create a subclass of AbstractAction and then instantiate it.

HTML button form Attribute, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

HTML button tag, HTML Button Tag. The <button> tag is used to create a clickable button within HTML form on your webpage. You can put content like text or image within the� There are several ways of creating an HTML button, that acts like a link (i.e., clicking on it the user is redirected to the specified URL). You can choose one of the following methods to add a link to the HTML button. Add an inline onclick event¶ You can add an inline onclick event to the <button>tag.

How to Make Button onclick in HTML, If you want to make a button onclick, you need to add the onclick event attribute to the element. Learn How to Make Button Onclick with Examples. Definition and Usage. The formmethod attribute specifies which HTTP method to use when sending the form-data. This attribute overrides the form's method attribute.. The formmethod attribute is only used for buttons with type="submit".

Comments
  • I suppose this might be of help? At least for initial idea... stackoverflow.com/questions/31401669/…
  • in Java code , how to catch clicks on either upvote or downvote ?
  • @Tornike you could use params="action=upvote" Ensure you have <button name="action" value="upvote">
  • Example like: @RequestMapping(value="/action", method=RequestMethod.POST, params="action=upvote")
  • please give it a try. Thank you.
  • So, I've changed my html to look like this -> <button type="button" name="action" value="upvote"></button> <br> <input type="number" th:value = "${commentValue}" disabled> <br> <button type="button" name="action" value = "dowvnote"></button> and controller : @PostMapping(value = "/check", params = "action=upvote") public String upvote(Model model){ numberValue++; model.addAttribute("commentValue", numberValue); return "numberCheck"; } but pressing the button does nothing at all