Function in HTML form is POST'ing data, but no idea why?

[happybanana]

I have a HTML form that I'd like to POST variables off to another server side script but a javascript function in the form (that I'm using as a graphic on/off button) is acting like a submit button and I've no idea why?

Now this behaviour is somewhat similar to what I actually want to happen but it's unexpected and out my my control, so I just need to know what's going on. Any ideas? Because I thought this situation (a javascript submit button) requires document.myform.submit() and wouldn't happen otherwise.

After the onoff function executes the variables from the form and their values are sent to reminders-update.php

<form id=\"myform\" method=\"post\" action=\"reminders-update.php\">
<td>
 <button class=\"onoff\" onclick=\"onoff(this)\"><div>off</div></button>
</td>
<td>
<input type=\"date\" id=\"freqs\" name=\"date\" />
</td>
<td>
<input type=\"email\" name=\"usremail\" />
</td>
<td>
<td>
<input type=\"submit\" value=\"Send\" />
</td>
</tr>


<script type=\"text/javascript\">
var buttonstate=0;
function onoff(element)
{

  buttonstate= 1 - buttonstate;
  var blabel, bstyle, bcolor;
  
  if(buttonstate)
  {

    blabel=\"on\";
    bstyle=\"green\";
    bcolor=\"lightgreen\";
  }
  else
  {
    blabel=\"off\";
    bstyle=\"lightgray\";
    bcolor=\"gray\";
  }
  var child=element.firstChild;
  child.style.background=bstyle;
  child.style.color=bcolor;
  child.innerHTML=blabel;
}
</script>

[devnull69]

A <button> element by default is a submit button, otherwise you should specify <button type="button" ..>

[happybanana]

Thank you very much, that worked perfectly. I was trying to work that out for days!

Another issue I'm having is sending pre POST variables into the/a javascript function from the html form. So say I wanted to send the value for 'freqs' into a function, do you know how I might do that? I've tried various ways without luck. Even if you just point me to the write method/tutorial I'm more than happy to look up the method myself.

Cheers mate!

[devnull69]

If you add any event handler attribute like onchange, onclick etc. to a form field, the keyword "this" will help you to refer to the current element and this.value will hold the value of the current field

Example:

<input type="text" name="mytext" onblur="checkValue(this.value);" />

function checkValue(theValue) {
   // this will be called on blur of the text field
   alert('The value is: ' + theValue);
}

[happybanana]

Thanks again! I really need to start to learn this stuff as opposed to fudging it