如何启动使用javascript或jquery的帖子，当我点击一个按钮

How to lanuch a post using javascript or jquery when I click a button?

本文关键字：一个 按钮 启动 何启动 javascript jquery      更新时间：2023-09-26

在代码B中，当我点击提交按钮时，所有选中的复选框项将被发布到服务器端，服务器端将处理所有选中的复选框项并重新创建网页以返回客户端。

我希望在代码A中做同样的事情，更希望客户端在我点击btnDelete按钮时可以在发布前显示Delete提示信息。

我如何写代码张贴所有选中的复选框项目到服务器端使用javascript或jquery ?

代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>  
    <script type="text/javascript">
     function DeleteFile() {
        if (confirm("Do you want to delete selected images?")) {  
           ...
        }        
     } 
    </script>
</head>
<body>
   <div id="container">
       <form action='' method='post' enctype='multipart/form-data' id="myform">
           <input id="a1" name="subBox1" type="checkbox"  value="'SD'1.jpg"/>1.jpg <br/>
           <input id="a2" name="subBox2" type="checkbox"  value="'SD'2.jpg"/>2.jpg <br/>
           <input id="a3" name="subBox3" type="checkbox"  value="'SD'3.jpg"/>3.jpg <br/>
           <input id="a4" name="subBox4" type="checkbox"  value="'SD'4.jpg"/>4.jpg <br/> 
       </form>
       <input type="button" name="btnDelete" value="Delete Selected Images" onclick="DeleteFile()" />
    </div>
</body>
</html>

代码B 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
   <div id="container">
       <form action='' method='post' enctype='multipart/form-data' id="myform">
           <input id="a1" name="subBox1" type="checkbox"  value="'SD'1.jpg"/>1.jpg <br/>
           <input id="a2" name="subBox2" type="checkbox"  value="'SD'2.jpg"/>2.jpg <br/>
           <input id="a3" name="subBox3" type="checkbox"  value="'SD'3.jpg"/>3.jpg <br/>
           <input id="a4" name="subBox4" type="checkbox"  value="'SD'4.jpg"/>4.jpg <br/>      
           <input type='submit' name='submit' value='Delete Selected Images'/>
       </form>
    </div>
</body>
</html>

可以为submit事件添加一个事件监听器，当confirm()返回false时调用event.preventDefault()方法

JavaScript 

document.querySelector('#myform').addEventListener('submit', event => {
  if (!confirm('Do you want to delete selected images?')) {
    event.preventDefault();
  }
});

HTML 

<div id="container">
  <form action='' method='post' enctype='multipart/form-data' id="myform">
    <input id="a1" name="subBox1" type="checkbox"  value="'SD'1.jpg"/>1.jpg <br/>
    <input id="a2" name="subBox2" type="checkbox"  value="'SD'2.jpg"/>2.jpg <br/>
    <input id="a3" name="subBox3" type="checkbox"  value="'SD'3.jpg"/>3.jpg <br/>
    <input id="a4" name="subBox4" type="checkbox"  value="'SD'4.jpg"/>4.jpg <br/>
    <input type="submit" name="btnDelete" value="Delete Selected Images" />
   </form>
</div>

JS提琴演示

相关文章：