Typo3 Powermail跨页传递表单输入值到目标字段方法

问题场景 #

• 基于Typo3搭建的网站页脚放置简易邮箱收集表单，仅包含邮箱输入框、提交按钮两个元素
• 需求：点击提交按钮跳转至Powermail插件承载的订阅/联系页面时，自动将页脚输入框内用户填写的邮箱地址，填充到Powermail表单的对应邮箱字段中

故障表现 #

跨页面传值逻辑失效：仅当提交按钮自带固定value属性值时，该固定值可被传递到目标页面，普通输入框内用户手动填写的内容无法被携带传递至目标表单字段。

初始问题代码 #

页脚表单初始代码 #

<f:form action="email" pluginName="tx_powermail_pi1" controller="Form" method="post" pageUid="26" class="uk-flex">
<div class="uk-width-1-2">
    <f:form.textfield name="tx_powermail_pi1[field][email]" value="{email}" placeholder="Your email ..." <div class="uk-width-1-2">
    <f:form.button type="submit" value="{email}" name="tx_powermail_pi1[field][email]" class="uk-button uk-button-primary button-newsletter">
        Anmelden
    </f:form.button>
</div>
<f:form.hidden value="1" name="tx_powermail_pi1[type]"/>
<f:form.hidden value="1" name="no_cache"/>
</f:form>

目标页Powermail表单前端渲染代码 #

<form data-parsley-validate="data-parsley-validate" data-validate="html5" enctype="multipart/form-data" name="field" class="powermail_form powermail_form_1"
 action="/newsletter?tx_powermail_pi1%5Baction%5D=create&amp;tx_powermail_pi1%5Bcontroller%5D=Form&amp;cHash=838bac372f487bb18decb49eba8a9643#c35" method="post" novalidate="">
<fieldset class="powermail_fieldset powermail_fieldset_1 nolabel">
    …
    <div class="powermail_fieldwrap powermail_fieldwrap_type_input powermail_fieldwrap_email">
        <label for="powermail_field_email" class="powermail_label" title="">
            Email
        </label>
        <div class="powermail_field">
            <input required="required" aria-required="true"
                   data-parsley-required-message="Dieses Feld muss ausgefüllt werden!" data-parsley-trigger="change"
                   data-parsley-error-message="Keine gültige E-Mail-Adresse!" class="powermail_input"
                   id="powermail_field_email" type="email" name="tx_powermail_pi1[field][email]" value=""></div>
    </div>
    <div class="powermail_fieldwrap powermail_fieldwrap_type_submit powermail_fieldwrap_send  ">
        <div class="powermail_field "><input class="powermail_submit" type="submit" value="Absenden"></div>
    </div>
</fieldset>
<input class="powermail_form_uid" type="hidden" name="tx_powermail_pi1[mail][form]" value="1">
</form>

故障根因 #

提交按钮配置了与邮箱输入框完全一致的name属性值tx_powermail_pi1[field][email]。表单提交时，触发提交动作的按钮自身的name/value会被加入提交参数集，由于参数键名和输入框完全相同，后端处理时后加载的按钮参数值会覆盖前面输入框提交的用户填写值；而按钮本身不接收用户输入，最终导致用户填写的邮箱内容被覆盖，无法正常传递到目标页面。
同时初始代码中页脚邮箱输入框存在标签未闭合、缺少type="email"属性的问题，也可能导致部分场景下传值匹配异常。

修复方案 #

• 移除提交按钮上的name属性及对应绑定的无效value属性，避免同名字段覆盖输入框提交值
• 补全页脚邮箱输入框的标签闭合，添加type="email"属性，同时匹配目标Powermail邮箱字段的ID，保证字段映射一致

修复后可用代码 #

<f:form action="email" pluginName="tx_powermail_pi1" controller="Form" method="post"
        pageUid="26" class="uk-flex">
    <div class="uk-width-1-2">
        <f:form.textfield id="powermail_field_email" name="tx_powermail_pi1[field][email]" value="{email}"
                          placeholder="Your email ..." type="email"/>
    </div>
    <div class="uk-width-1-2">
        <f:form.button type="submit" class="uk-button uk-button-primary button-newsletter">
            Anmelden
        </f:form.button>
    </div>
    <f:form.hidden value="1" name="tx_powermail_pi1[type]"/>
    <f:form.hidden value="1" name="no_cache"/>
</f:form>

调整完成后，页脚输入框内用户填写的邮箱值即可正常跨页面传递，自动填充到Powermail表单的对应邮箱字段中。

内容的提问来源于stack exchange，提问作者MascaraSnake