基于无线电选择的重定向形式

Question

所以，我有一个带有3个无线电按钮的表单。根据用户选择哪个选项（他只能选择一个选项），可以有3种情况：

• 如果他选择第一个，当他提交表格时，他会重定向到新的URL。
• 如果他选择了第二个，则出现DIV（然后消失）。
• 如果他选择了第三个，则出现一个DIV（与上一个不同），然后也会消失。

我的html：

<form>
      <div class="radio">
        <label><input type="radio" name="paypal" value="paypal"</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="money" value="money"></label>
      </div>
      <div class="radio">
        <label><input type="radio" name="mastercard" value="mastercard"></label>
      </div>
</form>
<button type="button" id="button1" name="button">Check</button>

我的jQuery：

$('#button1').click(function() {
  var value = $(this).val();
  if (value == 'paypal') {
    window.location.assign("http://www.paypal.com");
}
  else if (value == 'money') {
    $('.div2').show('slow'); 
      $('.div2').fadeOut(4000);
}
}
  else if (value == 'mastercard') {
    $('.div1').show('slow'); 
       $('.div1').fadeOut(4000);
}

但是这里没有什么作用，我无法弄清楚什么或在哪里。编辑：没有错误，jQuery代码只是行不通的。无论我选择什么选项，当我提交什么都没有发生时。

Answer 1

通过在按钮中使用var value = $(this).val();，您实际上是在采用按钮本身的值，而不是您打算这样做。

使所有radio按钮名称相同。尝试以下代码：

$('#button1').click(function() {
  var value = $('input[name=myRadio]:checked').val();
  if (value == 'paypal') {
    console.log(value);
    window.location.assign("http://www.paypal.com");
  }
  else if (value == 'money') {
    console.log(value);
    $('.div2').show('slow'); 
    $('.div2').fadeOut(4000);
  }
  else if (value == 'mastercard') {
    console.log(value);
    $('.div1').show('slow'); 
    $('.div1').fadeOut(4000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="radio">
    <label><input type="radio" name="myRadio" value="paypal">Pay Pal</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="myRadio" value="money">Money</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="myRadio" value="mastercard">Master Card</label>
  </div>
</form>
<button type="button" id="button1" name="button">Check</button>

Answer 2

我建议使用 submit按钮以及下面的提交表单事件，以使其完全按照您的方式工作，并通过分配相似的名称来对单选按钮进行分组，并尝试减少if if否则，使其像下面的代码一样可读性

let formEvents = {
  paypal: function() {
    console.log('redirecting');
    //uncomment the following line when you use it in your script
    //window.location.assign("http://www.paypal.com");
  },
  money: function() {
    $('.div2').show('slow', function() {
      setTimeout("$('.div2').fadeOut(4000)", 500);
    });
  },
  mastercard: function() {
    $('.div1').show('slow', function() {
      $('.div1').fadeOut(4000);
    });
  }
}
$('form').on('submit', function(e) {
  e.preventDefault();
  var value = $(this).find('input:radio:checked').val();
  if (formEvents.hasOwnProperty(value)) {
    formEvents[value].call(this);
  }
});

.div1,
.div2 {
  display: none;
  background: #c8c8c8;
  border: 2px dashed #000;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="radio">
    <label><input type="radio" name="selection" value="paypal">paypal</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="selection" value="money">money</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="selection" value="mastercard">mastercard</label>
  </div>
  <button type="submit" id="button1" name="button">Check</button>
</form>
<div class="div1">div 1</div>
<div class="div2">div 2</div>