保持用户输入后按输入type =“提交”，而不使用jQuery或Ajax

我创建了一个python web应用程序，它从input type =“number”获取多个用户输入，计算将在input type =“submit “被按下。我设法做到了，但看起来用户输入的内容早先消失，因为页面在提交时会刷新。任何人都可以帮助我如何保持用户输入，即使输入类型=“提交”被按下后。保持用户输入后按输入type =“提交”，而不使用jQuery或Ajax

这是我的Python脚本：

from flask import Flask, render_template, request 
import math 


app = Flask(__name__, template_folder='C:\\Users\\iyzadsyammil\\.PyCharmCE2017.1\\config\\fileTemplates') 

@app.route('/') 
def index(): 
    return render_template('index.html') 

@app.route('/Menu') 
def showmenu(): 
    return render_template('index.html') 

@app.route('/App',methods=['GET', 'POST']) 
def showapp(): 
    outpb=0 
    x=0 
    logpb=0 
    error=" " 

    if request.method=='POST': 
     ingor = request.form['inGOR'] 
     inog = request.form['inOG'] 
     ingg = request.form['inGG'] 
     inws = request.form['inWS'] 
     intemp = request.form['inT'] 
     inpress = request.form['inP'] 
     innc = request.form['inNC'] 
     cor1 = request.form['cor1'] 
     cor2 = request.form['cor2'] 
     cor3 = request.form['cor3'] 
     cor4 = request.form['cor4'] 

     ingor = float(ingor) 
     inog = float(inog) 
     ingg = float(ingg) 
     inws = float(inws) 
     intemp = float(intemp) 
     inpress = float(inpress) 
     innc = float(innc) 

     try: 
      if cor1 == "VB": 
       if inog <= 30: 
        outpb = ((27.64*ingor/ingg)*10**((-11.172*inog)/(intemp+460)))**(1/1.0937) 
       else: 
        outpb = ((56.06*ingor/ingg)*10**((-10.393*inog)/(intemp+460)))**(1/1.187) 
      elif cor1 == "AM": 
       outpb = 0.00538088*ingor**0.715082*ingg**-1.87784*(141.5/(inog+131.5))**3.1437*(intemp+460)**1.32657 
      elif cor1 == "G": 
       x = (ingor/ingg)**0.816*((intemp**0.172)/(inog**0.989)) 
       logpb = 1.7669 + 1.7447 * math.log10(x) - (0.30218*(math.log10(x)**2)) 
       outpb = 10**logpb 
      elif cor1 == "PF": 
       x = 7.916*(10**-4)*inog**1.541-(4.561*(10**-5)*intemp**1.3911) 
       outpb = ((112.727*ingor**0.577421)/(ingg**0.8439*10**x))-1391.051 
      elif cor1 == "S": 
       outpb = 18.2*((ingor/ingg)**0.83*10**(0.00091*intemp-0.0125*inog)-1.4) 
      else: 
       outpb = "Invalid Correlation!!" 
     except ValueError: 
      error = "Please enter an appropriate value!" 

    return render_template('app.html',error=error,outpb=outpb) 

if __name__ == "__main__": 
    app.run(debug=True)

这是我目前的HTML页面：

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Testing Program</title> 
 

 

 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> 
 

 

 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
     <div class="header"> 
 
      <nav> 
 
       <ul class="nav nav-pills pull-right"> 
 
        <li role="presentation" class="active"><a href="Menu">Home</a> 
 
        </li> 
 
        <li role="presentation" class="active"><a href="App">App</a> 
 
        </li> 
 
        <li role="presentation" class="active"><a href="LogIn">Log In</a> 
 
        </li> 
 
        <li role="presentation" class="active"><a href="SignUp">Sign Up</a> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
      <h3 class="text-muted">Experiment</h3> 
 
     </div> 
 

 
     <div class="jumbotron"> 
 
      <h1>WELCOME!!</h1> 
 
     </div> 
 

 

 
     <div class="row marketing"> 
 
      <form method="POST" class="col-lg-6" > 
 
       <h3>PVT Application</h3> 
 
       <br> 
 
       <table> 
 
        <tr><td>Input Data</td><td></td><td></td></tr> 
 
        <tr><td>Solution GOR(Rs) </td><td><input type="number" step="any" name="inGOR"></td><td>scf/bbl</td></tr> 
 
        <tr><td>Oil Gravity </td><td><input type="number" step="any" name="inOG"></td><td>API</td></tr> 
 
        <tr><td>Gas Gravity </td><td><input type="number" step="any" name="inGG"></td><td>gr/cc</td></tr> 
 
        <tr><td>Water Salinity </td><td><input type="number" step="any" name="inWS"></td><td>ppm</td></tr> 
 
        <tr><td>Temperature </td><td><input type="number" step="any" name="inT"></td><td>◦F</td></tr> 
 
        <tr><td>Pressure </td><td><input type="number" step="any" name="inP"></td><td>Psia</td></tr> 
 
        <tr><td>Nitrogen Content </td><td><input type="number" step="any" name="inNC"></td><td>%mol</td></tr> 
 
       </table> 
 
       <br> 
 
       <table> 
 
        <tr><td>Correlation</td><td></td></tr> 
 
        <tr> 
 
         <td>Bubble Point Pressure(Pb) </td> 
 
         <td> 
 
          <select name="cor1"> 
 
           <option value="none"></option> 
 
           <option value="VB">Vasquez and beggs</option> 
 
           <option value="AM">Al-Marhoun</option> 
 
           <option value="G">Glaso</option> 
 
           <option value="PF">Petrosky and Farshad</option> 
 
           <option value="S">Standing</option> 
 
          </select> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Solution GOR(Rs)</td> 
 
         <td> 
 
          <select name="cor2"> 
 
           <option value=" "></option> 
 
           <option value="VB">Vasquez and beggs</option> 
 
           <option value="AM">Al-Marhoun</option> 
 
           <option value="G">Glaso</option> 
 
           <option value="PF">Petrosky and Farshad</option> 
 
           <option value="S">Standing</option> 
 
          </select> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Oil Formation Volume Factor(Bo) </td> 
 
         <td> 
 
          <select name="cor3"> 
 
           <option value=" "></option> 
 
           <option value="VB">Vasquez and beggs</option> 
 
           <option value="AM">Al-Marhoun</option> 
 
           <option value="G">Glaso</option> 
 
           <option value="PF">Petrosky and Farshad</option> 
 
           <option value="S">Standing</option> 
 
          </select> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td>Viscosity(µo) </td> 
 
         <td> 
 
          <select name="cor4"> 
 
           <option value=" "></option> 
 
           <option value="CC">Chew Connally</option> 
 
           <option value="BR">Beggs Robinson</option> 
 
          </select> 
 
         </td> 
 
         <td><input type="submit" value="Calculate"></td> 
 
        </tr> 
 
       </table> 
 
       <br> 
 
       <table > 
 
        <tr><td>Result</td><td></td></tr> 
 
        <tr><td>Pb</td><td>{{outpb}}</td></tr> 
 
        <tr><td>Rs(Solution GOR)</td><td></td></tr> 
 
        <tr><td>Corrected Pb(Nitrogen Effect)</td><td></td></tr> 
 
        <tr><td>Bo</td><td></td></tr> 
 
        <tr><td>Co</td><td></td></tr> 
 
        <tr><td>µo</td><td></td></tr> 
 
       </table> 
 
       <!-- 
 
       <table> 
 
        <tr><td>Enter Length (cm) : {{l}}</td><td><input type="number" step="any" name="l"></td></tr> 
 
        <tr><td>Enter Width (cm) : {{w}}</td><td><input type="number" step="any" name="w"></td></tr> 
 
        <tr><td>Enter Height (cm) : {{h}}</td><td><input type="number" step="any" name="h"></td></tr> 
 
        <tr><td><input type="submit" value="Calculate"></td></tr> 
 
       </table> 
 

 
      
 
       <br/> 
 

 
      </form> 
 

 
     </div> 
 

 
     <footer class="footer"> 
 
      <p>Copyright © Invigour Energy 2016</p> 
 
     </footer> 
 

 
    </div> 
 
</body> 
 

 

 
</html>

来源

2017-06-06 iyzad

没有jQuery的，没有阿贾克斯。但显然你需要一些JS。

<input id="number" type="number" value="num"> 
<input id="submit" type="submit" value="submit"> 

document.getElementById("submit").addEventListener("click", function(){ 
    var val = document.getElementById("number").value 
    sessionStorage.setItem("number", val); 
}); 

window.onload = function() { 
    var session_value = sessionStorage.getItem("number") || 0; 
    document.getElementById("number").value = session_value; 
}

如果你提供一些线索，你怎么使用Python（DB互动，模板等），另一种解决方案可以考虑。点击后

sessionStorage

来源

2017-06-06 08:14:39 marmeladze

见编辑:)后上面 – iyzad

的<input type="submit">将达到你的<form>的action属性，或将刷新页面，如果action是空的。
您可以使用<button>元素，并为其分配一个function上click事件，例如：

<!-- There is no form needed if you don't need to submit --> 
<div id="form"> 
    <input type="number" id="myNumber"> 
    <input type="number" id="myOtherNumber"> 
    <button type="button" id="submit">Calculation</button> 
</div>

JS部分：

window.onload = function() { 
    /* get elements */ 
    var num_1 = document.getElementById('myNumber'), 
     num_2 = document.getElementById('myOtherNumber'), 
     btn = document.getElementById('submit'); 

    /* do what you want with your number 
     when the button is clicked */ 
    btn.onclick = function() { 
     window.console.log(num_1.value + num_2.value); 
    }; 
};

来源

2017-06-06 08:15:30 AymDev

但是，如何连接JS和python脚本之间？到目前为止，我还没有能够做到这一点，因为它就像按钮甚至不连接与JS – iyzad

@iyzad不幸的是，我不知道Python（我想），并不知道如何获得形式值...我只能说JavaScript是Front-End，并且可以在不刷新的情况下在页面上执行操作。不确定Python是否也是如此。 – AymDev

保持用户输入后按输入type =“提交”，而不使用jQuery或Ajax

回答

相关问题