我的提交和清除按钮在我的表单中不起作用

Question

您好，我是编码新手，在处理项目时，我尝试制作带有提交和重置按钮的表单，但在测试表单时，它无法在计算机或移动设备上运行。感谢您观看此内容。 在此输入代码

<form id="form" action="contactform.php" method="post">
            <label for="topic">Message Topic: </label>
            <select name="topic">
  <option value="Memberships">Memberships</option>
  <option value="Careers">Careers</option>
  <option value="Other">Other</option>
</select>
<br><br>
        <label for="Name">Name: </label>
        <br>
    <input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
    <br><br>
    <label for="email">Email: </label><br>
    <input name="Email" id="email" type="email" size="25" required><br>
    <label for="phone">Phone Number: </label><br>
    <input name="Phone" id="phone" type="tel" size="12" required>
    <br><br>
    <label for="message">Enter a Message Here:</label>
    <br>
    <br><textarea name="messagebox" id="message"></textarea>
    <br><br>
   <input type="submit" id="submit" value="Submit"></button>
    <input type="reset" id="clear" value="Clear"></button> 
    <br>      
        </form>
</div>
</body>
    <script>
            $(document).ready(function(){
              $(#submit).on('click touch', function () {
                alert("You are about to SUBMIT this form. Is that ok?");
              });
            });
            </script>

Answer 1

问题在于您的语法。将其更改为：

<button type="submit" id="submit">Submit</button>
<button type="reset" id="clear">Clear</button>

或

<input type="submit" id="submit" value="submit">
<input type="reset" id="clear"  value="clear">

Answer 2

I just checked it. Seems like it works fine
Have a look at it:
  https://codepen.io/kap1l/pen/gOYjjRZ?editors=1000

谢谢，

在提交和重置类型中，您使用的是<input> 但关闭是 </button> 将两者都更改为 <input></input> 或<button></button>

Answer 3

问题是您没有在 $(#submit) 中指定单引号或双引号。 将 '#submit' 更改为表单的 id，并将 'click touch' 更改为 'submit'。

<script>
    $(document).ready(function(){
       $('#form').on('submit', function () {
          alert("You are about to SUBMIT this form. Is that ok?");
          return true;
       });
    });
</script>

Answer 4

您的代码中有几个问题

1. 删除结束标签</button>，首先因为你没有相应的开始标签，其次你不需要使用它们，因为你已经通过使用<input>元素实现了同样的效果。

2. JQuery问题，需要用双引号/单引号将id括起来

   $(#submit) 应该是 $("#submit")

这是工作代码JSFiddle

Answer 5

这样做

<button type="button" id="submit">Submit</button>
 <button type="button" id="clear">Clear</button> 

 $("#submit").on('click', function () {

而不是

<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>

$(#submit).on('click touch', function () {

Answer 6

在您的 html 中，您犯了一些错误，例如提交按钮，您从 <input> 开始并尝试使用 <button 关闭它> 所以替换为

 <input type="submit" id="submit" value="Submit"/>
 <input type="reset" id="clear" value="Clear"/> 

在脚本中使用选择器时，请将选择器放在"" 或'' 中，例如$('#submit') 使用它$(#submit)

$(document).ready(function(){
  $('#submit').on('click', function () {
       alert("You are about to SUBMIT this form. Is that ok?");
    });
 });

label{
font-size:20px;
margin-right:20px;
}

textarea
{
width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form" action="contactform.php" method="post">

<table>
<tr>
<td> <label for="topic">Message Topic: </label></td>
<td>
 <select name="topic">
     <option value="Memberships">Memberships</option>
    <option value="Careers">Careers</option>
    <option value="Other">Other</option>
   </select>

</td>
</tr>

<tr>
<td>  <label for="Name">Name: </label></td>
<td>
  <input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
    <input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
</td>
</tr>

<tr>
<td>   <label for="email">Email: </label></td>
<td>
  <input name="Email" id="email" type="email" required>
</td>
</tr>


<tr>
<td>   <label for="phone">Phone Number: </label></td>
<td>
   <input name="Phone" id="phone" type="number" required>
</td>
</tr>

<tr>
<td>  <label for="message">Enter a Message Here:</label></td>
<td>
 <textarea name="messagebox" rows=5 id="message"></textarea>
</td>
</tr>

<tr>
<td> <input type="submit" id="submit" value="Submit"/>
 <input type="reset" id="clear" value="Clear"/>   
 </td>

</tr>

</table>

   
   

</form>