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 массиве в вашем серверном скрипте.