ansaurus

Question

Answer 1

+4 A:

From the top of my head:

<form onSubmit="alterRecord">
  <input type="radio" id="radio1"/>
  ...
</form>

function alterRecord() {
  var radio1 = document.getElementById('radio1');
  alert(radio1.checked);
}

Pies 2009-03-12 13:32:16

This will refresh the whole page, which I want to avoid.

Joshxtothe4 2009-03-13 12:05:16

You can stop the event propagation in the event handler. If you use a library like jQuery that can be as easy as adding "return false" at the end of handler.

Pies 2009-03-22 00:11:05

i.e. jQuery('#my_form').submit(function(){ return false })

Pies 2009-03-22 00:12:26

I use that a lot when showing HTML/CSS designs to a client, i.e. jQuery('A').click(function(){ return false });

Pies 2009-03-22 00:14:59

Answer 2

A:

The action attribute should point to a URL. If you want to do something in javascript when the user submits the form, use the onsubmit attribute. For instance, onsubmit="alert(42)".

If you call a javascript method from within the onsubmit attribute and pass it "this" as an argument, you'll have access to the form tag and all its childnodes and will be able to determine the current state of various controls at will.

Rahul 2009-03-12 13:35:07

I dont want to use a url, I want to use a javascript function

Joshxtothe4 2009-03-12 13:42:09

So just don't set the action attribute then. The attribute you want if you want to handle the form with javascript is onsubmit.

Rahul 2009-03-12 18:07:53

Answer 3

A:

First, start using jQuery.

Now that you've got that going, read the docs and it should be easy enough to do something like this:

$("input[name='radiobutton']").click(function() {
   // do stuff
});

slf 2009-03-12 13:44:13

Jason S 2009-03-12 14:27:42

point taken, but it's still a valid solution to the problem. I wasn't trying to evangelize

slf 2009-03-13 16:29:28

Answer 4

+2 A:

Do you want the javascript to fire when a radio button is clicked? Or when the form is submitted?

As mentioned, you can use onsubmit="alterRecord(this);" Then you can use commands such as

alert(this.radio1.checked);

if you add id's to all the radio buttons as well..

And for the javascript to fire each time a radio button is clicked

<input type="radio" onclick="alterRecord(this);" ... />

Then the "this" command would allow you to access the radio button clicked.

peirix 2009-03-12 13:44:15

Answer 5

+2 A:

If you want to do something in Javascript on submit, but not have the normal POST or GET request occur (which causes the old page to unload and a new page to load), make sure to do something like this:

<html>
  <head>
    <style type="text/css">
      body { background-color: black; color: white; }
    </style>
    <script type="text/javascript">
      function handleClick(event)
      {
        if (console) console.info("handling click");  
        // for Firebug debugging, if you want it

    /* do something here */
        alert(this.textBox1.value);
        // I don't like alerts but it works everywhere

        if (console) console.info("handled click");  

        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
      function doit()
      {
        if (console) console.info("starting doit()");
        document.forms.myform.addEventListener("submit", handleClick, true);
        return true;
      }
    </script>
  </head>
  <body onload="doit()">
    <form name="myform">
      <div>
          <textarea name="textBox1" rows="10" cols="80">
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.
         </textarea>
      </div>
      <input type="submit" value="Update"/>
    </form>
  </body>
</html>

The lines event.preventDefault() and return false are key. I also like using addEventListener rather than hard-coding an onSubmit in the form. Just a matter of style/preference I guess. (although addEventListener does allow you to have multiple handlers.)

Jason S 2009-03-12 14:24:21

This seems perfect. How would you modify this to work with onsubmit instead? However I call handleevent with onsubmit I cannot get it to register

Joshxtothe4 2009-03-15 19:37:24

ansaurus

tags:

views:

answers:

getting form variables with JavaScript

related questions