ユーザーがチェックボックスを選択してボタンをクリックしたときに別のページにアクセスするにはどうすればよいですか？

Question

私はユーザーが選択できる3つのチェックボックスを持っています。 3番目のチェックボックスが選択されている場合は、ユーザーがフォームに記入して作業中の電子メールとして送信できるフォームが表示されます。しかし、私が他の2つのためにやりたかったことは、ユーザーが任意のチェックボックスを選択して、適切なWebページにかかるボタンをクリックできるようにすることでした。例えば、ユーザがファイルをアップロードするためにチェックボックスを選択し、「次へ」ボタンをクリックすると、ファイルをアップロードファイルのウェブページに移動します。

私はまだ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

私の提案は、同じ名前を持つradio-groupにcheckboxを変更すること、および#nextBtnボタンにクリックイベントを追加し、ラジオ・グループから選択された値を取得した値に基づいて、必要なアクションを実行します。別のページに移動するには、location.href="your url";を使用してください。以下は、あなたのサンプルデモスニペットです。

$("#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; 
 
    } 
 
});

<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>

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>