[ad_1]
I've been working on a project wherein I've a single html bootstrap page index.html with three section/pages and continuous scroll applied to it, with a form on the second section. When the user presses the submit button, the data from the for is sent to a flask script where the logic is applied and data is returned back to the page and gets displayed below the form. the only problem is when the use presses submit everything works well except the page is reloaded and starts at the top/first section.
I've tried using onsubmit attribute in the form and also tried to include this js script in the code
function submitResponse()
$('form').submit(function()
$.post('http://google.com', function()
window.location = 'http://google.com';
);
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>MedSense.ai</title>
<link rel="shortcut icon" href="http://stackoverflow.com/static/img/red-cross.ico" />
<script >
var value= value
var message= message
var action= action
var test= test
</script>
<!-- Bootstrap core CSS -->
<link href="http://stackoverflow.com/static/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="http://stackoverflow.com/static/vendor/font-awesome/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Lora:400,700,400italic,700italic" rel="stylesheet"
type="text/css">
<link href='https://fonts.googleapis.com/css?family=Cabin:700'
rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="http://stackoverflow.com/static/css/grayscale.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top"
id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-
top">MedSense.ai</a>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarResponsive" aria-
controls="navbarResponsive" aria-expanded="false" aria-label="Toggle
navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">Check
Onset</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger"
href="#download">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger"
href="#contact">Disclaimer</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Intro Header -->
<header class="masthead">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h3 class="brand-heading">MedSense.ai</h3>
<p class="intro-text">Did you just got your medical checkup
done?
<br>Now check the onset of you developing diabetes in the
coming 3 years</p>
<a href="#about" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="content-section text-center">
<div class="container">
<div class="row">
<div style="margin-top: -150px" class="col-lg-4 mx-auto">
<a name="onset"></a>
<h2>Check Onset</h2>
<p style="margin-top: 2px">If you do not know any of input,
kindly input '0'</p>
<form class="form-horizontal" role="form" method="POST"
onsubmit="document.location.href='/templates/index.html#onset'">
<div class="form-group">
<label for="weight">Weight(KG)</label>
<input type="number" class="form-control" id="weight" name="weight"
placeholder="Enter Weight" required>
</div>
<div class="form-group">
<label for="height">Height(CM)</label>
<input type="number" class="form-control" id="height" name="height"
placeholder="Enter Height" required>
</div>
<div class="form-group">
<label for="glucose">Glucose(mg/dL)</label>
<input type="number" class="form-control" id="glucose"
name="glucose" placeholder="Enter Glucose reading" required>
</div>
<div class="form-group">
<label for="bp">Blood Pressure</label>
<input type="number" class="form-control" id="bp" name="bp"
placeholder="Enter BP" required>
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" class="form-control" id="age" name="age"
placeholder="Enter Age" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br>
Output: value
<br>
Test Result: <b> test </b>
<br>
<p> message </p>
<p> action</p>
</div>
</div>
</div>
</section>
<!-- Download Section -->
<section id="download" class="download-section content-section text-
center">
<div class="container">
<div class="col-lg-8 mx-auto">
<h2>About Us</h2>
<p>Our first prouct, a diabetes onset predictor is a smart
Convolutional Neural Network trained on over a thousand records and
with a prediction accuracy of 79%. The model on receiving certain
inputs from the user is able to predict weather the user is at risk
of incuring diabetes in the coming years or not. </p>
<p style="margin-bottom: 5px">Follow us on: </p>
<ul class="list-inline banner-social-buttons">
<li class="list-inline-item">
<a href="#" class="btn btn-default btn-lg">
<i class="fa fa-twitter fa-fw"></i>
<span class="network-name">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-default btn-lg">
<i class="fa fa-github fa-fw"></i>
<span class="network-name">Github</span>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-default btn-lg">
<i class="fa fa-google-plus fa-fw"></i>
<span class="network-name">Google+</span>
</a>
</li>
</ul>
<p style="margin-bottom: 5px">A shoutout to the open source
libraries this project is powered by: </p>
<a style="margin: 5px" href="https://keras.io/" class="btn btn-
default">Keras</a>
<a style="margin: 5px" href="https://github.com/Theano/Theano"
class="btn btn-default">Theano</a>
<a style="margin: 5px" href="https://www.tensorflow.org/"
class="btn btn-default">TensorFlow</a>
<a style="margin: 5px" href="http://flask.pocoo.org/"
class="btn btn-default">Flask</a>
<a style="margin: 5px" href="https://getbootstrap.com/"
class="btn btn-default">BootStrap</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Disclaimer</h2>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer >
<div class="container text-center">
<p></p>
<p>Copyright © medsense.ai 2018</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="http://stackoverflow.com/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js">
</script>
<!-- Plugin JavaScript -->
<script src="/static/vendor/jquery-easing/jquery.easing.min.js">
</script>
<!-- Custom scripts for this template -->
<script src="/static/js/grayscale.min.js"></script>
</body>
</html>
flask- app.py
from flask import Flask, render_template, request
from flask import request
import numpy as np
from keras.models import load_model
from sklearn.preprocessing import MinMaxScaler
from flask import jsonify
import os
import re
import sys
import tensorflow as tf
# init model directory
MODEL_DIR = './models'
result=''
#init Flask
app = Flask(__name__)
#load the compiled model.
print("Loading model")
model = load_model(os.path.join(MODEL_DIR, 'classifier_model.hdf5'))
#model = load_model('keras_model.h5')
scaler= MinMaxScaler(feature_range=(0,1))
#routing for home page
@app.route('/', methods=['GET','POST'])
def index():
if request.method == 'GET':
return render_template('index.html')
if request.method == 'POST':
weight=float(request.form['weight'])
height=float(request.form['height'])
gluc=float(request.form['glucose'])
bp=float(request.form['bp'])
age=float(request.form['age'])
height=height/100
bmi=weight/(height*height)
predict_data=np.array([[gluc, bp, bmi, age],[103,80,19.4,22]])
scaled_predict_data=scaler.fit_transform((predict_data))
round_predict =
model.predict_classes(scaled_predict_data,verbose=0)
res=np.array_str(round_predict[0])
if round_predict[0]==0:
test_res='Negative'
if round_predict[0]==1:
test_res='Positive'
return render_template('index.html', value=res,test=test_res)
if __name__ == '__main__':
port= int(os.environ.get('PORT',5000))
app.run(host='0.0.0.0', port=port)
[ad_2]
لینک منبع
