Use one modal to capture information from multiple products

[darrenpazzopardi]

Hi there,

I’ve got a single page that has about 8 products where im trying to let users book their interest in a treatment. Rather than having multiple modal triggers and modal windows, is it possible to use one modal, on either product selected, but one they do select a treatment, that treatment is acknowledged in the modal too?

I’ve got my page that im working on here: http://azzopardi.club/pamper-parlour/beauty-treatments.php

The product with the button trigger is the one im working on…

First thing is, i know the modal needs to be a class rather than id, i’ve left it has is because i dont want to go to far and mess things up…

Any pointers will be much appreciated.

[Drummin]

I am no expert at JS but you should be able to define each of these “data” values for each button with corresponding identifiers much like you were using “id” to pass the “name” you can pass the “price” and “treatmenttime”. I’d start by not using the “id” unless you have a treatment id and stick with identifying names you need that make sense. e.g. “name”,“price”,“treatmenttime”. (note “time” is kind of one of those special words so I would avoid using it as an attribute label)
Take these data attributes and add them to each of your buttons with the values you wish to pass.

<button type="button" data-name="ProSkin 30" data-price="£45.00" data-treatmenttime="30 minutes"  class="treatment_selected btn btn-primary" data-toggle="modal" data-target="#contact-modal" >book now</button>

<button type="button" data-name="ProSkin 60" data-price="£65.00" data-treatmenttime="1 hour" class="treatment_selected btn btn-primary" data-toggle="modal" data-target="#contact-modal">book now</button>

Then modify “book-treatment.js” code to use these date attribute names instead of using “data-id”.

  $(document).on("click", ".treatment_selected", function () {
	 $('#name').html($(this).data('name'));
	 $('#price').html($(this).data('price'));
	 $('#treatmenttime').html($(this).data('treatmenttime'));
});

Then in your modal, instead of targeting id=“demo”, define and label where each of these “ids” are to be shown. Taking your example I start with the name, then a line break, price, then a line break and then the treatment time.

<p>You are booking:<textarea name="product" class="treatment" id="name" rows="1" cols="1" ></textarea>
<br />Price:<textarea name="price" class="treatment" id="price" rows="1" cols="1" ></textarea>
<br />Treatment:<textarea name="treatmenttime" class="treatment" id="treatmenttime" rows="1" cols="1" ></textarea></p>

Note I used a textarea input (like you had) for each of these values being passed to the modal so they are passed on POST.

Array ( [product] => Russian lashes [price] => Ł50.00 [treatmenttime] => 2 hour 30 minutes [BookingDate] => 2021-09-03 [datetime] => 18:00 [client_name] => Me [email] => drummin@fakemail.com [message] => Hi ) 

ALSO note change your client name input so it has a proper name.

<input type="text" name="client_name" id="input" class="form-control" placeholder="client_name" >

All edited buttons should pass values to the modal populating the form value and shown like this with suggested changes.

Note: You might want to edit your css for textarea.treatment to top:0 instead of top:4px so the TEXT and textarea TEXT lines up a little better.