Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    A <button> element by default is a submit button, otherwise you should specify <button type="button" ..>

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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:
    Code:
    <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);
    }

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks again! I really need to start to learn this stuff as opposed to fudging it


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •