Pass select option values as url parameter to next page - php

Question

I have custom registration system based on url parameters.
Step1: I have some buttons and when you click one of the buttons it will pass value to next page, where i'm able to get value by using <?php echo $_GET['step1'];?> (this works fine)
Step2: I want to use just two select boxes (don't want to use form here) and on <a> click I want to pass that selection to url.
Here is my code:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
So here is what I want to pass to the next page:
http://domain/step1/step2/step3?parameterfromstep1=something&gender=male&color=red
How should I make it? Should I use php on a button click or jquery?
Thanks

Answer 1

<a id="next" href="http://domain/step1/step2?step1=<?php echo $_GET['step1'];?&SELECTboxVALUES>">Next</a>
use below code
$('#next').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
var gender = $('[name="gender"]').val();
var color = $('[name="color"]').val();
if( gender && color ){
window.location.href = url+'?&'+gender+color;
}
});

Answer 2

Well, this is maybe not the best or most beautiful approuch but i think the code below will work for you:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).on('click', '#nextButton',function( event ) {
// Stop default action
event.preventDefault();
window.location.href = $(this).attr('href') + '&gender='+$('select[name="gender"] option:selected').text()
+ '&color='+$('select[name="color"] option:selected').text();
});
</script>