CODEWITHSUNDEEP
javascriptjqueryajaxspring-bootform-submit
Shreyas
Shreyas

Reputation: 15

Ajax call for second submit button of a form

I'm using spring boot and thymeleaf. Managing to call a spring controller method on click of first submit button. I'm trying for a Ajax call on hit of second submit button , how can I achieve it?

Ajax call for the second submit button

$(document).ready(function() {
  $("#download").click(function() {
    var checked = [];
    $('.checkbox:checked').each(function() {
      checked.push($(this).val());
    });

    console.log(checked);
    $.ajax({
      type: "POST",
      url: "selectedsalesDownload",
      data: {
        name: checked
      },
      success: function(msg) {
        console.log(mgs);
        alert(msg);
      }
    });
  });
});

<form name="salesList" th:action="@{/selectedsales}" th:object="${sales}" method="post">
  <div class="container">
    <hr>
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th>SELECT</th>
          <th>Mandy Name</th>
          <th>GSTIN</th>
        </tr>
      </thead>
      <tbody>
        <tr id="salesDataTable" th:each="tempSales:${sales}">
          <td>
            <input class="checkbox" type="checkbox" th:name="selected" th:value="${tempSales.ID}" />
          </td>
          <td th:text="${tempSales.mandyName}"></td>
          <td th:text="${tempSales.gstin}"></td>
        </tr>
      </tbody>
    </table>
    <div>
      <input type="submit" value="SELECT" name="submit" class="btn btn-primary btn-sm mb-3" />
      <input id="download" type="submit" value="DOWNLOAD" name="download" class="btn btn-primary btn-sm mb-3" />
    </div>
  </div>
</form>

Controller Method for first submit button

@PostMapping("/selectedsales")
public String selectedSales(
        @RequestParam(value = "selected", required = false) List<Integer> selectedList,
        Model model
) {
    //...
}

Controller Method for second submit button

@RequestMapping(value = "/selectedsalesDownload")
@ResponseBody
public String toDownload(@RequestParam("name") List<Integer> list) {
    return "msg";
}

I'm not able to get into "toDownload" method in the controller on click of second submit button instead I'm getting into first submit button controller method "selectedSales".

And also I need to send the checked box value which is stored in the javascript array variable "checked" to spring controller method "toDownload".

Need Solution.

Upvotes: 0

Views: 770

Answers (2)

Phil
Phil

Reputation: 165065

Two things here...

  1. You aren't preventing the second submit button from submitting the form normally. Either use a button type...

    <input id="download" type="button" ... />

    or make sure you prevent the default event action

    $("#download").on("click", function(e) {
  e.preventDefault()
  // and so on
})

  2. @RequestParam list parameters should be sent with the following format for the greatest compatibility

    name=1&name=2&name=3...

    Unfortunately, the default for jQuery is

    name[]=1&name[]=2&name[]=3...

    probably for compatibility with PHP. You can change this though via the traditional option

    $.ajax({
  method: "POST",
  url: "selectedsalesDownload",
  data: {
    name: checked
  },
  traditional: true, // 👈 note the value here
  success: function(msg) {
    console.log(mgs);
    alert(msg);
  }
});

    See https://api.jquery.com/jquery.ajax/ and more specifically https://api.jquery.com/jQuery.param/

Upvotes: 1

RCB
RCB

Reputation: 377

Why do you need two submit buttons? Which one actually completes the form?

Adding the following code to your JS would immediately solve the issue, but ultimately you really should change one of those submit inputs to type="button" as well. This will prevent the default functionality of the form element and you can then override it with your own code:

$("form").submit(function(){
    event.preventDefault();
    // Your other code to execute on form submission
});

Upvotes: 0

Related Questions