[Resolved] jquery events gone after form submission

[Author]

Posts

[a.R]

Hi, on lern.land/kte, when clicking on that black button, data will be parsed and filled into that form.
After form submission, that functionality is gone. How restore it?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please tell me and share screenshot what black button you are talking about?

What exactly the thing you want to achieve with what form?

[a.R]

Hi Minesh,

we want to create lern.land-posts out of ics files.
I mean that button beneath the 2 textareas ("GOO!")

After submitting the form by "Einsenden" below, GOO! won´t work any more.

[Minesh]

Does it require login as when I try to access the page you said it redirect me to hidden link

Can you please share step by step information and tell me what from where it collects data and how you want to present with Toolset form?

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[a.R]

Oh sorry. Now it works with password 'otgs'.

[Minesh]

Ok I can see the form now and I can even see "Goo!!" button but I still do not understand what is the issue or how can I see the issue or what you want to achieve and what is your expectations?

[a.R]

Can you see what happens when you press Goo! ?
After submitting the form bei "Einsenden", that won´t work any more.

In line 107 we try to reattach that jquery to #goo after form submission, but that won´t help.

//Kurztermine erstellen nach KI-Vereinfachung
jQuery(function($) {
  var keyworte = ["SUMMARY:", "DESCRIPTION:", "LOCATION:", "DTSTART:", "DTEND:", "DURATION:", "END:VEVENT"];
  var $_summary = $('#cred_form_102400_1_1_post_title');
  var $_description = $('#cred_form_102400_1_1_post_content');
  var $_location = $('#cred_form_102400_1_1_kurztermin-location');
  var $_dtstart = $('#cred_form_102400_1_1_kurztermin-dtstart');
  var $_datum = $('input[name="wpcf-med-datum[0][display-only]"]');
  var $_uid = $('#cred_form_102400_1_1_kurztermin-uid');

  function verarbeiten() {
    // Get the text from #ganztext
    var ganztext = $("#ganztext").val();

    // Find the first section between "BEGIN:VEVENT" and "END:VEVENT"
    var regex = /BEGIN:VEVENT([\s\S]*?)END:VEVENT/;
    var match = ganztext.match(regex);

    if (match) {
      // Extract the found section
      
      var randomUid = 'www.lern.land_'+Math.floor(Math.random() * 100000000000);  // Adjust the range as needed
      $_uid.val(randomUid);
      
      var extractedText = match[0];

      // Set the extracted text in the element with ID "akt_text"
      $("#akt_text").text(extractedText);

      // Optionally, remove the extracted text from #ganztext
      $("#ganztext").val(ganztext.replace(extractedText, ''));
    }

    var aktText = $("#akt_text").text();

    keyworte.forEach(function(keyword) {
      var start = aktText.indexOf(keyword);

      if (start !== -1) {
        var end = aktText.length;

        keyworte.forEach(function(innerKeyword) {
          var keywordIndex = aktText.indexOf(innerKeyword, start + keyword.length);

          if (keywordIndex !== -1 && keywordIndex < end) {
            end = keywordIndex;
          }
        });

        var extractedText = aktText.substring(start + keyword.length, end).trim();

        // Display extracted text for debugging
        $('#k-show').append('ex: ' + extractedText + '<br>');

        // Set the extracted text in the corresponding element based on the keyword
        switch (keyword) {
          case "SUMMARY:":
            $_summary.val(extractedText);
            break;
          case "DESCRIPTION:":
            $_description.val(extractedText);
            break;
          case "LOCATION:":
            $_location.val(extractedText);
            break;
          case "DTSTART:":
            $_dtstart.val(extractedText);

            // Parse DTSTART value and format the date as "dd.mm.yyyy"
            var year = extractedText.trim().slice(0, 4);
            var month = extractedText.trim().slice(4, 6);
            var day = extractedText.trim().slice(6, 8);

            if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
              var dtstartDate = new Date(year, month - 1, day);

              // Custom format for the date
              var monthNames = [
                "Januar", "Februar", "März", "April", "Mai", "Juni",
                "Juli", "August", "September", "Oktober", "November", "Dezember"
              ];

              var formattedDate = monthNames[dtstartDate.getMonth()] + " " + day + ", " + year;

              // Set the formatted date in $_datum
              $_datum.prop('readonly', false).val(formattedDate).prop('readonly', true);

              console.log('Datum: ' + formattedDate);
            } else {
              console.log('Invalid date components in DTSTART');
            }
            break;
            // Add cases for other keywords as needed
        }
      }
    });
  }

  $(document).ready(function() {
    // Initial click event handler for #goo
    verarbeiten;
    $("#goo").on('click', verarbeiten);

    // Assuming #ganztext is a static parent element that doesn't get replaced

  });
  $('#cred_form_102400_1_1').submit(function(event) {
    $("#goo").off('click').on('click', verarbeiten);
});
  
  
  $('#ganztext').on('ajaxComplete', function() {
  // Reattach the click event handler for #goo after AJAX is complete
  $("#goo").off('click').on('click', verarbeiten);
});

});

[Minesh]

Thank you. I understand you have custom code to parse data in the top section and populate the fields of a form with that data. After submitting the form the custom code no longer works.

I'm sorry, but debugging custom JavaScript is outside the scope of the support we can offer.

I suspect that if you change the form settings so that it submits via a page reload rather than via ajax would resolve your problem, but if you need it to work with ajax then you will need to consult a developer to work on the code for you.

Typically we would recommend Toolset Contractors for development work, but in this case any developer familiar with jQuery should be able to help.

If you need custom programming/development work for your site, you are welcome to contact any of our certified partners:
- https://toolset.com/contractors/

[a.R]

We solved this by

    $( document ).ajaxComplete(function() { 
    $("#goo").on('click', verarbeiten);
});

Only problem was to find out the correct event handler.

Quite simple.
Thank you, Minesh 🙂