0

Based on this threat I've managed (with special thanks to Tami) to create a dropdown menu with variable year numbers in it. Now I would like to use that chosen value of that dropdown menu as a (part of the) placeholder for another input field.

I tried this with no luck:

[number* ba-maanden min:1 max:12 placeholder "cf7_get_input="recent-years""]

Does anyone has an idea how to get this done?

Thanks, Vasco

Vasco
  • 17
  • 6
  • You probably want something that uses jQuery like this https://stackoverflow.com/questions/9232810/change-placeholder-text-using-jquery – Howard E Dec 29 '20 at 10:35
  • Thanks Howard, so if I'm correct I can use this code? But unfortunately it doesn't work. `add_action( 'wpcf7_contact_form', 'action_wpcf7_contact_form', 10, 1 ); $('9462').find("input[type=dropdown]").each(function(ev) { if(!$(this).val()) { $(this).attr("placeholder", [recent-years]); };` – Vasco Dec 29 '20 at 14:10

1 Answers1

0

This is not tested, but should work. You can either add this to your form itself by making it all inline and surrounded with <script> and </script> or add this to your theme's js file.

jQuery(function($) {
   $('select[name="ba-maanden"]').on('change', function(){
       // Assign variable $placeholder to the chosen value
       let $placeholder = $(this).val();
       // replace 'your-field-name' with the cf7 field name
       $('input[name="your-field-name"]').attr('placeholder', $placeholder);
   });
});
Howard E
  • 5,454
  • 3
  • 15
  • 24
  • Thanks Howard, unfortunately I cannot get this to work. Not by adding it to the form directly nor via the theme's js file. I tried several options. Do I need to add a (sort of) temporary placeholder to the field, or don't I have to add anything? Any thought maybe? – Vasco Dec 31 '20 at 10:07
  • Whoops.. I wrote `input` instead of `select` it should work now. I've edited the answer – Howard E Dec 31 '20 at 11:17
  • It works, thanks. But there are 2 options missing. Where can I add more placeholder text? It will now change to the year date (2020). But I will like it to be changed to: "Aantal maanden in" and then the year date. On the last line I tried: `$('input[name="your-field-name"]').attr('placeholder', "Aantal maanden in" $placeholder);`, but that one didn't work. Also tried it without the quotes. And how can I set up that it will show the first choice of the dropdown as default? Because I don't have a blank option first, and when someone selects the first one, they didn't see the placeholder. Thanks – Vasco Dec 31 '20 at 14:35
  • You have to use the javascript concatenator + to join a variable and other text `"your text" + $placeholder` Since this answered your question, it would be appropriate to accept the answer. Thanks. – Howard E Dec 31 '20 at 14:44
  • Yeah that works! Sorry I'm totally unknown with jQuery yet. Last question: the first option is the default option. How to see this option as well? Because now it only shows the placeholder when I click on the dropdown. But when the first option is the right one (so visitors didn't have to change that), visitors don't see the placeholder. Thanks! And of couse I will accept your answer. – Vasco Dec 31 '20 at 15:01
  • You can set the placeholder in the contact form by using [text field-name placeholder "Your Default Placeholder"] – Howard E Dec 31 '20 at 15:08
  • Is there also a way to use this code to show the input into a paragraph in the form? Example: `

    Is [recent-years] is gonna be a good year?

    ` where `[recent-years]` is the chosen value of that dropdown menu. Thanks.     – Vasco Jan 16 '21 at 13:27
  • That should probably be a separate question. I would think. – Howard E Jan 16 '21 at 18:54