如何在页面中处理两种相同的形式?

时间:2018-12-05 20:52:00

标签: jquery wordpress html5 forms

我正在用WordPress开发一个登陆页面,该页面两次输出相同的CF7表单,一次在页面顶部,一次在页面底部。我遇到了一些问题,主要是因为ID重复,例如,我无法设置按ID选择输入掩码,并且由于其他页面使用了这种形式,所以我希望它可以是相同的形式,尤其是如果发生变化,请放一个地方。

3 个答案:

答案 0 :(得分:0)

您可以使用class代替id, 然后将事件侦听器添加到两者中

让$ forms = $('。form-class')

$ forms.on('submit',function(){...})

答案 1 :(得分:0)

我不确定您要解决的问题到底是什么,但是如果您想在同一页面上区分两个CF7表单并选择输入,则可以执行以下操作:

  • 将表单嵌入两次,或者将它们都包装在具有唯一ID的div中
  • 使用父级选择表单输入,例如:var select=document.querySelector("#form1 > #input");(或querySelectorAll)。

示例:

<html>
  <body>
    <div id="form1"><p id="test">Content1</p>
    <div id="form2"><p id="test">Conten2t</p>
  </body>
</html>

然后JS document.querySelector("#form1 > #input");将选择第一个嵌套子级。

(最好的解决方案可能是id是否唯一,但我不知道CF7是否支持多次嵌入表单同时保留唯一的id。还是基于其他(自定义)属性和父级选择输入。 )

答案 2 :(得分:-1)

如果您使用的是jQuery,请改为给表单一个类,您可以执行jQuery('。form_id')。first()。whatever_function_you_want_to_call()并获取最后一个表单,将first()替换为last()