表单提交后通过URL发送参数答案

【问题标题】：Send parameters through the URL after form submission表单提交后通过URL发送参数
【发布时间】：2021-01-27 17:50:22
【问题描述】：

我有一个简单的产品选择表单，用户可以在其中选择要购买的产品数量。根据他的选择，我需要在他的选择中附加 URL。如果他选择 Product1 和 Product2，则提交按钮应使用以下参数将这两个产品添加到购物车https://example.com?add-to-cart=10,20

这是我的表单示例

<form action="/action_page.php">
  <input type="checkbox" id="10" name="vehicle1" value="Bike">
  <label for="vehicle1"> Product 1</label><br>
  <input type="checkbox" id="20" name="vehicle2" value="Car">
  <label for="vehicle2"> Product 2</label><br>
  <input type="checkbox" id="30" name="vehicle3" value="Boat">
  <label for="vehicle3"> Product 3</label><br><br>
  <input type="submit" value="Submit">
</form>

我怎样才能做到这一点？

找到类似 here 的东西，但不知道如何根据我的示例进行修改。

【问题讨论】：

标签： html jquery woocommerce

【解决方案1】：

这将重定向到 example.com?add-to-cart=10,20

<script>
    $('form').on('submit', function(e){
          e.preventDefault(); 
        
          let params = ''    
          const redirect_url = 'axample.com?add-to-cart'            
          let count = $('input[name^="vehicle"]:checked').length
          
          $('input[name^="vehicle"]:checked').each(function(index) {
                
                    params += $(this).attr('id')
                    
                    if(index !== count - 1) {
                        params += ','
                    } 
                
          });

        // Amend redirect url in form by adding fields from form
        window.location.href = redirect_url + '=' + params         
    });
<script>

【讨论】：