...

View Full Version : Function in HTML form is POST'ing data, but no idea why?



happybanana
11-20-2012, 01:03 PM
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
11-20-2012, 01:11 PM
A <button> element by default is a submit button, otherwise you should specify <button type="button" ..>

happybanana
11-21-2012, 09:16 AM
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
11-21-2012, 09:20 AM
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
11-21-2012, 10:43 AM
Thanks again! I really need to start to learn this stuff as opposed to fudging it :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum