Question

我有三个复选框供用户选择。选中它后的第三个复选框显示一个表单，允许用户填写表单并将其作为正在运行的电子邮件提交。然而，我想要为其他两个做的是允许用户选择任何复选框，然后单击按钮，该按钮将转到相应的网页。例如，如果用户选中复选框以上传文件，然后单击“下一步”按钮，则会将其带到上传文件网页。

我还在学习jquery，所以如果可能的话，我想对jquery / javascript代码提供一些帮助。我已经尝试了jquery代码但是我知道我正确的做法。

<form action="">            
    <input type="checkbox" name="radio-1" id="radio-1" onchange = "changeRadio()">
    <label for="radio-1">I Want to Upload my own artwork</label>
    </br>
    <input type="checkbox" name="radio-1" id="radio-1" onclick =>
    <label for="radio-1">I want to use a pre made template</label>
    </br>
    <input type="checkbox" name="createartwork" id="createartwork"> 
    <label class="label-for-check" for="createartwork">I want you to create my artwork</label> 
</form>


<div id="next-container">
    <button class="card__btn btn" id="nxtBtn" type="button" >Next</button>
</div>

$(function() {
    $('#radio-1').click(function() {
        $('#nxtBtn').prop(
            'disabled',
            (!$(this).prop('checked'))
        );
    });
});

Answer 1

我的建议是将checkbox更改为radio-group同名，并将点击事件添加到#nextBtn按钮，并从广播组中获取所选值并根据值，执行必要的行动。要导航到其他页面，请使用location.href="your url";。以下是适合您的示例演示片段。

＆＃13;

$("#nxtBtn").on('click', function() {
  var selected = $('input[name=radio-1]:checked', '#frmOptions').val()
  switch (selected) {
    case "1":
      alert("Redirect with location.href='www.someurl.com/newpage';");
      //replace alert with location.href="your url";
      break;
    case "2":
      alert("Redirect with location.href='www.someurl.com/newpage2';");
      //replace alert with location.href="your url";
      break;
    case "3":
      alert("Display Your form");
      break;
    default:
      break;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmOptions" action="">
  <input type="radio" value="1" checked name="radio-1" id="radio-1" />
  <label for="radio-1">I Want to Upload my own artwork</label>
  <br/>
  <input type="radio" value="2" name="radio-1" id="radio-2" />
  <label for="radio-2">I want to use a pre made template</label>
  <br/>
  <input type="radio" value="3" name="radio-1" id="createartwork">
  <label class="label-for-check" for="createartwork">I want you to create my artwork</label>
  <br/>
  <div id="next-container">
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button>
  </div>
</form>

＆＃13;

Answer 2

您可以隐藏“下一步”按钮，直到选择了一个选项，这将强制用户在继续之前进行选择。以下解决方案将根据单选按钮选择设置表单操作。

<style>
    .hidden {
      visibility: hidden;
    }
</style>

<script>
  $().ready(function() {
    $("input[name=artwork]:radio").click(function() {
      var url = "http://url.com/default";
      // get the value from the input field
      switch(this.value) {
        case "create" :
          url = "http://url.com/create";
          break;
        case "premade" :
          url = "http://url.com/premade";
          break;
        case "upload" :
          url = "http://url.com/upload";
          break;
      });
      // set the form target
      $("#artwork_form").attr("target", url);
      // display the button container
      $("#next-container").removeClass("hidden");
    }
  });
</script>

<form name="artwork_form" id="artwork_form" action="">
  <input type="radio" name="artwork" value="upload">
  <label>I Want to Upload my own artwork</label>
  <br/>
  <input type="radio" name="artwork" value="premade">
  <label>I want to use a pre made template</label>
  <br/>
  <input type="radio" name="artwork" value="create">
  <label>I want you to create my artwork</label>
  <br/>
  <br/>
  <div id="next-container" class="hidden">
    <input type="submit" id="nxtBtn" value="Next">
  </div>
</form>

当用户选中复选框并单击按钮时，如何访问其他页面？

2 个答案: