Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Write in HTML-field in form data from current page where using form

2 weeks 5 days ago #1

  • Vladimir's Avatar
  • Vladimir
  • Posts: 87
Hi!
Developing huge project on Joomla 4 and using for it Baalbooa Forms.
I have a page: https://hmc.artcolorit.com/community
When user click on link "register to this event" form display and at the top of form I want insert via jQuery some information about event: image, title, description.

Wrote tis script:
$(document).ready(function(){
    $('.event-registration').on("click", function(){
        let eventDesc = $(this).prev('.event-description');
        let eventTitle = eventDesc.prev('.event-title');
        let eventImage = $(this).parent().prev().children('.event-image');
        //Form div
        if($('.ba-form-html-field .custom-html-wrapper .event-image').html().trim() === '') {
            $('.ba-form-html-field .custom-html-wrapper .event-image').append(eventImage.html());
        }
        if($('.ba-form-html-field .custom-html-wrapper .event-title').html().trim() === '') {
            $('.ba-form-html-field .custom-html-wrapper .event-title').append(eventTitle.html());
        }
        if($('.ba-form-html-field .custom-html-wrapper .event-description').html().trim() === '') {
            $('.ba-form-html-field .custom-html-wrapper .event-description').append(eventDesc.html());
        } 
    })
});
Script I inserted in the website page. It work. But from the second click. Maybe it because the form load only after first click and page not include it before?
Maybe you can help me to fix error.
Thanks!

2 weeks 5 days ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23122
Hello,
Thank you for contacting us

Your code is working, you need to add a form to the page and everything will work, on the first click the script works, but there is no form and it only works if you close and reopen

Regards,
Vyacheslav, Balbooa.com

2 weeks 5 days ago #3

  • Vladimir's Avatar
  • Vladimir
  • Posts: 87
Thanks, Vyacheslav!
I'll insert form in the module and load module in hidden module position, I think it must be work.

2 weeks 5 days ago #4

  • Vladimir's Avatar
  • Vladimir
  • Posts: 87
Tried to insert script into tab Javascript, and added form into module position on the page. But not working.
Code insert like this:
jQuery(document).ready(function(){
    jQuery('.event-registration').on("click", function(){
        let eventDesc = jQuery(this).prev('.event-description');
        let eventTitle = eventDesc.prev('.event-title');
        let eventImage = jQuery(this).parent().prev().children('.event-image');
        //Form div
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-image').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-image').append(eventImage.html());
        }
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-title').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-title').append(eventTitle.html());
        }
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-description').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-description').append(eventDesc.html());
        } 
    })
});

2 weeks 3 days ago #5

  • Vladimir's Avatar
  • Vladimir
  • Posts: 87
Vyacheslav, can you help me to understand where I have mistake in code?
Thanks

2 weeks 2 days ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23122
Hello,

You need to find in your code
jQuery(document).ready(function(){

Replace it with this code
document.addEventListener('DOMContentLoaded', function(){

Regards,
Vyacheslav, Balbooa.com

2 weeks 2 days ago #7

  • Vladimir's Avatar
  • Vladimir
  • Posts: 87
THanks, it working, content adding to the form, but with one error.
I clicked on one link - and content added.
If I'll click on another link for another event - it not changing.
Can you look, please?

Link: hmc.artcolorit.com/community

2 weeks 2 days ago #8

  • Vladimir's Avatar
  • Vladimir
  • Posts: 87
I fixed my issue with script. Now it work correctly.
document.addEventListener('DOMContentLoaded', function(){
    jQuery('.event-registration').on("click", function(){
        jQuery('.ba-form-html-field .custom-html-wrapper .event-image').empty();
        jQuery('.ba-form-html-field .custom-html-wrapper .event-title').empty();
        jQuery('.ba-form-html-field .custom-html-wrapper .event-category').empty();
        jQuery('.ba-form-html-field .custom-html-wrapper .event-date').empty();
        jQuery('.ba-form-html-field .custom-html-wrapper .event-description').empty();
        let eventDesc = jQuery(this).prev('.event-description');
        let eventTitle = eventDesc.prev('.event-title');
        let eventImage = jQuery(this).parent().prev().children('.event-image');
        let eventCategory = jQuery(this).parent().prev().children('.event-category');
        let eventDate = jQuery(this).parent().prev().children('.event-date');
        //Form div
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-image').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-image').append(eventImage.html());
        }
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-title').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-title').append(eventTitle.html());
        }
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-category').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-category').append(eventCategory.html());
        }
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-date').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-date').append(eventDate.html());
        }
        if(jQuery('.ba-form-html-field .custom-html-wrapper .event-description').html().trim() === '') {
            jQuery('.ba-form-html-field .custom-html-wrapper .event-description').append(eventDesc.html());
        } 
    })
});

But I have another interesting issue with HTML field. I need to edit it for adding div-element, but I just can't open HTML field for editing. Button for edit not display:
Powered by Kunena Forum