Prefill field

Resolved

(@neutcomp)

Hello,

I want to prefill some fields. I tried doing something like this in my functions.php file


add_action('em_booking_form_footer', 'update_data', 10);

function update_data() {
?>
   <script type="text/javascript">
   (function($) {
      $( "#em-ticket-spaces-17" ).change(function() {
         $('#em-attendee-details-17 #attendee_voornaam').css("border","1px solid red");
         $('#em-attendee-details-17 #attendee_geboortedatum').val("somedata");
      });
   })(jQuery);
   </script>
<?php
}

The strange thing is dat there is a red border but no data is prefilled in the input field.

Hope that someone knows the answer to this simple question 🙂

Thanks,
Bjorn

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Stonehenge Creations
(@duisterdenhaag)

7 years, 1 month ago

First of all, you are targeting ID’s and not classes. ID’s need to be unique (just like your own ID (BSN)). That is the main difference with classes.

The values are saved, because the name field is an array. Pushing data in the array will simply create a new “layer” to save to the database.

You name field:
name="em_attendee_fields[16][attendee_voornaam][]"
16 is the ticket and the [] indicates “push into array”.

Because attendee fields are created dynamically, they are harder to target, but you could try to target them by name, not ID.

BTW, I created a great iDEAL plugin for Dutch EM Users. 😉 😛
Thread Starter Bjorn van der Neut
(@neutcomp)

7 years, 1 month ago
Patrick,

Thanks for your quick reply. Unfortunately this also does not work
```
$('input[name="em_attendee_fields[17][attendee_voornaam][]"').css("border","1px solid red").val("voor");
```
Any other solution? Seems so easy but it’s not working in the function file. If I add this code to the console it works fine.
```
document.getElementsByName("em_attendee_fields[17][attendee_voornaam][]")[0].value="testdata";	
```
`
Thread Starter Bjorn van der Neut
(@neutcomp)

7 years, 1 month ago
Ok i found the solution by just adding a little wait before setting the value.
```
const sleep = (milliseconds) => {
   return new Promise(resolve => setTimeout(resolve, milliseconds))
}

sleep(500).then(() => {
   $('#em-attendee-details-17 #attendee_voornaam').val("dummy-voornaam");
});
```
Stonehenge Creations
(@duisterdenhaag)

7 years, 1 month ago
And will you be doing that for every ticket type for every event? 😛 Because each event creates its own ticket_id (check the database wp_em_tickets), even if details seem alike. Since cut-off times (and dates) differ, EM makes a new ticket ID every time you create an event.
So you cannot really re-use the ticket ID in a future event. Targeting with “17” is not a great idea 😉

A question that came into my head:
Why would you want to pre-fill these fields?? And how would you know with what value? Are you trying to put in a placeholder, perhaps? Because the jQuery property is different then. A placeholder is more user-friendly than a value, as a placeholder automatically disappears when the field is selected. Also, placeholders are seen as “empty fields” when submitting the form. If you fill it as a default value, users can submit without changing the defaults. And you will get submissions without the actual required data. 😉

Back to the jQuery…
You will need to be looking into a solution more with .each() to loop through the inputs.

I took a new/closer look at the Attendee Form. Strangely enough the field ID is reused. Not the way it is supposed to be, but hey, you can benefit from that.;-)

Currently only ticket 17 (for the T-shirt) prefills with “dummy-voornaam”.

Okay, just thinking out loud now (so not tested):
Perhaps you could try something like this:
```
$('#attendee_voornaam').each( function() {
    $(this).val('Mijn voornaam');
});
```
Hmmmm…. Perhaps you need to first target the spaces dropdown (.em-ticket-select), because the attendee fields are generated upon changing the selection. Look in your page source to see the fields are not on page load 😉

So then you would end up with a function triggering a function.
```
jQuery.noConflict();
jQuery(document).ready(function($) {
    $(document.body).on('change', '.em-ticket-select', function() {
        $('#attendee_voornaam').each( function() { $(this).attr("placeholder", "Mijn voornaam"); });
        $('#attendee_achternaam').each( function() { $(this).attr("placeholder", "...en dit is mijn achternaam"); });
    }).trigger('change');
});
```
Btw, you need to update the PayPal logo url (in EM Gateways) to use https://. It now gives a notice in the console. 😉
- This reply was modified 7 years, 1 month ago by Stonehenge Creations.
Thread Starter Bjorn van der Neut
(@neutcomp)

7 years, 1 month ago

Patrick I found the solution as I mentioned in my previous message. I want to have a ticket that you can sell (i need name, age etc) but you can also add a t-shirt as a goody (i need t-shirt size). And because Event Manager does not have the option to add different values per ticket I am working around it to refill and hide fields.

I am also looking into the Mollie payment system now btw 😉

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Prefill field’ is closed to new replies.

Tags