HTML + Javascript вопрос отправки формы

Question

Я создал форму html + javascript, которая отображает набор изображений вместе с кнопкой отправки. Пользователь может выбрать интересующие его изображения, и когда пользователь щелкает изображение, я изменяю границу изображения, чтобы указать выбор изображения.

И когда пользователь нажимает кнопку отправки, я бы хотел, чтобы мой серверный скрипт получал изображения, связанные с выбранными изображениями, для дальнейшей обработки.

Я новичок в JS. Я хотел бы знать, как лучше всего это сделать. Нужен ли мне глобальный массив javascript, который заполняется выбранными URI-адресами изображений? И этот массив может быть представлен как часть HTTP POST?

Любые советы / указатели будут полезны.

Answer 1

Если бы я был на вашем месте, я бы позаботился о том, чтобы он работал и без JavaScript Э.Г.

<form action="" method="POST">
    <label for="image_1">
        <img src="image_1_uri" alt="Image 1" />
        <input type="checkbox" name="images" id="image_1" value="image_1_uri" />
    </label>

    <label for="image_2">
        <img src="image_2_uri" alt="Image 2" />
        <input type="checkbox" name="images" id="image_2" value="image_2_uri" />
    </label>

    <input type="submit" />
</form>

Затем настройте свой JavaScript с добавлением границ для работы при нажатии на ярлык, а не на изображение.

Скройте флажки с помощью CSS, если вы не заинтересованы в их наличии. (Для этого нужно добавить класс к флажкам в старых версиях Internet Explorer.)

Answer 2

Попробуйте это:

 //...let's suppose this is the image you change the border of on click..
 <img src="whatever" onclick="createHidden(this);" />

<script type="text/javascript">
  function createHidden(field)
  {
    var hdn = document.createElement("input");
    hdn.setAttribute('type', 'hidden');
    hdn.setAttribute('name', 'hdn[]');
    hdn.setAttribute('value', field.src); // populate images src now

    var frm = document.getElementsByTagName("form")[0];
    frm.appendChild(hdn);
  }
</script>

Теперь вы можете получить доступ к путям изображений в массиве hdn в вашем серверном скрипте.