HTML5 button does not submit its own value if preventDefault is set

Question

I have a form with several <input> fields, and a series of <button> elements. Every button has a value and I want this value to be sent on submit. Here is an example:

<!doctype html>
<title>test</title>
<meta charset="utf-8">
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<body>

<form>
  <button type="submit" name="launch" value="one">one</button>
  <button type="submit" name="launch" value="two">two</button>
</form>

<script>
      $("form").on('submit', function(e){
          e.preventDefault();
          console.log($("form").serializeArray())
      });      
</script>

Without preventDefault(), I have correctly ?launch=one on submit.
With preventDefault(), I have an empty array in the console log.

Why? How can I avoid it?

Call a different action depending on the button which is clicked. The thing is: the button value is serialized if preventDefault() is not set. — leonard vertighel, Nov 27 '18 at 17:28
How about just putting an event listener on the buttons then? `$("button").on('click', (e) => { ... }` — Jordan Soltman, Nov 27 '18 at 17:29
I tried, but then, e.preventDefault() doesn't prevent the form to be submitted. — leonard vertighel, Nov 27 '18 at 17:34
As long as all the other inputs (not shown in the example here) are retrieved, no, they don't need to. But is it valid and/or good practice? — leonard vertighel, Nov 27 '18 at 17:46
I think it's your best option if you need to handle the form differently dependent on which button is clicked. But an event handler on the button, then serialize the form and handle it as appropriate. Totally valid/good practice. — Jordan Soltman, Nov 27 '18 at 17:50
I tried following the marked "duplicate": with the event on the button I cannot prevent the page to be reloaded. Thanks anyway — leonard vertighel, Nov 27 '18 at 17:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184337/discussion-between-jordan-s-and-leonard-vertighel). — Jordan Soltman, Nov 27 '18 at 18:02

HTML5 button does not submit its own value if preventDefault is set

0 Answers0