Change an input value when clicking on an area

StackOverflow https://stackoverflow.com/questions/11644559

Question

I have an image in HTML/PHP with different areas. When I click on one of the areas I want my input field above to change. How do I do that? Trying to use a normal $variable but I dont get that to work either.

I am very new to HTML.

Thanks in advance! 

<input type="text" name="position" size="10" value="">

<img style="margin: 50px 500px" src="pic.jpg" width="500" height="200" alt=":("
usemap="#cabmap" />

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" *something here mby?* />



<html>
<head>
<title>Pos</title>
</head>

<body>

<form method="post" action="process.php">
<fieldset>
<legend><strong>ChosePos</strong></Legend>

<td style="padding-left: 40px"><b>Position</b></td>
<input id="position" type="text" name="position" size="10" value="Hellope"</input>
<br />
<img src="pic.jpg" width="500" height="200" alt="Position map" usemap="#map" />
<map name="map">
  <area shape="rect" coords="0,0,82,126" alt="CA1" onclick="javascript:simply();" />
  <script type="text/javascript">
    function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  </script>

  </map>


</fieldset>

<input style="pading-top: 20px" type="submit" value="Send report" />



</form>
</body>
</html>

Now have I've gotten this far but nothin happens when i click on the area...

I have no idea whats wrong. Plz help me.

Was it helpful?

Solution

UPDATE - if this is still marked as the "correct" answer...

I have tried explaining to the OP that my answer was based on the errors they had introduced when implementing the changes suggested by user1474090. And as a result, they should mark the answer from user1474090 as the "correct" one... and not this one.

Original Answer

In response to your updated question, you have a couple of syntax errors.

Firstly, your <input id="position" is badly formatted, so change...

<input id="position" type="text" name="position" size="10" value="Hellope"</input>

Into one of the following two lines...

<input id="position" type="text" name="position" size="10" value="Hellope"></input>
<input id="position" type="text" name="position" size="10" value="Hellope"/>

Secondly, your JavaScript function doesn't have a close brace }, so change...

<script type="text/javascript">
  function simply(){
  var box = document.getElementById("position");
  box.value="Hello";
</script>

To...

<script type="text/javascript">
  function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  }
</script>

I would also suggest that you move the <script> block into the <head> section of your page, rather than being part of the <body>. This is not vital for it to work, but it is the preferred way of having scripts in your page.

And I can thoroughly recommend FireBug for Firefox or use the developer components in Chrome and IE8/9 (F12 for both). These would very quickly allow you find issues like this.

OTHER TIPS

Yes you can do this using the external JavaScript library jQuery:

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="$('#position').val('Hello')"/>

Or you can do this with plain JavaScript:

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="javascript:simply();"/>
<script type="text/javascript">
function simply(){
 var box = document.getElementById("position");
 box.value="Hello"; 
}    
</script>

Also remember to add a id attribute to your text box.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top