Search code examples
formslaravelvue.jslaravel-spark

How Do Laravel Spark Forms Submit?

Laravel Spark has a number of forms in its settings area. Here's one that adds teams.

enter image description here

If I look at the source code of this form, I see the following.

The HTML source for this form looks like the following

<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-4 control-label">
            Team Name
        </label>
        <div class="col-md-6">
            <input type="text" id="create-team-name" name="name" class="form-control">
<!---->
                <span class="help-block" style="display: none;">
                </span>
            </div>
        </div>
    <div class="form-group">
        <div class="col-md-offset-4 col-md-6">
            <button type="submit" class="btn btn-primary">
                Create 
            </button>
        </div>
    </div>
</form>

Specifically, the form itself has no action or type parameter

<form role="form" class="form-horizontal">

My assumption is there's some javascript running that handles all this (a Vue JS component), but it's not clear

  1. Where the Team Creation javascript source lives, and/or where Spark creates the component
  2. How I can backtrack how a particular form to its javascript

Experienced programmer here -- just new to Spark and hoping this is simple/obvious for an experienced Spark developer.

Solution

  • Each <form> in Spark is typically handled by a Vue.js component containing its definition, and although they don't have action or method attributes, they do have special Vue directives, such as @submit (or @click if it's a <button type="submit">). The reason you don't see them in HTML in dev tools, is because those directives are compiled before rendering.

    So the form you're referring to is wrapped into a <spark-create-team> tag. You can find the code that initializes this component in /resources/assets/js/spark-components/settings/teams/create-team.js; you'll also note that it simply requires the component definition from Spark's /vendor directory. In other words, component and form definitions are stored in Spark vendor files at /vendor/laravel/spark/resources/assets/js/settings/teams/create-form.js. Can you see that settings/teams/create-form.js part is identical? This should help you locate the underlying JS code for any component or form -- just search Spark's JS assets, and eventually its folder structure will become a second nature to you.

    As for the SparkForm class, it's a helper class designed for working with form errors. Its definition is in vendor/laravel/spark/resources/assets/js/forms/form.js file, although I don't think you'll ever need to make any modifications to it; just follow Taylor's examples with forms using Axios, and you shouldn't have any problems with submissions or validation. Although for the later point, validation, I'd suggest using an external package, instead of defaulting to server-side validation, but that's a bit off topic here.

    Hope this helps.