javascript 表单 - 绕过 ajax 的默认行为答案

【问题标题】：javascript form - bypassing default behaviour for ajaxjavascript 表单 - 绕过 ajax 的默认行为
【发布时间】：2009-03-19 15:25:47
【问题描述】：

我正在尝试使用以下代码。我想要的是获取选择了哪个单选按钮的值，并将其发送回 javascript 方法。我尝试的任何变化似乎都失败了。

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

【问题讨论】：

您似乎遗漏了一些代码。
编辑了问题以显示缺失的部分。

标签： javascript html ajax

【解决方案1】：

你的代码被剪掉了，但我认为你想做这样的事情：

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

这将提醒值，但不会提交表单。希望对你有所帮助！

//Linus Unnebäck

【讨论】：

【解决方案2】：

如果您谈论的是您在your other question 中发布的相同通用代码，我相信您必须遍历可能的单选按钮；没有内置 whichRadioButtonIsSelected() 函数。

你可以这样做：

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

编辑：这是一个例子：

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

【讨论】：

抱歉耽搁了。我实际上是想弄清楚如何使用提交按钮而不是 EventListner 的示例。另外，我正在尝试您的代码，然后按提交什么也没做...
您必须使用 Internet Explorer——它在 Firefox 和 Safari 中对我来说很好用。我在 IE 7.0 中尝试过它并没有做任何事情。不知道 IE 出了什么问题...
更正：在 IE7 中它确实做了一些事情，但仍会触发表单的默认行为（URL 更改为包含查询字符串）。

【解决方案3】：

如果是我，我会使用 JQUERY 之类的框架。每个与选择器“form input:radio”匹配的单选按钮（您可以非常精确地使用选择器）将与 doThis 函数相关联。我将 doThis 设为一个单独的函数，但这只是为了清楚起见。

以下内容将按原样运行，但如果您使用 JQUERY，请获取本地副本。

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

【讨论】：