Submit button not calculating

theClerk · November 21, 2019

I got this code for a simple calorie calculator and the submit button redirects to a page rather than simply calculating inputted data. I'm not sure how to get the submit button to simply calculate inputted data and display the results on screen. Please help.

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>



</head>

<body>

   <ul class="nav nav-tabs" id="units-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#imperial" aria-controls="imperial" role="tab" data-toggle="tab">Imperial</a></li>
   <li role="presentation"><a class="text-muted" href="#metric" aria-controls="metric" role="tab" data-toggle="tab">Metric</a></li>
       </ul>

   <div class="row">
       <div class="col-sm-6 tab-content">


               <div role="tabpanel" class="tab-pane active" id="imperial">
                   <div id="form">

<table>

              <tr>
              <td class="col1">Gender</td>
              <td>
              <label><input type="radio" name="gender" id="male" value="male" checked> Male </label>
              <label><input type="radio" name="gender" id="female" value="female"> Female</label>
              </td>
              </tr>

              <tr>
              <td class="col1"><label for="age">Age</label></td>
              <td>
              <input type="text" name="age" class="form-control" id="age" style="width:60px;" maxlength="3" value="">
              </td>
              </tr>

              <tr>
              <td class="col1"><label for="weight">Weight</label></td>
              <td><input type="text" name="weight" class="form-control" id="weight" placeholder="lbs" style="width:60px;" maxlength="3" value=""></td>
              </tr>

              <tr>
              <td class="col1"><label for="height">Height</label></td>
              <td>
                <select name="height" class="form-control" id="height" style="width:100px;">
                <option value="55">4ft 7in</option>
                <option value="56">4ft 8in</option>
                <option value="57">4ft 9in</option>
                <option value="58">4ft 10in</option>
                <option value="59">4ft 11in</option>
                <option value="60">5ft 0in</option>
                <option value="61">5ft 1in</option>
                <option value="62">5ft 2in</option>
                <option value="63">5ft 3in</option>
                <option value="64">5ft 4in</option>
                <option value="65">5ft 5in</option>
                <option value="66">5ft 6in</option>
                <option value="67">5ft 7in</option>
                <option value="68">5ft 8in</option>
                <option value="69" selected>5ft 9in</option>
                <option value="70">5ft 10in</option>
                <option value="71">5ft 11in</option>
                <option value="72">6ft 0in</option>
                <option value="73">6ft 1in</option>
                <option value="74">6ft 2in</option>
                <option value="75">6ft 3in</option>
                <option value="76">6ft 4in</option>
                <option value="77">6ft 5in</option>
                <option value="78">6ft 6in</option>
                <option value="79">6ft 7in</option>
                <option value="80">6ft 8in</option>
                <option value="81">6ft 9in</option>
                <option value="82">6ft 10in</option>
                <option value="83">6ft 11in</option>
                <option value="84">7ft 0in</option>
                </select>
              </td>
              </tr>

              <tr>
              <td class="col1">Activity</td>
              <td>
                <select name="activity" class="form-control" style="width:200px;">
                <option value="1.2" selected>Sedentary (office job)</option>
                <option value="1.375">Light Exercise (1-2 days/week)</option>
                <option value="1.55">Moderate Exercise (3-5 days/week)</option>
                <option value="1.725">Heavy Exercise (6-7 days/week)</option>
                <option value="1.9">Athlete (2x per day) </option>
                </select>
              </td>
              </tr>

              <tr>
              <td style="position:relative;" class="col1 text-muted"><label for="bodyfat">Body Fat %</label>
                          <span style="position:absolute;top:26px;left:14px;">(optional)</span></td>
                          <td id="bf"><input type="text" name="bodyfat" class="form-control" id="bodyfat" style="width:46px;display:inline-block;" maxlength="2" placeholder="15">
                          <span id="bodyfatpercentage">%</span>
                          </td>
              </tr>


              <tr style="margin-top:15px;">
              <td class="col1"> </td>
              <td><input type="submit" class="btn btn-submit btn-lg" id="submit" name="submit" value="Calculate!"></td>
              </tr>

              </table>

           </form>
       </div>                </div>
               <div role="tabpanel" class="tab-pane" id="metric">
                   <div id="form-metric">

</form>
       </div>                </div>

                   </div>



       </div>
   </div>

</body>
</html>

dsonesuk · November 21, 2019

Because that's what a form does when you submit, it reloads after going to a set path in action or to itself if action not set! try adding

onsubmit="return false" to the form element.

Edited November 21, 2019 by dsonesuk

Sign In

Submit button not calculating

Recommended Posts

theClerk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity