点击 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">

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

        <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">

    </div>

</form>

<script>

function submitForm() {

    document.getElementById("form").submit();

}

</script>

Answer 2

使用method="post"get是获取数据而不是发送数据。

我相信这会起作用

Answer 3

只需将form方法更改为POST即可。

<form method="POST" 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>