field manipulation

Your script runs immediately when the page loads. You want it to run when the user enters values into certain fields.

I think you want something like this. I’m not guaranteeing it works, just giving you the idea.

<script type="text/javascript">
$(document).ready(function () {
    function set_title() {
        $('#post_title').val($('#your-title').val() + " by " + $('#your-name').val());
    }
    $('#your-title').change(set_title);
    $('#your-name').change(set_title);
});
</script>

Hi Michael,

thank you very much for your pointer.

I hope this helps someone else and I invite you all you use my solution by leaving a message of peace. https://www.peacewalk2015.com/messages/

Peter

As I have seen similar requests scattered across the web I’ve decided to reply to you with both my thanks and my full solution which was far from straightforward, certainly for someone with no Javascript/ web development experience.

The process:
Firstly, I had no confidence that the Javascript was being executed, after much instrumentation and pointless changes and RSI educing emptying of cache I installed Firebug and realised that something was liberally scattering <p> </p> through my Javascript.

Unwilling to switch off the WordPress paragraph carpet bombing globally, I tried an endless number of WordPress plugins to prevent this none of which worked, but this led me to the excellent “Contact Form 7 Controls” plugin which proved effective.

Once installed this adds a ‘Customize’ tab to your Contact Form where you will find a checkbox to disable “Automatic Paragraph Formatting”.

Still the Javascript was not running, again Firebug helped by telling me that $ was not recognized and so despite getting the Javascript to run I had not proceeded much further.

Eventually I discovered that WordPress runs in compatibility mode which means that the $ used as a shortcut for jQuery does not work. This is easily solved by replacing all instances of $ with jQuery the Javascript ran but to no effect.

Some light sardonic instrumentation later I could see the Javascript was running but all form variables were UNDEFINED.

The solution to which was to include an ‘ id:’ in the definition for all variables I wanted to reference in the Javascript at which point I could finally move forward and write the two lines of code I had been trying to for a month.

My solution:
To have the form contents in Firebug, email and generate a post from the same input I recommend you:

1. Install Firebug in your browser
2. Add “Form to Post” plugin
3. Add “Contact Form 7 Modules Hidden Fields” plugin
4. Add “Contact Form 7 Controls” plugin
5. Add “Flamingo” plugin
6. Really, Install Firebug in your browser!
7. Using the additional tab from “Contact Form 7 Controls” plugin Switch off page breaks
8. Add an id: to all contact form 7 variables you need to access in Javascript

The Form below will allow you to have Flamingo, email and a post from a single form.

<p>Your Name</p>
<p>[text* your-name id:your-name]</p>

<p>Your Email</p>
<p>[email* your-email]</p>

<p>Message Title</p>
<p>[text* your-subject id:your-subject]</p>

<p>Your Message of Peace</p>
<p>[textarea* your-message id:your-message] </p>
<p>[submit “Post”] </p>

[hidden post_title id:post_title]
[hidden post_content id:post_content]
[hidden post_author_name “messagesofpeace”]
[hidden post_status “pending”]

<script type=”text/javascript”>
jQuery(document).ready(function () {
function pj_set_title() {
var post_plus_name = jQuery(‘#your-subject’).val() +” by ” + jQuery(‘#your-name’).val();
jQuery(‘#post_title’).val(post_plus_name);
jQuery(‘#post_content’).val(jQuery(‘#your-message’).val());
}
// CHANGE: list all field id’s here
jQuery(‘#your-name’).change(pj_set_title);
jQuery(‘#your-subject’).change(pj_set_title);
jQuery(‘#your-message’).change(pj_set_title);
});
</script>

I hope this helps someone else and I invite you all you use my solution by leaving a message of peace. https://www.peacewalk2015.com/messages/
Peter