提交按钮无法以简单的 html 形式工作 - Flask 服务器

问题描述 投票：0回答：3

我的 HTML/CSS/JS 提交按钮不起作用。 这里我附上了 HTML 代码 但是，我在邮递员中测试了我的 Flask 服务器，但在简单的 HTML 表单中，提交按钮不起作用！ 这是我在 HTML 或 JS 中遗漏的东西吗？ 请帮我解决这个问题。

<!DOCTYPE html>
    <html>
    <head>
        <title>Banglore Home Price Prediction</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="app.js"></script>
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
    <div class="img"></div>
    <form class="form">
        <h2>Area (Square Feet)</h2>
        <input class="area"  type="text" id="uiSqft" class="floatLabel" name="Squareft" value="1000">
        <h2>BHK</h2>
        <div class="switch-field">
            <input type="radio" id="radio-bhk-1" name="uiBHK" value="1"/>
            <label for="radio-bhk-1">1</label>
            <input type="radio" id="radio-bhk-2" name="uiBHK" value="2" checked/>
            <label for="radio-bhk-2">2</label>
            <input type="radio" id="radio-bhk-3" name="uiBHK" value="3"/>
            <label for="radio-bhk-3">3</label>
            <input type="radio" id="radio-bhk-4" name="uiBHK" value="4"/>
            <label for="radio-bhk-4">4</label>
            <input type="radio" id="radio-bhk-5" name="uiBHK" value="5"/>
            <label for="radio-bhk-5">5</label>
        </div>
    </form>
    <form class="form">
        <h2>Bath</h2>
        <div class="switch-field">
            <input type="radio" id="radio-bath-1" name="uiBathrooms" value="1"/>
            <label for="radio-bath-1">1</label>
            <input type="radio" id="radio-bath-2" name="uiBathrooms" value="2" checked/>
            <label for="radio-bath-2">2</label>
            <input type="radio" id="radio-bath-3" name="uiBathrooms" value="3"/>
            <label for="radio-bath-3">3</label>
            <input type="radio" id="radio-bath-4" name="uiBathrooms" value="4"/>
            <label for="radio-bath-4">4</label>
            <input type="radio" id="radio-bath-5" name="uiBathrooms" value="5"/>
            <label for="radio-bath-5">5</label>
        </div>
            <h2>Location</h2>
        <div>
      <select class="location" name="" id="uiLocations">
        <option value="" disabled="disabled" selected="selected">Choose a Location</option>
            <option>Electronic City</option>
            <option>Rajaji Nagar</option>
      </select>
    </div>
        <button class="submit" onclick="onClickedEstimatePrice()" type="button">Estimate Price</button>
        <div 
            id="uiEstimatedPrice" class="result">   <h2></h2> 
        </div>
    </body>
    </html>

javascript python html flask postman
3个回答
0
投票

您需要向表单标签添加操作和方法，例如：

<form class="form" method="get" action="/your_url/">
....
</form>

0
投票

如果您想要默认处理表单提交，则需要添加 

method
（检查您的邮递员调用以查看该方法）和 
action
（用于在邮递员中测试调用的 URL）属性您的表单，以及将按钮类型更改为 
submit
而不是 
button
。

但是既然您将 

onclick
处理程序传递给了按钮，我假设您想要执行自定义提交处理程序。最好的选择是在表单中添加一个 
onsubmit
处理程序并在那里执行逻辑。这里不需要 
method
和 
action
。

<form class="form" onsubmit="onFormSubmit(event)">
...
function onFormSubmit(event) {
    event.preventDefault(); // disable default behavior of submitting
    // access form element values
    // replace elementName with the actual value of the "name" attribute
    // remember to assign unique names to the elements
    console.log(event.target.elements.[elementName].value);
}
0
投票

在表单和 app.py 文件中使用 action ="/app_route_name" 创建具有相同名称的应用程序路由并呈现所需的模板。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.