为什么我的表单没有javascript工作?

时间:2015-05-07 15:36:56

标签: javascript html twitter-bootstrap

我有一个表格(我使用bootstrap)有3个数字输入和数字即时数字,这是我的代码



function abc() {
      var a = document.getElementById("a").value;
      var b = document.getElementById("b").value;
      var c = document.getElementById("c").value;

      var d = Math.pow((b), 2) - (4 * a * c);
              
      var x1 = (-b-(Math.sqrt(d))) / (2 * a);

      var x2 = (-b+(Math.sqrt(d))) / (2 * a);

      document.write(d);
    }

<div class="row"><!-- Row -->
        <div class="col-md-4"><!-- Rij links -->
          <form onsubmit="abc()" role="form">
            <div class="form-group">
              <label for="a">Vul hier a in:</label>
                <input type="number" class="form-control" id="a" placeholder="Ax2 + bx + c" >
            </div>
            <div class="form-group">
              <label for="b">Vul hier b in:</label>
                <input type="number" class="form-control" id="b" placeholder="ax2 + Bx + c" >
            </div>
            <div class="form-group">
              <label for="c">Vul hier c in:</label>
                <input type="number" class="form-control" id="c" placeholder="ax2 + bx + C" >
            </div>
              <button type="submit" class="btn btn-default btn-block">Ga!</button>
          </form>
        </div><!-- Einde Rij links -->
        <div class="col-md-4"><!-- Rij rechts -->
          <p>Je antwoord komt hieronder:</p>
          <p id="antwoord"></p>
        </div><!-- Einde Rij rechts -->
        <div class="col-md-4">

        </div>
      </div><!-- Einde Row -->
&#13;
&#13;
&#13;

我的javascript就在关闭正文标记之前。

起初代码工作但突然间它停止工作。它什么都不做

1 个答案:

答案 0 :(得分:1)

onsubmit函数不会阻止页面将请求发送回服务器。最佳做法是在abc函数结束时返回false:

 function abc() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;
  var d = Math.pow((b), 2) - (4 * a * c);
  var x1 = (-b-(Math.sqrt(d))) / (2 * a);
  var x2 = (-b+(Math.sqrt(d))) / (2 * a);
  document.write(d);

  return false;
}

您还应该按如下方式更新onsubmit:

 <form onsubmit="return abc()" role="form">

希望有所帮助!