theClerk Posted November 21, 2019 Share Posted 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"> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head> <body> <!-- Nav tabs --> <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"> <form method="post" action="/index.php"> <input type="hidden" name="system" value="imperial"> <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> <!-- end #form --> </div> <div role="tabpanel" class="tab-pane" id="metric"> <div id="form-metric"> <form name="form-metric-tagged" method="post" action="/index.php"> <input type="hidden" name="system" value="metric"> </form> </div> <!-- end #form --> </div> </div> </div> </div> <!-- end row --> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2019 Share Posted November 21, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now