点击 html 提交图片上的表单

Question

我试图在单击幻灯片图像时基本上提交我的表单。我创建了一个表单，并使用 来输入值type="image"，但今天意识到某些浏览器不处理来自 的值输入<input type="image">。最好的方法是什么？

<form method="GET" action="/filtered">

      <div class="slider-wrapper"><!-- innermost wrapper element -->            

        <input class="slide" type="image" style="width: 100%; height: 60vh;" name="category" value="Car Cleaning Products" alt="Car Cleaning Products" src="../public/css/img/car-cleaning-slideshow.JPG">

        <input class="slide" type="image" style="width: 100%; height: 60vh;" name="category" value="Car Cleaning Products" alt="Car Cleaning Products" src="../public/css/img/jan-supplies-slideshow.JPG">

        <input class="slide" type="image" style="width: 100%; height: 60vh;" name="category" value="Car Cleaning Products" alt="Car Cleaning Products" src="../public/css/img/paper-products-slideshow.JPG">

      </div>

      </form>

Answer 1

如果您确实希望将请求方法保留为 GET，则可以将 an 应用于id您的form标签；然后将 an 添加onclick="submitForm()"到您的input标签（这也适用于img标签或任何标签）。然后我们将用一些简单的 JavaScript 代码定义我们的函数。希望我有帮助！<form id="form" method="GET" action="/filtered">&nbsp; &nbsp; <div class="slider-wrapper"><!-- innermost wrapper element -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input onclick="submitForm()" class="slide" type="image" style="width: 100%; height: 60vh;" name="category" value="Car Cleaning Products" alt="Car Cleaning Products" src="../public/css/img/paper-products-slideshow.JPG">&nbsp; &nbsp; </div></form><script>function submitForm() {&nbsp; &nbsp; document.getElementById("form").submit();}</script>

Answer 2

使用method="post"get是获取数据而不是发送数据。我相信这会起作用

Answer 3

只需将form方法更改为POST即可。<form method="POST" action="/filtered">&nbsp; <div class="slider-wrapper">&nbsp; &nbsp; <!-- innermost wrapper element -->&nbsp; &nbsp; <input class="slide" type="image" style="width: 100%; height: 60vh;" name="category" value="Car Cleaning Products" alt="Car Cleaning Products" src="../public/css/img/car-cleaning-slideshow.JPG">&nbsp; &nbsp; <input class="slide" type="image" style="width: 100%; height: 60vh;" name="category" value="Car Cleaning Products" alt="Car Cleaning Products" src="../public/css/img/jan-supplies-slideshow.JPG">&nbsp; &nbsp; <input class="slide" type="image" style="width: 100%; height: 60vh;" name="category" value="Car Cleaning Products" alt="Car Cleaning Products" src="../public/css/img/paper-products-slideshow.JPG">&nbsp; </div></form>