Using Submit Button API for Form tester

From wiki.usabilitytools.com
Jump to: navigation, search

Contents


Submit API

Submit API lets you choose which element of your webpage is the submit button of your form. To do this, you need to get CSS selector that identifies the button inside the form (differentiates it from other form elements).

How to do it properly

Take a look at this example:

<form name="my-form">
    <input type="text" name="my-field">
    <a class="form-submit">Submit!</a>
</form>

For the API to work, you have to choose the selector that identifies the submit button:

window['UT-FT-API-STATIC'] = {
    submit: ".form-submit"
}

More complicated forms

Take a look at this web form:

<div id="form-container">
    <form name="my-form">
        <input type="text" name="my-field">			
        <div class="button">Reset form</div>
        <div class="button">Submit!</div>
    </form>
</div>

How to do it correctly

In this case you can identify the element as the last button within a form:

window['UT-FT-API-STATIC'] = {
    submit: '.button:last-child'
}

Don't do this

These may seem like valid selectors but we will not be able to track anything indicated by them. We can only track elements inside the form.

In this example, part of selector (#form-container) identifies element that is outside of the form:

window['UT-FT-API-STATIC'] = {
    submit: '#form-container .button:last-child'
}

In this example, the first part of selector identifies the form itself:

window['UT-FT-API-STATIC'] = {
    submit: 'form .button:last-child'
}

Tips for making it easy

There are a couple of ways to make it much simpler and keep it running smoothly.

Keep it simple

<form name="my-form">
    <input type="text" name="my-field">
    <a class="form-submit">Submit!</a>
</form>

In this case, the best selector is .form-submit. Don’t try to overcomplicate it by, for example, using .form-submit:last-child if you are not aware of all implications. It's especially important when your form is created dynamically and you can not be sure what is the markup in every case. For example, selector .form-submit:last-child will not point to the submit button if some ad is added at the end of your form, but simple .form-submit will still be ok.

<form name="my-form">
    <input type="text" name="my-field">
    <a class="form-submit">Submit!</a>
    <div class="ad">Try out our new product!</div>
</form>

Track two buttons on one page

You can use any valid CSS selector, so if you have two submit buttons, it’s not a problem.

<form name="shopping-cart">
    <a id="buy">Buy</a>
    <a id="buy-promo">Buy with promo code</a>
</form>
 

You just have to separate them by a comma in our API, like this:

window['UT-FT-API-STATIC'] = {
    submit: "#buy, #buy-promo"
}

Track two submit buttons in forms on one page

It follows almost the same principle as tracking two buttons. Let's take a look at this example:

<form name="my-form">
    <input type="text" name="my-field">
    <a class="form-submit">Submit!</a>
</form>
<form name="another-form">
    <input type="text" name="my-field">
    <div>Submit!</div>
</form>

You have to take CSS selectors of buttons and separate them by a comma in our API:

window['UT-FT-API-STATIC'] = {
    submit: ".form-submit, form[name=another-form] > div:last-of-type"
}