Submit buttons' value doesn't pass when used in modal

Viewed 41

There is a button in a form (shown below). The button properly passes its value on submit to the code below when employed in a regular(if you want to call it regular) Django-templated HTML page.

<button type="submit" class="btn btn-primary" name="revoke" value="1" form="my-form">Revoke</button>

The serialized data will contain revoke and its value

`$('#my-form').on('submit', function(event) {
        event.preventDefault();
        console.log($(this).serialize());

However, if the form is embedded in a modal as provided by Bootstrap 4, the serialized data has the rest of the form data, but no revoke. It would be very nice if the button passed the revoke as well.

1 Answers

As serialize() methods create a string with parameter separated by & you can attach value of button as well using "&revoke=" + $("[name=revoke]").val() then this will also get passed to your backend page.

Demo Code :

$('#my-form').on('submit', function(event) {
  event.preventDefault();
  //attch revoke as well
  var formdatas = $(this).serialize() + "&revoke=" + $("[name=revoke]").val();
  console.log(formdatas)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="acd">
  <input type="text" name="acd1">
  <button type="submit" class="btn btn-primary" name="revoke" value="1" form="my-form">Revoke</button>
</form>

Related