Question

我有一个简单的python脚本和html代码，它们正在本地主机上执行。该代码显示一个简单的表格，允许用户填写其个人信息并提交。提交后，jquery脚本将输出用户提交的所有内容。这部分代码有效。但是，输出后，表格立即复位，输出消失。在用户手动更改表单字段并重新提交之前，如何使所有内容保持不变？

Python脚本（app.py）

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def main():
    return render_template('index.html')

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

HTML代码（index.html）

.container{
  width: 500px;
  clear: both;
  margin-right: auto;
  margin-left: auto;
}
.container input{
  width: 100%;
  clear: both;
}
html, body {
  margin: 0;
  height: 100%;
} 
br {
  margin:1.25em 0;/* Firefox */
  line-height:2.5em;/* chrome  */
}

</style>

<html>
 <header>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </header>
  <body>
    <h1><center>Gettin' acquainted to docker</center></h1>
    <div class="container">
      <form>
      Salutation<input type="text" id="salutation" required><br>
      First Name<input type="text" id="firstname" required><br>
      Last Name<input type="text" id="lastname" required><br>
      <input type="submit" id="register" class= "get_greeting" value="Display" disabled="disabled" />     
      <div class="results"></div>
      </form>
    </div>
  </body>
 <script>

     (function() {
        $('form > input').keyup(function() {

            var empty = false;
            $('form > input').each(function() {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            if (empty) {
                $('#register').attr('disabled', 'disabled');
            } else {
                $('#register').removeAttr('disabled');
            }
        });
    })()

   $(document).ready(function(){
     $('.container').on('click', '.get_greeting', function(){
       $('.results').html('<p>Hi, '+$('#salutation').val()+' '+$('#firstname').val()+' '+$('#lastname').val()+'. I am learning how to implement containers...</p>')
     });
   });
 </script>
</html>

Answer 1

要阻止提交表单，您需要在.preventDefault()事件上使用submit：

 $('form').on('submit', e => {e.preventDefault()})

如果您只想在单击按钮时阻止提交表单，则应避免默认单击按钮：

 $('button','form').on('click tap', e => {e.preventDefault()});

可以随意更改选择器，以仅防止将默认操作（单击button内的任何form时提交表单）不希望提交给按钮表格。

Answer 2

点击处理程序接受一个事件。该事件正在冒泡，默认情况下将提交表单。在处理程序中执行event.preventDefault()，以防止此行为。

$(document).ready(function(){
  $('.container').on('click', '.get_greeting', function(event){
    event.preventDefault()
    $('.results').html('<p>Hi, '+$('#salutation').val()
    +' '+$('#firstname').val()+' '+$('#lastname').val()
    +'. I am learning how to implement containers...</p>')
  });
});

这样，将不再提交表单。您的处理程序现在应该使用ajax提交表单。请参阅有关jquery post的文档以使其运行。

提交表单后，HTML页面不断重置

2 个答案: