Passing radio buttons to be redirected to a new page

Question

I am trying to reword this the best I can

I want it so that when someone goes to a page, they get the value of a radio button that is a link that sends them there once they click submit.

here's the code i've tried

 <form name = "quoted" method="get">
     <input id = "poster" type="text" name="poster" required="required" placeholder = "Credited Individual.">     <br>
     <textarea class = "actual_quote" name = "actual_quote" required="required" placeholder = "Write the question here!"></textarea><br><br><br>
     <div class = "checkboxes" required="required">
         <h3 style = "margin-top:-20px;">Please select one catagory that the quote falls into.</h3>
         <label for="x"><input type="radio" name="x" value="stupid.php" id = "x" checked="checked" />    <span>stupid</span></label><br>
         <label for="x"><input type="radio" name="x" value="stupider.php" id = "x" /> <span>stupider</span>    </label><br>
         <label for="x"><input type="radio" name="x" value="stupidest.php" id = "x"/>    <span>stupidest</span></label>
     </div>
     <input id = "submit1" type="submit"><br>
 </form>

and here's the code that is supposed to make it work, but it doesn't.

$(function(){
    $('form').submit(function(event){
        event.preventDefault();
        window.location = $('input[type=radio]:checked').val();
    });
});

what am I doing wrong? I just want the user to be able to select one radio option, and once that radio option is selected and they press submit redirect them to that one certain page that the value is pointing to.

Please help! Any suggestions welcome! -Connor

Answer 1

Try this

<script type="text/javascript">
    function get_action(form) {
        form.action = document.querySelector('input[name = "x"]:checked').value;
    }

</script>


<form name = "quoted" method="get" onsubmit="get_action(this);">
     <input id = "poster" type="text" name="poster" required="required" placeholder = "Credited Individual.">     <br>
     <textarea class = "actual_quote" name = "actual_quote" required="required" placeholder = "Write the question here!"></textarea><br><br><br>
     <div class = "checkboxes" required="required">
         <h3 style = "margin-top:-20px;">Please select one catagory that the quote falls into.</h3>
         <label for="x"><input type="radio" name="x" value="stupid.php" id = "x" checked="checked" />    <span>stupid</span></label><br>
         <label for="x"><input type="radio" name="x" value="stupider.php" id = "x" /> <span>stupider</span>    </label><br>
         <label for="x"><input type="radio" name="x" value="stupidest.php" id = "x"/>    <span>stupidest</span></label>
     </div>
     <input id = "submit1" type="submit"><br>
 </form>

This will work. Please vote if it worked. :)

Answer 2

Your code seems to be working fine on jsfiddle .

$(function(){
$('form').submit(function(event){
    event.preventDefault();
    window.location = $('input[type=radio]:checked').val();
});
});

Make sure that the php files are valid and working. If the page is being loaded but not displayed, it might be a problem with your php files. If no page is being loaded when you click submit, try using a different browser, as the code here works fine.