So I have the following animated form in my HTML code.
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Consultation</legend>
<p>
<input class = "consultation" type="submit" value="General Consultation">
</p>
<p>
<input class = "consultation" type="submit" value="Blood Test with Consultation">
</p>
<p>
<input class = "consultation" type="submit" value="Full Sexual Health Screen">
</p>
<p>
<input class = "consultation" type="submit" value="Hair Loss PRP Treatment">
</p>
<p>
<input class = "consultation" type="submit" value="Executive Health Screening">
</p>
<p>
<input class = "consultation" type="submit" value="Flu Vaccination">
</p>
<p>
<input class = "consultation" type="submit" value="Other">
</p>
<input type="hidden" name="consultation" id="consultation" value="">
</fieldset>
<fieldset class="step">
<legend>Provider</legend>
<p>
<input class = "provider" type="submit" value="Dr. Kevin O'Connell">
</p>
<p>
<input class = "provider" type="submit" value="Dr. Rachel Fitxgerald">
</p>
<p>
<input class = "provider" type="submit" value="Dr. Simon Gilmore">
</p>
<p>
<input class = "provider" type="submit" value="Nurse Julie Byrne">
</p>
<input type="hidden" name="provider" id="provider" value="">
</fieldset>
<fieldset class="step">
<legend>Date</legend>
<p>
<input type="date" name="date">
</p>
<p class="submit">
<button id="registerButton" type="submit">Confirm</button>
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>
Thank you for requesting an appointment. We will be in touch with you shortly to confirm it.
</p>
<p class="submit">
<button id="registerButton"type="submit">Home</button>
</p>
</fieldset>
</form>
As you can see each element is a clickable one then it brings you to the next part of the form. My goal is to, when submitted, have each of the elements the user clicked on be sent to the action page via php and using $_POST. I have tried using jQuery for this and detecting when an element is clicked, transferring that value to a hidden input and retrieving the data from that but I can't seem to get it right.
$('input.consultation').click(function(){
$(this).text() = consultation_value;
$('#consultation').text() = consultation_value;
console.log(consultation_value);
});
$('input.provider').click(function(){
$(this).text() = provider_value;
$('#provider').text() = provider_value;
console.log(provider_value);
});
If anyone could help me learn why my code isn't working or offer a more efficient solution I'd appreciate it
