javascript form - bypassing default behaviour for ajax

Question

I am trying to use the following code below. What I want is to get the value of which radio button is selected, sent back to the javascript method. Any variation I try seems to fail.

<html>
  <head>
    <style type="text/css">
      body { background-color: black; color: white; }
    </style>
    <script type="text/javascript">
      function handleClick(event)
      {

        alert(this.textBox1.value);

        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }

    </script>
  </head>
  <body">
    <form name="myform">
      <div>
 <input type="radio" name="test1" value="Cheese">
 <input type="radio" name="test2" value="Grapes">
 <input type="radio" name="test3" value="Crackers">
      </div>
      <input type="submit" onsubmit=JavaScript:handleClick(value) value="Update"/>
    </form>
  </body>
</html>

You seem to be missing some of your code.

Steerpike
– Steerpike

2009-03-19 15:40:13 +00:00
Commented Mar 19, 2009 at 15:40 — Steerpike
– Steerpike, Commented Mar 19, 2009 at 15:40
edited the question to get the missing parts to show.

seth
– seth

2009-07-30 21:19:55 +00:00
Commented Jul 30, 2009 at 21:19 — seth
– seth, Commented Jul 30, 2009 at 21:19

Linus Unnebäck · Accepted Answer · 2009-07-30 21:15:44Z

2

Your code is cut of but I think that you want to do something like this:

<html>
<head>
    <script type="text/javascript">
        function alertThing() {
            alert(document.getElementsByName('textBox1')[0].value);
            return false;
        }
    </script>
</head>
<body>
    <form action="myPage.php" method="post" onsubmit="return alertThing();">
        <input type="text" name="textBox1" value="hello" />
        <input type="submit" value="Submit the form!" />
    </form>
</body>
</html>

This will alert the value but it will not submit the form. Hope I helped you!

//Linus Unnebäck

answered Jul 30, 2009 at 21:15

Linus Unnebäck

24.4k16 gold badges79 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:28:43Z

0

If you're talking about the same general code you posted in your other question, I believe you have to loop through the possible radiobuttons; there's no built-in whichRadioButtonIsSelected() function.

You could do something like this:

function getRadioButtonValue(rbutton)
{
  for (var i = 0; i < rbutton.length; ++i)
  { 
    if (rbutton[i].checked)
      return rbutton.value;
  }
  return null;
}

// then in your code, where "this" is the form object, and 
var rbvalue = getRadioButtonValue(this.radiobutton);
// replace "radiobutton" with whatever the radiobutton group's name is

edit: here's an example:

<html>
  <head>
    <style type="text/css">
      body { background-color: black; color: white; }
    </style>
    <script type="text/javascript">
      function getRadioButtonValue(rbutton)
      {
        for (var i = 0; i < rbutton.length; ++i)
        { 
          if (rbutton[i].checked)
            return rbutton[i].value;
        }
        return null;
      }

      function handleClick(event)
      {
        if (console) console.info("handling click");  
        // for Firebug debugging, if you want it

    /* do something here */
        alert(this.textBox1.value);
        alert("Favorite weird creature: "+getRadioButtonValue(this["whichThing"]));
        // 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"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>
  </body>
</html>

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Mar 19, 2009 at 16:08

Jason S

191k176 gold badges637 silver badges1k bronze badges

3 Comments

user1253538 Over a year ago

Sorry for the delay. I was actually trying to work out how to use the example with a submit button instead of an EventListner. Also, I am trying your code, and pressing submit does nothing at all...

Jason S Over a year ago

You must be using Internet Explorer -- it works fine for me in Firefox and Safari. I tried it in IE 7.0 and it doesn't do anything. Not sure what's broken w/ IE...

Jason S Over a year ago

Correction: In IE7 it does do something, the default behavior of the form is still triggered (the URL changes to include a query string).

Dan Doyon · Accepted Answer · 2009-03-20 04:00:20Z

If it were me I would use a framework like JQUERY. Every radio button matching the selector "form input:radio" (and you can be very precise with selectors) will be associated with the doThis function. I made doThis a separate function but that was just for clarity.

below will work as is, however if you do use JQUERY, get a local copy.

<html>
<body>
    <form>
      IAMFOO <input type="radio" name="foobar" value="foo"/>
      IAMBAR <input type="radio" name="foobar" value="bar"/>
    </form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
   function dothis() {
    alert(this.value);
  }
  $(document).ready(function(){
    $("form input:radio").click(dothis)
  });
</script>

</body>
</html>

Collectives™ on Stack Overflow

javascript form - bypassing default behaviour for ajax

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related