I'm working on a project that requires me to grab user input from 3 fields. After submission, these would then be placed into an array which could be used to generate an API call based of these parameters.

<h2>ENTER YOUR INGREDIENTS</h2>
<div class="left"></div>
<div class="right">
    <form class="search-form">
        <input type="text" class="field" id = "form1" placeholder="First Ingredient">
        <input type="text" class="field" id = "form2" placeholder="Second Ingredient">
        <input type="text" class="field" id = "form3" placeholder="Third Ingredient">
        <input type="button" id="btn" value="Submit">Search</button>
    </form>
</div>

This is the HTMl - currently im stuck on actually getting the forms to all submit at once at be placed into an array - i have little JS to show as i've been stuck.

Any help would be great.