以相同的形式将输入从 cf7 表单添加到段落

Posted 2023-05-09

【中文标题】以相同的形式将输入从 cf7 表单添加到段落

【英文标题】：Add input from cf7 form to paragraph in same form

【发布时间】：2021-04-22 04:33:09

【问题描述】：

在 Howard E 的帮助下，我能够将下拉字段中的输入作为占位符显示到另一个字段中。你可以找到那个问题here。

现在我想以相同的形式将任何类型的输入字段的输入显示到段落中的一个句子中。

我尝试了这段代码，但不幸的是，它不起作用。

<p>Is [recent-years] is gonna be a good year?</p>

[recent-years] 是 cf7 输入字段的名称。在这种情况下，一个下拉字段。但也很想知道文本字段和单选/选择输入字段。

我猜想用 jQuery 是可能的，但我的知识不是那么好。

希望有人可以提供帮助。谢谢！

【参考方案1】：

你可以在表单上试试这个

<p>Is <span id="recent-years"></span> is gonna be a good year?</p>

对于 jQuery，使用这个：

 jQuery(document).ready(function( $ )
   $('select[name="recent-years"]').on('change', function()
       updateParagraph(); 
   );
  updateParagraph();
  
  function updateParagraph()
    // Assign variable $placeholder to the chosen value
       let $placeholder = $('select[name="recent-years"]').val();
       // replace 'your-field-name' with the cf7 field name
       $('input[name="your-field-name"]').attr('placeholder', $placeholder);
       //New code to also add to the form html
       $('#recent-years').html($placeholder);
  
);

测试工作，见下文

【讨论】：

感谢 Tami，这几乎是我需要的解决方案，但它无法正常工作。当我添加代码时，它会显示句子下方的值，而不是它应该显示的值。所以这个值出现了，但在错误的地方很奇怪。

@Vasco 我可以解决这个问题，已经知道问题出在哪里。很快就会更新答案。

@Vasco 我现在正在使用工作版本更新答案。我刚刚从年份下拉列表中意识到你是同一个人！ :)

谢谢。我还看到下拉菜单的第一个选项没有出现在段落中。我认为因为它可能是标准值。知道如何解决这个问题吗？

是的，我可以试试