Form Submit with Div onClick

Question

I'm trying to use a div to submit a form. Here's the HTML:

<form name="search-form" 
      id="search-form" 
      action="php.php" 
      class="form-search">

    <input style="color: black; background: rgba(255,255,255,0.5); padding: 15px; font-size: 18px;" 
           type="text" 
           name="search" 
           class="input-medium search-query">

        <div class="button1" onClick="document.forms["search-form"].submit();">
            <a href="#">
                <img  alt="" src="/img/buttons/icon1.png" />
            </a>
        </div>
    </form>

The form does not submit when the div is clicked. Could someone point out the problem? thanks. I've been trying this for an hour at least.

The a href is needed to keep the styling, but even if I remove it and left with just the icon, the submit doesn't work; nor does it work if I apply the onclick to the image.

Answer 1

Add search-form between single quotes:

onClick="document.forms['search-form'].submit();"

Answer 2

You can't just use quotes in quotes. Use single quotes to fix:

<form name="search-form" id="search-form" action="php.php" class="form-search">
    <input style="color: black; background: rgba(255,255,255,0.5); padding: 15px; font-size: 18px;" type="text" name="search" class="input-medium search-query">
    <div class="button1" onClick="document.forms['search-form'].submit();">
        <a href="#">
            <img alt="" src="img/buttons/icon1.png" />
        </a>
    </div>
</form>