如何在用户点击发送按钮后自动清空HTML表单内容

实现方案 #

你不需要单独创建JavaScript文件，直接在现有HTML基础上修改即可，总共只需要调整两处：

1. 新增<form>标签包裹所有输入框、下拉选择框、提交按钮等表单元素，给表单设置id方便调用
2. 给提交按钮添加点击事件，触发表单重置逻辑

另外你现有代码中meta标签的viewpoint是拼写错误，正确应为viewport，下面是修改后的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Order Now</title>
        <link rel="stylesheet" type="text/css" href="styleo.css">
    </head>
    <body>
        <div class="container">
            <h2>Order Now</h2>
            <!-- 新增form标签包裹所有表单元素 -->
            <form id="orderForm">
                <div class="row100">
                    <div class="col">
                        <div class="inputBox">
                        <input type="text" name="" required="required">
                        <span class="text">Discord Name And Discrimator</span>
                        <span class="line"></span>
                    </div>
                </div>
                   <div class="col">
                        <div class="inputBox">
                        <input type="text" name="" required="required">
                        <span class="text">Email Address</span>
                        <span class="line"></span>
                    </div>
                    </div>
                    </div>
                    <div class="row100">
                    <div class="col">
                        <div class="inputBox">
                        <input type="text" name="" required="required">
                        <span class="text">Email</span>
                        <span class="line"></span>
                    </div>
                    </div>
                    <div class="col">
                        <div class="inputBox">
                              <div class="select">
                              <select name="format" id="format">
                              <option selected disabled>Choose Your Package</option>
                             <option value="basic">Basic Bot</option>
                             <option value="advanced">Advanced Bot</option>
                             <option value="premuim">Premuim Bot</option>
                             <option value="Website">Website</option>
                       </select>
                       <span class="line"></span>
                     </div>
                    </div>
                    </div>
                    </div>
                    <div class="row100">
                        <div class="col">
                            <div class="inputBox textarea">
                            <textarea required="required"></textarea>
                            <span class="text">Type Your Message Here...</span>
                            <span class="line"></span>
                            </div>
                        </div>
                    </div>
            <div class="row100">
                <div class="col">
                    <!-- 给提交按钮添加onclick事件 -->
                    <input type="submit" value="Send" onclick="document.getElementById('orderForm').reset()">
               </div>
            </div>
            </form>
        </div>     
    </body>
</html>

如果你后续需要先提交表单数据到后端再清空内容，可以把重置逻辑放到表单提交成功的回调中，避免数据还没提交就被清空的问题。

内容的提问来源于stack exchange，提问作者JayDev