表单重定向到链接

问题描述 投票:0回答:1

在我的网站上,我有一个列表页面。

它看起来像这样:

enter image description here

[左侧部分是一个表单,我希望用户根据自己的选择重定向到更新的列表页面(图片中的示例,待售项目和待售项目。)因此,基本上,用户可以做出选择,然后单击“提交”。然后,将用户重定向到相似的页面,只有该类型的项目。用户可以选择4种不同的选项:

  • 过去的待售项目
  • 正在出售并正在发生的项目
  • 过去的租金项目
  • 现在出租并正在发生的项目

这是我编写的代码:

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

         if ((radioValue == 'vente') || (radioValue == 'passe')){
              window.location.href = 'page1.com';
         }
         if ((radioValue == 'vente') || (radioValue == 'present')) {
              window.location.href = 'page2.com';
         }
         if ((radioValue == 'location') || (radioValue == 'passe')){
              window.location.href = 'page3.com';
         }
         if ((radioValue == 'location') || (radioValue == 'present')){
              window.location.href = 'page4.com';
         }
    })
});

出于某种原因,我无法使我的代码正常工作。我究竟做错了什么?

    <div class="w-form">
      <form id="wf-form-Choice-form" name="wf-form-Choice-form" data-name="Choice form">
        <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="radio-button-field-2 w-radio"><input type="radio" data-name="Typedeprojet" id="vente" name="Typedeprojet" value="vente" class="w-form-formradioinput projetenvente w-radio-input"><span for="vente" class="textcheck w-form-label">Projets en vente</span></label><label class="radio-button-field-3 w-radio"><input type="radio" data-name="Typedeprojet" id="location" value="location" name="Typedeprojet" class="w-form-formradioinput projetenlocation w-radio-input"><span for="location" class="textcheck w-form-label">Projets en location</span></label></div>
          <div class="w-col w-col-6">
            <div class="smalltext">DATE DU PROJET</div><label class="radio-button-field-5 w-radio"><input type="radio" data-name="Timeline" id="actuel" name="Timeline" value="actuel" class="w-form-formradioinput projetactuel w-radio-input"><span for="actuel" class="textcheck w-form-label">Projet actuel</span></label><label class="radio-button-field-4 w-radio"><input type="radio" data-name="Timeline" id="passe" name="Timeline" value="passe" class="w-form-formradioinput projetpasse w-radio-input"><span for="passe" class="textcheck w-form-label">Projets passé</span></label></div>
        </div><a href="#" class="button filter w-button">Recherchez</a></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>
javascript jquery
1个回答
0
投票

据我所知,提交表单后,页面将重新加载。提交表单时,您无需使用preventDefault()

jQuery(document).ready(function(){
    jQuery('.button-submit').click(function(e){
         e.preventDefault();

         var radioValue = jQuery('input:radio:checked').val();

         if ((radioValue == 'vente') || (radioValue == 'passe')){
              window.location.href = 'page1.com';
         }
         if ((radioValue == 'vente') || (radioValue == 'present')) {
              window.location.href = 'page2.com';
         }
         if ((radioValue == 'location') || (radioValue == 'passe')){
              window.location.href = 'page3.com';
         }
         if ((radioValue == 'location') || (radioValue == 'present')){
              window.location.href = 'page4.com';
         }
    })
});

另外,我建议您在提交表单后听取而不是单击按钮:$("#form").on("submit", function(e) {...})

© www.soinside.com 2019 - 2024. All rights reserved.