2010-02-10 90 views
1

我已經創作了一個html + javascript表單,其中顯示了一組圖像以及一個提交按鈕。用戶可以選擇他或她感興趣的圖像,並且當用戶點擊圖像時,我改變圖像邊界以指示圖像選擇。HTML + Javascript表單提交問題

當用戶點擊提交按鈕時,我希望我的服務器端腳本能夠接收與所選圖像關聯的圖像以進一步處理。

我是JS新手。我想知道如何最好地做到這一點。我是否需要一個全局JavaScript數組,並使用選定的圖像URI進行填充?然後這個數組可以作爲HTTP POST的一部分提交?

任何提示/指針都會有所幫助。

回答

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中執行此操作。)

+0

謝謝你們。這很有幫助:-) – user270027 2010-02-11 18:03:31

1

試試這個:

//...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陣列中的圖像的路徑。

+0

如果我錯了,請糾正我,但是不應該通過Form元素的一部分新創建字段?現在它是正文的一部分(在調用submit時沒有提交) – Edelcom 2010-02-10 07:05:59

+0

@Edelcom:你說得對,我很想知道這件事,但是當我回答這個問題的時候忘了寫下它,謝謝你的支持:) – Sarfraz 2010-02-10 07:41:08

+0

我想你需要用var hdn = document.createElement('input');然後hdn.setAttribute('類型','隱藏'),並從那裏繼續... – KenB 2011-02-25 20:11:59