添加多個提交按鈕

我試圖創建一個窗體，其中顯示不同的圖像取決於通過下拉選擇的項目，我已經完成了這個，但現在需要將每個圖像鏈接到它的產品頁面（html），但不知道如何？添加多個提交按鈕

<center> 
<form name="mygallery"><p> 
<select name="picture" size="1" onChange="showimage()"> 
<option selected value="images/products_lights/chandler_blue.jpg">Gem Light Blue</option> 
<option value="images/products_lights/chandler_pink.jpg">Gem Light Pink</option> 
<option value="images/products_lights/gem_white.jpg">Gem Light White</option> 
<option value="images/products_lights/chandler_pink2.jpg">Chandelier Pink</option> 
<option value="images/products_lights/chandler_white.jpg">Chandelier White</option> 
<option value="images/products_lights/pod_black.jpg">Pod Light Black</option> 
<option value="images/products_lights/pod_blue.jpg">Pod Light Blue</option> 
<option value="images/products_lights/pod_gold.jpg">Pod Light Gold</option> 
<option value="images/products_lights/pod_green.jpg">Pod Light Green</option> 
<option value="images/products_lights/pod_red.jpg">Pod Light Red</option> 
<option value="images/products_lights/pod_silver.jpg">Pod Light Silver</option> 
<option value="images/products_lights/shade_black.jpg">Shade Black</option> 
<option value="images/products_lights/shade_blue.jpg">Shade Blue</option> 
</select> 
</p> 
</form> 
</center> 


<p align="center"><img src="images/products_lights/chandler_blue.jpg" name="pictures" width="90%" height="90%">

我想可能的加一個提交按鈕卻又不知道如何去改變它指向的網址是什麼？...

來源

2016-03-08 user3607744

''showimage功能的附加代碼 –

您可以使用JavaScript重定向根據選擇的時候做出選擇，因此你不需要按鈕。既然你標記的jQuery，這應該給你一個開始：

$('select').on('change',function() { 
    window.location = 'http://example.com/' + $(this).val(); 
});

來源

2016-03-08 10:32:39 Nicarus

的URL是通過<form>標籤的action屬性指定。但是您也可以使用formaction屬性在提交按鈕代碼中指定網址。無法真正幫助更多，因爲我不知道你的腳本看起來如何。

但這裏是一個片段，它可以幫助你：

function showimage() { 
 
    var selection = document.getElementById("picture").value; 
 
    var url = selection.split("/"); 
 
    document.getElementById("pictures").src = selection; 
 
    document.getElementById("send").formAction = "http://www.example.com/" + url[url.length - 1]; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <center> 
 
    <form name="mygallery"> 
 
     <select name="picture" id="picture" size="1" onChange="showimage()"> 
 
     <option selected value="images/products_lights/chandler_blue.jpg">Gem Light Blue</option> 
 
     <option value="images/products_lights/chandler_pink.jpg">Gem Light Pink</option> 
 
     <option value="images/products_lights/gem_white.jpg">Gem Light White</option> 
 
     <option value="images/products_lights/chandler_pink2.jpg">Chandelier Pink</option> 
 
     <option value="images/products_lights/chandler_white.jpg">Chandelier White</option> 
 
     <option value="images/products_lights/pod_black.jpg">Pod Light Black</option> 
 
     <option value="images/products_lights/pod_blue.jpg">Pod Light Blue</option> 
 
     <option value="images/products_lights/pod_gold.jpg">Pod Light Gold</option> 
 
     <option value="images/products_lights/pod_green.jpg">Pod Light Green</option> 
 
     <option value="images/products_lights/pod_red.jpg">Pod Light Red</option> 
 
     <option value="images/products_lights/pod_silver.jpg">Pod Light Silver</option> 
 
     <option value="images/products_lights/shade_black.jpg">Shade Black</option> 
 
     <option value="images/products_lights/shade_blue.jpg">Shade Blue</option> 
 
     </select> 
 
     <input type="submit" id="send" /> 
 
    </form> 
 
    </center> 
 
    <p align="center"> 
 
    <img src="images/products_lights/chandler_blue.jpg" name="pictures" id="pictures" width="90%" height="90%"> 
 
    </p> 
 
    <script> 
 
    showimage() 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-03-08 10:34:42

你可以通過<option value="imageurl##producturl">Gem Light Blue</option> 然後在showimage(combinedurl)那麼可以拆分var split_image_product_url = combinedurl.split('##');，然後很容易地使用split_image_product_url[0]圖像URL和split_image_product_url[1]爲產品頁面URL。

注意這只是一個想法，可以有多種方式來實現相同的使用隱藏字段值等。

來源

2016-03-08 10:36:56 Ankit

爲每個包含產品URL的選項添加屬性data-url，查看該代碼示例。

function changeProduct(selectNode){ 
 
    $option_selected = $(selectNode).find(':selected'); 
 
    $prod_link = $('#product'); 
 
    $prod_link.attr('href', $option_selected.attr('data-url')); 
 
    $prod_link.find('img').attr('src', $option_selected.val()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select onchange="changeProduct(this)"> 
 
    <option value="" disabled selected>Select a product</option> 
 
    <option value="http://images.all-free-download.com/images/wallpapers_large/tree_of_light_wallpaper_landscape_nature_wallpaper_1210.jpg" data-url="www.google.com">Product 1</option> 
 
    <option value="http://blog-imgs-52.fc2.com/l/a/n/landscape928/Landscape-Wallpapers.jpg" data-url="www.stackoverflow.com">Product 2</option> 
 
</select><br><br> 
 

 
<a href="about:blank" id="product"><img src="http://frankfortecig.com/wp-content/uploads/2014/07/placeholder-Copy-2.gif" alt="product" ></a>

來源

2016-03-08 10:54:26

添加多個提交按鈕

回答

相關問題