WP contact form 7: get current date value to populate an input field

Question

Using contact form 7 on my website, would like to retrieve the form submission date as an input value to use in "Jetpack CRM" for a custom field. I want to avoid that the user has to select the date with a date picker.

Until now i only managed to get the current date value with [hidden today_date _date] that i can use in email templates, but this is not the thing i need.

What i tried so far (after reading How do I change the value of text field in wordpress contact form 7 using javascript):

In contact form 7, i added the field <label> [text submission_date id:submissiondate ""] </label>, hoping that the javascript would fill out the empty quotes with the dateTime value.

With the plugin "WP Headers and Footers" i added the script

    var today = new Date();

    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();

    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

    var dateTime = date+' '+time;

    document.getElementById("submissiondate").value = dateTime;

I tried the script in the header, in the body and in the footer.

The result is always: an empty form field and a js error:

Uncaught TypeError: document.getElementById(...) is null

Can anybody help me with this?

EDIT: Searching for help in this question i got the advice to add [hidden default:today_date _date id:submissiondate ] to the form and enter the js in the footer, like this:

    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var dateTime = date+' '+time;
    // this will set value for input with id submissiondate 
    jQuery('input#submissiondate').val(dateTime);   
    // check if value exists    
    var new_value = jQuery('#submissiondate').val();
    // display in console   
    console.log('current date time = ' + new_value);

Now the time value finds its way into the confirmation email, but still not into the jetpack crm custom field. Maybe the problem is that this is a hidden field? I tried alternatively to add [text default:today_date _date id:submissiondate ] to the form to create another field in the hope that this can be used for a custom field in jetpack crm but this does not work either – the custom field shows no value. Does anybody know how to get this working?

Answer 1

SOLUTION FOUND – a big shoutout to Santosh @ https://www.codeable.io/! The line [text default:today_date _date id:submissiondate ] in the form was wrong – the correct line is [text submissiondate id:submissiondate].

Summary: With the javascript in the page footer

    setInterval(add_date, 1000);    
    function add_date() {   
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var dateTime = date+' '+time;
    // this will set value for input with id submissiondate   
    jQuery('input#submissiondate').val(dateTime); 
    // check if value exists    
    var new_value = jQuery('#submissiondate').val();
    // display in console   
    console.log('current date time = ' + new_value);
    }

and the correct field [text submissiondate id:submissiondate] in the form template (hidden on the front end with CSS), i can use the field value in jetpack crm to populate a custom field and i can use it in a confirmation email as well. :-)

For those who prefer 2-digit-dates, the script can be edited like this:

    setInterval(add_date, 1000);    
    function add_date() {   
    var today = new Date();
    currentMonth = today.getMonth()+1;
    currentMonth = ("0" + currentMonth).slice(-2);
    currentDay = today.getDate();
    currentDay = ("0" + currentDay).slice(-2);
    currentHour = today.getHours();
    currentHour = ("0" + currentHour).slice(-2);
    currentMinute = today.getMinutes();
    currentMinute = ("0" + currentMinute).slice(-2);
    currentSecond = today.getSeconds();
    currentSecond = ("0" + currentSecond).slice(-2);
    var date = today.getFullYear()+'-'+(currentMonth)+'-'+(currentDay);
    var time = (currentHour) + ":" + (currentMinute) + ":" + (currentSecond);
    var dateTime = date+' '+time;

    // this will set value for input with id buchung-versanddatum   
    jQuery('input#buchung-versanddatum').val(dateTime);

    // check if value exists    
    var new_value = jQuery('#buchung-versanddatum').val();

    // display in console   
    console.log('current date time = ' + new_value);
    }