How to get values from a button - php

Question

I have a form which goes through three steps. In step 2, I am asking the user to select a speciality by clicking the corresponding button. If they click a button, they should move to the 3rd and final step.
Here is the button code:
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="hair_stylist" >HAIR STYLIST</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="cosmetologist" >COSMETOLOGIST</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="makeup_artist" >MAKEUP ARTIST</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="barber" >BARBER</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="esthetician" >ESTHETICIAN</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="nail_technitian" >NAIL TECHNITIAN</button>
I don't think name will work here. Is there anything that can be done with data-*? How can I send and grab this value in PHP when the form is submitted?

Answer 1

Having a name is fine and necessary.
There are two problems.
You need actually have a value in order to send a value
You need the button to be a submit button in order to submit the form
Such:
<button
class="btn btn-primary nextBtn btn-proffessional"
type="submit"
name="profession"
value="hair_stylist">
Hair Stylist
</button>
Then in PHP you can simply:
do_something_with($_POST["profession"]);

Answer 2

You can also use jquery Post function for this.
First little bit change your html code. Put your values inside id of your buttons
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="hair_stylist" id="HAIR STYLIST">HAIR STYLIST</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="cosmetologist" id="COSMETOLOGIST">COSMETOLOGIST</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="makeup_artist" id="MAKEUP ARTIST">MAKEUP ARTIST</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="barber" id="BARBER" >BARBER</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="esthetician" id="ESTHETICIAN" >ESTHETICIAN</button>
<button class="btn btn-primary nextBtn btn-proffessional "
type="button" name="nail_technitian" id="NAIL TECHNITIAN" >NAIL TECHNITIAN</button>
Then Some jquery code here:
$(document).ready(function () {
$('.nextBtn').on('click', function () {
$.post("NewPage.php",
{value: this.id
});
});
});
After clicking button. That particular button will be accessed by its class then it sends data to NewPage.php (You have to make new php page) where you can access value by POST array.
NewPage.php
If(isset($_POST['value']))
{
//Do your process here
}

Answer 3

Use the value parm.
Example:
<button class="btn btn-primary nextBtn btn-proffessional " type="button" name="hair_stylist" value="HAIR STYLIST">HAIR STYLIST</button>