Multiple submit buttons in version 6.6.1

In our project we use multiple submit buttons, each to trigger another functionality in our code. In version 6.5.3 it al works fine, but after upgrading to 6.6.1 the specific clicked button doesn’t exists in the FormData anymore. Any suggestions?

foundation version 6.6.1 (foundation-sites)
form method=“post”
form validation with abide

Tested with the following code:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>Foundation Form Abide Test</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.1/dist/css/foundation.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.1/dist/js/foundation.min.js"></script>

</head>

<body>

    <div class="grid-x grid-padding-x">
        <div class="cell">
          <h2>Multiple submit buttons</h2>
          <form name="example" data-abide novalidate method="post">
            <div data-abide-error class="alert callout" style="display: none;">
              <p><i class="fi-alert"></i> There are some errors in your form.</p>
            </div>
            <div class="grid-x grid-padding-x">
              <div class="small-12 cell">
                <label>Number Required
              <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number" name="example[nummer]" value="123123">
              <span class="form-error">
                Yo, you had better fill this out, it's required.
              </span>
            </label>
                <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
              </div>
            </div>

            <div class="grid-x grid-padding-x">
              <fieldset class="large-12 cell">
                <button class="button" type="submit" name="example[apply]" value="Submit">Apply</button>
                <button class="button" type="submit" name="example[save]" value="Submit">Submit</button>
              </fieldset>
            </div>
          </form>
        </div>
      </div>

    <script>
        $(document).foundation();
    </script>
</body>
</html>

Thanks for helping!

Please remove `type=“submit” and try it again.

This is a flaw in jQuery with $.submit().

Related:

1 Like

Spanvanes,

The documentation will be updated to something like this (PR already in for it):

Add the attribute type=“button” to <button> elements, unless the button submits a form, in which case you should add the class .submit and remove type=“button”

See this codepen: https://codepen.io/phpfui/pen/abObmYm

Hope this solves your problem.

1 Like

Thank you for the quick reply.

We changed it on our project and it works again, thank you very much!