添加多个提交按钮

我试图创建一个窗体，其中显示不同的图像取决于通过下拉选择的项目，我已经完成了这个，但现在需要将每个图像链接到它的产品页面（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

添加多个提交按钮

回答

相关问题