时间戳

首页 > 解决方案 > 不同的复选框选项重定向到表单提交上的新链接

javascript - 不同的复选框选项重定向到表单提交上的新链接

问题描述

我正在重新发布这个问题。您可以通过以下链接查看相关部分： https ://habitat-df.webflow.io/site-web/nos-realisations#listings 我正在使用一个名为 webflow 的 CMS。

问题： 当用户选择选项并单击提交时，我创建了 4 个不同的页面。提交按钮的 ID 为“button-submit”

复选框的不同名称属性：

这是我拥有的 Jquery 代码：

jQuery(document).ready(function(){
    jQuery('#button-submit').click(function(){
         var checkValue = jQuery('input:checkbox:checked').val();

         if ((checkValue == 'sale') && (checkValue == 'past')){
              window.location.href = 'page1.com';
         }
         if ((checkValue == 'sale') && (checkValue == 'recent')) {
              window.location.href = 'page2.com';
         }
         if ((checkValue == 'rent') && (checkValue == 'past')){
              window.location.href = 'page3.com';
         }
         if ((checkValue == 'rent') && (checkValue == 'recent')){
              window.location.href = 'page4.com';
         }
    })
});

这是表单的 HTML 部分：

    <div class="w-form">
      <form id="wf-form-Choice-form" name="wf-form-Choice-form" data-name="Choice form" method="post">
        <h2 class="h2-big titreprojet"><strong>Découvrez NoTRE PORTFOLIO</strong><br></h2>
        <div class="lineprojet"></div>
        <div class="description">Notre caractère distinctif, c’est d’avoir réalisé des projets de qualité, tout en procurant une expérience unique à nos clients. <br></div>
        <div class="w-row">
          <div class="column-16 w-col w-col-6">
            <div class="smalltext">Type de projet</div><label class="w-checkbox fieldlocation"><input type="checkbox" id="rent" name="rent" data-name="rent" class="w-checkbox-input"><span for="rent" class="textcheck w-form-label">Projet en location</span></label><label class="w-checkbox fieldsale"><input type="checkbox" id="sale" name="sale" data-name="sale" class="w-checkbox-input"><span for="sale" class="textcheck w-form-label">Projet en vente</span></label></div>
          <div class="w-col w-col-6">
            <div class="smalltext">DATE DU PROJET</div><label class="w-checkbox fieldactuel"><input type="checkbox" id="recent" name="recent" data-name="recent" class="w-checkbox-input"><span for="recent" class="textcheck w-form-label">Projet actuel</span></label><label class="w-checkbox fieldpast"><input type="checkbox" id="past" name="past" data-name="past" class="w-checkbox-input"><span for="past" class="textcheck w-form-label">Projet passé</span></label></div>
        </div><input type="submit" value="Submit" data-wait="Please wait..." id="button-submit" class="button-submit w-button"></form>
      <div class="w-form-done">
        <div>Thank you! Your submission has been received!</div>
      </div>
      <div class="w-form-fail">
        <div>Oops! Something went wrong while submitting the form.</div>
      </div>
    </div>

HTML 看起来很乱，因为我是从 webflow 中导出它的，webflow 为导出的所有内容提供了自定义值。当我测试我的自定义代码时，没有任何效果，也没有错误。

我究竟做错了什么？

标签： javascriptjquery

解决方案

你快到了，但有一些小错误。

         var checkValue = jQuery('input:checkbox:checked').val();

只会给你一个输出。因此，您的所有 if 条件都将失败，因为您假设它可以包含两个值。

因此，创建另一个变量来保存日期的值（最近或过去）和一个用于持有的变量（销售或租金）。

此外，最好将按钮类型更改为提交，以便它实际提交表单并将其输入到某个页面。否则，您实际上并没有使用此表格。我建议您在这种情况下删除表单，因为它不需要。

还可以使用jQuery 选择器，它们会让你的生活更轻松，例如为元素分配类名或 id 并通过$('#id')or$('.classname')或获取它们$('tagname')。（$ 是 JQuery 的简写）

我有点着急，所以很抱歉，如果我不能给你一个完整的答案，但至少你知道去哪里。:)

干杯。

推荐阅读