Get value of input type radio and redirect depending which one is selected

Question

I have this view:

<h2>¿Este cliente esta relacionado con un proyecto existente?</h2>
<form  enctype="multipart/form-data" id="redirectProject" name="redirectProject">
    <div class="form-group">
        <div class="radio">
            <label><input type="radio" name="optRadio">Si</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="optRadio">No</label>
        </div>
        <input type="submit" value="Avanzar" id="redirectProjectsubmit" class="btn btn-danger btn-md">
        <br><br><br>
    </div>
</form>

And I want to redirect the user when they click the input depending on which input is selected.

I want to use it with ajax.

How should the controller function and the route look?

I think ajax can help do it.

Thanks a lot, any help will be appreciated, if have any question about code or the question please ask it.

Answer 1

Two things,

1. You need to give value to your radio buttons

   <div class="radio">
       <label><input type="radio" name="optRadio" value="yes">Si</label>
   </div>
   <div class="radio">
       <label><input type="radio" name="optRadio" value="no">No</label>
   </div>
   

2. Attach an event listener on the click of radio and redirect accordingly

   $("[name=optRadio]").on("click", function () {
       var selected_value = $(this).val();
       if (selected_value == 'yes') {
           // Hide the div
       } else {
           window.location.href = "{{ url('path where to redirect') }}";
       }
   });
   

Answer 2

Assign a click listener on each radio and when it is triggered, use jQuery to query the form that surrounds them - now you should have access to the optRadio value.

After that, check for true or false values of optRadio i.e

( this is sudo code but the idea is there ;-) )

let radio = //value from form

if(radio) {
  //redirect user after selecting 'Si'
} else {
  //redirect user after selecting 'No'
}

or

window.location = radio ? *Si url* : *No url*

Answer 3

you can do it using jquery onclick function. add a class or id to both your radio button as below.

  <h2>¿Este cliente esta relacionado con un proyecto existente?</h2>

          <form  enctype="multipart/form-data" id="redirectProject" name="redirectProject">
                <div class="form-group">

                  <div class="radio">
                  <label><input type="radio" class="si" name="optRadio">Si</label>
                  </div>

                  <div class="radio">
                  <label><input type="radio" class="no" name="optRadio">No</label>
                  </div>
                  <input type="submit" value="Avanzar" id="redirectProjectsubmit" class="btn btn-danger btn-md">
                  <br><br><br>

                </div>
          </form>
    <script>

   //when you click yes
    $('.si').click(function(event){
        window.location.replace("http://redirect_to_your_location.com");
    });

   //when you click no
   $('.no').click(function(event){
        window.location.replace("http://redirect_to_your_location.com");
    });
    </script>

Answer 4

This is just a basic idea, you can adjust it for your needs easily :)

Add values to your form radio.

<form enctype="multipart/form-data" id="redirectProject" name="redirectProject">
        <div class="form-group">

          <div class="radio">
          <label><input type="radio" name="optRadio" value="1">Si</label>
          </div>

          <div class="radio">
          <label><input type="radio" name="optRadio" value="0">No</label>
          </div>
          <input type="submit" value="Avanzar" id="redirectProjectsubmit" class="btn btn-danger btn-md">
          <br><br><br>

        </div>
  </form>

Your controller should look something like this.

SomeController extends Controller {

    public function inputRedirect(Request $request) {
        if ($request->ajax()) {
            if ($request->input('optRadio') {
                return redirect('/somwhere');
            } else {
                return redirect('/somwhere-else');
            }
        }
    } 
}

And add your routes like this in your route.php file for laravel <= 5.3, or routes/web.php for laravel >= 5.4

Route::get('/somewhere');
Route::get('/somwhere-else');