add more than one name in the form

2

I have the following problem, I have an image map , where when clicking the coordinates the result appears within a <input type="text" /> , however I can only put the name of one of the coordinates clicked. p>

I would like to know how to enter more than one coordinate name within this same input .

Follow the code:

<html>
<head>

<script type="text/javascript">
        function local(name){
           document.myform.post_localp.value = name
        }
    </script>

</head>

<body>
<form name="myform" action="" method="POST">
    <input type="text" name="post_localp" size="20">

<div id="anterior" style="display:none" class="imgAnterior">
    <img src="imagem.png" alt="anterior" usemap="#tutorials">  &nbsp;                           
            <map name="tutorials">
                <area shape="rect" coords="142,284,185,308" href="#" alt="JE" onclick="local('J.E')">
                <area shape="rect" coords="209,284,249,308" href="#" alt="JE" onclick="local('J.D')">
                </map>    
</div>

</body>
</html>
    
asked by anonymous 07.02.2018 / 22:05

1 answer

1

It is possible to concatenate with what already has in input , and avoiding that it is inserted (in the image below, each half, left and right, is a link map):

<html>
<head>

<script type="text/javascript">
        function local(name){
           
           var valor = document.myform.post_localp.value;
           
           if(valor.indexOf(name) == -1){
              document.myform.post_localp.value += name+" ";
           }
        }
    </script>

</head>

<body>
<form name="myform" action="" method="POST">
    <input type="text" name="post_localp" size="20">

<div id="anterior" style="xdisplay:none" class="imgAnterior">
    <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"alt="anterior" usemap="#tutorials">  &nbsp;                           
            <map name="tutorials">
                <area shape="rect" coords="0,354,315,0" href="#" alt="JE" onclick="local('J.E')">
                <area shape="rect" coords="316,354,630,0" href="#" alt="JE" onclick="local('J.D')">
                </map>    
</div>

</body>
</html>
    
07.02.2018 / 22:38