# Use submit button without surrounding form

**URL:** <https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502>\
**Category:** General\
**Created:** [November 20, 2017, 2:29pm UTC](https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502 "2017-11-20T14:29:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![notify](https://avatars.discourse-cdn.com/v4/letter/n/eada6e/32.png) [@notify](https://community.swiftype.com/u/notify)\
**Post date:** [November 20, 2017, 2:29pm UTC](https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502/1 "2017-11-20T14:29:08Z")

</div>

Using a Sharepoint website, the entire website’s markup is added in one big form.

Meaning that I can’t use the following solution:

> [@How can I add a 'submit' button to my search box?](https://community.swiftype.com/t/how-can-i-add-a-submit-button-to-my-search-box/55):
>
> When embedding my search box, the input field appears by itself and there is no clickable button to submit the search. How can I add a button that can be clicked, instead of only allowing the user to press return/enter? This can be achieved by using the \<button\> HTML tag and including it within your form container after the search input field. For example: \<form\> \<input type="text" id="st-search-input" class="st-search-input search-field" /\> …

Is it possible to use submit button without the form tag, using vanilla JS?

---

<div class="post-metadata">

**Author:** ![cyoung](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@cyoung](https://community.swiftype.com/u/cyoung)\
**Post date:** [December 13, 2017, 4:01pm UTC](https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502/2 "2017-12-13T16:01:51Z")

</div>

I am having the same issue. The CMS for the site surrounds the page in a form tag and you can’t nest form tags.

Is there an API call that i can use to launch the results modal with the current search value?

---

<div class="post-metadata">

**Author:** ![cyoung](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@cyoung](https://community.swiftype.com/u/cyoung)\
**Post date:** [December 14, 2017, 3:16pm UTC](https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502/3 "2017-12-14T15:16:52Z")

</div>

This might be the answer you are looking for:

> **[Tutorials | Swiftype Documentation](https://swiftype.com/documentation/site-search/tutorials)**
>
> Learn how to get the most out of Swiftype

---

<div class="post-metadata">

**Author:** ![j.vanblokland](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@j.vanblokland](https://community.swiftype.com/u/j.vanblokland)\
**Post date:** [February 1, 2018, 6:29pm UTC](https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502/4 "2018-02-01T18:29:45Z")

</div>

I’m facing the same problem.

Having an overlay isn’t an option for us sadly.

---

<div class="post-metadata">

**Author:** ![j.vanblokland](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@j.vanblokland](https://community.swiftype.com/u/j.vanblokland)\
**Post date:** [February 6, 2018, 3:33pm UTC](https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502/5 "2018-02-06T15:33:48Z")

</div>

> This post seems to be related: [Using the JavaScript embed with ASP.net Forms](https://community.swiftype.com/t/using-the-javascript-embed-with-asp-net-forms/553)

The post shows that the default behavior of [asp.NET](http://asp.NET) is prevented out of the box by Swiftype.

However, the question still remains. Since the documentation of Swiftype shows that you need to add a form element around the input and button in order to make it work, as you can read here: [Customizing Swiftype Visual Styles | Swiftype Documentation](https://swiftype.com/documentation/site-search/tutorials/custom_styles#submit)

But since Sharepoint adds one big form around the entire document, then that limits your option if you’d for instance there is a action assigned tot the asp form (always by default) want two Swiftype engines on the same page.

The article states that:

> ADDING A SUBMIT BUTTON TO YOUR SEARCH BOX  
> Who doesn’t like buttons? To add a submit button to your search input, you can wrap the input code in a form container element and add a button element. All styling of the submit button is up to you! You can find an example below.

```auto
<form>
  <input type="text" class="st-default-search-input">
  <button type="submit">Submit</button>
</form>
```

---

<div class="post-metadata">

**Author:** ![j.vanblokland](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@j.vanblokland](https://community.swiftype.com/u/j.vanblokland)\
**Post date:** [February 13, 2018, 11:46am UTC](https://community.swiftype.com/t/use-submit-button-without-surrounding-form/502/6 "2018-02-13T11:46:03Z")

</div>

This seems to be a workaround: [Can you nest html forms? - Stack Overflow](https://stackoverflow.com/questions/379610/can-you-nest-html-forms/28528359#28528359)

It basically states that you can use HTML 5 to attach a specific form to an action. Meaning that you can append a dedicated from outside the [asp.net](http://asp.net) form using jQuery, and using that for the Swiftype submit.