HTML help (button with <area> and <input>)

Question

Good evening, folks. That’s the code:

<form action="/teste.php" method="get">

    <map name="image-map">
        <area target="" alt="" title="" coords="210,233,541,508" shape="rect">
    </map>

    <div>
        <font face="verdana" color="white">Player: </font>
        <input type="text" name="nome_player" maxlength="15"><br>
    </div>

    <div>
        <img src="imagens/img_inicial.png" alt="circulo_" class="circulo" usemap="#image-map"/>
    </div>

</form>

This area inside the map would work like a button, only I can only put a href, but I needed it to work as an input (Submit) anyway, to do the form action... Someone would know to help me?

Answer 1

Try it this way, on href you call the function

href="javascript:document.getElementById('formID').submit();"

<form action="/teste.php" method="get" id="formID">

        <map name="image-map">
            <area target="" alt="" title="" coords="210,233,541,508" shape="rect" href="javascript:document.getElementById('formID').submit();">
        </map>
    
        <div>
            <font face="verdana" color="white">Player: </font>
            <input type="text" name="nome_player" maxlength="15"><br>
        </div>
    
        <div>
            <img src="http://unsplash.it/600/600" alt="circulo_" class="circulo" usemap="#image-map"/>
        </div>
    
    </form>

---

Another way to do without the href making a onClick="myform.submit();"

<form name="myform" action="/teste.php" method="post>
    ... campos do form ....
    <area onClick="myform.submit();" nohref target="" alt="" title="" coords="210,233,541,508" shape="rect">
</form>