Question

我有以下形式（通过php回显），当选择单选按钮时，我希望将该值传递给javascript函数，然后我可以处理它。

<form id=\"form1\" name=\"form1\" method=\"\" action=\"JavaScript:alterRecord()\">
<input name=\"radiobutton\" type=\"radio\" value=\"test1\" />Test 2<p>
<input name=\"radiobutton\" type=\"radio\" value=\"test2\" />Test 2<p>
<input name=\"radiobutton\" type=\"radio\" value=\"test3\" />Test 3<p>
<input name=\"radiobutton\" type=\"radio\" value=\"test4\" />Test 4
<input type=\"submit\" name=\"Submit\" value=\"Submit\" />
</form>

和JavaScript

function alterRecord(value) {
alert(value);
}

我无法找到如何获取javascript以获取表单提交的值。

Answer 1

从头到尾：

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

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

Answer 2

点击单选按钮时，是否要触发javascript？或者提交表单？

如上所述，你可以使用onsubmit =“alterRecord（this）;” 然后您可以使用

等命令

alert(this.radio1.checked);

如果您也将id添加到所有单选按钮..

每次单击单选按钮时都会触发javascript

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

然后“this”命令将允许您访问单击的单选按钮。

Answer 3

如果您想在提交时使用Javascript执行某些操作，但不会发生正常的POST或GET请求（导致旧页面卸载并加载新页面），请确保做这样的事情：

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

行event.preventDefault()和return false是关键。我也喜欢使用addEventListener，而不是在表单中硬编码onSubmit。我想，这只是风格/偏好的问题。（尽管addEventListener允许您拥有多个处理程序。）

Answer 4

action属性应指向一个URL。如果您想在用户提交表单时在javascript中执行某些操作，请使用onsubmit属性。例如，onsubmit =“alert（42）”。

如果从onsubmit属性中调用javascript方法并将其作为参数传递给它，您将可以访问表单标记及其所有子节点，并且能够确定各种控件的当前状态。将

Answer 5

首先，开始使用jQuery。

既然你已经开始了，read the docs并且应该很容易做到这样的事情：

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

使用JavaScript获取表单变量

5 个答案: