javascript - 单击链接时将信息传递到表单输入

Question

我有一些看起来像这样的 html:

<h3 class="basic left-top-border-radius">Basic<br /> 500<span>$25</span></h3>
    <a class="signup colorbox" href="#text-signup-form">More Info</a>

当单击“更多信息”时，会弹出一个灯箱，其中包含一个简单的信息请求表单。这是我的问题。我希望当单击链接时将 h3 header 的文本传递到隐藏的表单输入字段，以便我知道他们单击了哪个计划以获取更多信息。

输入看起来像这样:

<input type="text" class="cat_textbox" id="CAT_Custom_440761" name="CAT_Custom_440761" maxlength="1024" />

我如何使用 jQuery 来做到这一点？ (我想过使用 jQuery .text() 方法，但我读到该方法不适用于表单，而且我不知道如何传递 h3 文本。

注意页面上有多个h3元素。

Answer 1

您可以使用此代码执行以下操作。

$('.signup').click(function(){
    var planTitle = $('h3').text();

    $('#CAT_Custom_440761').val(planTitle);
});

当您单击该按钮时，它将搜索 h3 标签(最好将 ID 附加到 h3 标签)，抓取该元素的文本并将其插入到输入字段的值中。

如果您无法将 ID 附加到 h3 标记，您可以搜索 h3 的上一个实例并从中获取文本。

$('.signup').click(function(){
    var planTitle = $(this).prev('h3').text();

    $('#CAT_Custom_440761').val(planTitle);
});