ansaurus

Question

javascript form - bypassing default behaviour for ajax

Answer 1

A:

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>

Jason S 2009-03-19 16:08:41

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...

Joshxtothe4 2009-03-25 15:09:05

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 2009-03-25 17:51:13

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

Jason S 2009-03-25 17:52:22

Answer 2

A:

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"&gt;&lt;/script&gt;
<script type="text/javascript">
   function dothis() {
    alert(this.value);
  }
  $(document).ready(function(){
    $("form input:radio").click(dothis)
  });
</script>

</body>
</html>

Dan 2009-03-20 04:00:20

Answer 3

A:

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

Linus Unnebäck 2009-07-30 21:15:44

ansaurus

tags:

views:

answers:

javascript form - bypassing default behaviour for ajax

related questions