时间戳

首页 > 解决方案 > 我如何制作一个输入类型的提交按钮，填写表格后才能使用

javascript - 我如何制作一个输入类型的提交按钮，填写表格后才能使用

问题描述

我在网站上制作了一个表格，但是当我点击提交按钮而不填写表格时。我要去那里。我想在我填完表格的时候，然后我会去那里。使用输入，键入提交按钮。我的代码是：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Form</title>
    </head>
    
    <body>
        <input placeholder="First Name" type="text"> <br>
        <input placeholder="Last Name" type="text"> <br>
        <input placeholder="Email Adrress" type="text"> <br>
        <input placeholder="Password" type="password"> <br>
        <input placeholder="Confirm Password" type="password"> <br>
        <input style="cursor: pointer;" name="Gender" type="radio">Male <input style="cursor: pointer;" name="Gender" type="radio">Female <br> Birthday
        <select style="cursor: pointer;">
            <option>Select Date</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
        </select> <br>
    
        <a href="file:///C:/Users/Guest/Desktop/Html/Website/Home.html"><input type="submit"></a>
    </body>
    
    </html>

标签： javascriptpythonhtmlcsshtml5-canvas

解决方案

首先，您必须在后台检查表单验证，这将对您有所帮助（https://www.sitepoint.com/instant-validation/）

然后，您必须将提交按钮放在 div 中并为 div 提供选择器并在 javascript 中检查您的表单是否无效，然后将该 div 显示为“无”，但如果您的表单有效，则将该显示为“堵塞”

这段代码会让你：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
</head>

<body>
    <input placeholder="First Name" type="text"> <br>
    <input placeholder="Last Name" type="text"> <br>
    <input placeholder="Email Adrress" type="text"> <br>
    <input placeholder="Password" type="password"> <br>
    <input placeholder="Confirm Password" type="password"> <br>
    <input style="cursor: pointer;" name="Gender" type="radio">Male <input style="cursor: pointer;" name="Gender" type="radio">Female <br> Birthday
    <select style="cursor: pointer;">
        <option>Select Date</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
    </select> <br>
    <div id="submit">
     <a href="file:///C:/Users/Guest/Desktop/Html/Website/Home.html"><input type="submit"></a>
 </div>
</body>

<script>
    document.getElementById('submit').style.display = "none";

    //Check formIsValid or not in background
    //if your form is valid then only the submit button will appear
    
    if(formIsValid){
        document.getElementById('submit').style.display = "block";
    }
</script>
</html>

推荐阅读