Why doesn't my form with javascript work?

Question

I have a form (im using bootstrap) with 3 number inputs and with the numbers im doing math, this is my code

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

my javascript is right before the closing body tag.

at first the code worked but than suddenly it stopped working. it does nothing

Stopped working means? it is diaplaying an answer, when the button is clicked.. — Lal
– Lal, Commented May 7, 2015 at 15:39
The form submits because there's nothing preventing it from submitting, thus reloading the page. — adeneo
– adeneo, Commented May 7, 2015 at 15:39
Run code snippet seems to work for me, I have no idea what sort of math it is doing though! — craigie2204
– craigie2204, Commented May 7, 2015 at 15:41
@craigie2204 It seems to me like its the quadratic formula, used for calculating intersections with the x axis of a second power polynomal. en.wikipedia.org/wiki/Quadratic_formula — Edo
– Edo, Commented May 7, 2015 at 15:45

Steve Hynding · Accepted Answer · 2015-05-07 15:45:57Z

1

The onsubmit function is not preventing the page from sending the request back to the server. Best practice is to return false at the end of the abc function:

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

You should also update the onsubmit as follows:

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

Hope that helps!

answered May 7, 2015 at 15:45

Steve Hynding

1,8691 gold badge13 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Why doesn't my form with javascript work?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related