отправить форму на изображении нажмите html

#javascript #html #slideshow

#javascript #HTML #слайд-шоу

Вопрос:

Я пытаюсь в основном отправить свою форму при нажатии на изображение слайд-шоу. Я создал форму и ввел значения с 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>

Ответ №1:

Использовать method="post" get для извлечения данных, а не для отправки данных.

Я считаю, что это сработает

Ответ №2:

Если вы действительно хотите сохранить свой метод запроса как 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>

1. Я сделал это точно, и, к сожалению, до сих пор не работал. Мне действительно понравился этот метод, хотя, потому что то, как я писал внутренний код, я не мог отправить форму как сообщение.

2. Возможно, попробуйте удалить историю / кэш вашего браузера или использовать вкладку инкогнито. Если это не так, попробуйте использовать другой браузер. Я знаю, что этот код определенно использует правильное поведение, поэтому это звучит как локальная проблема.

3. пробовал и это, супер странно, не уверен, почему это не работает.

Ответ №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>