Question

I have some html that looks as so:

<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>

When More Info is clicked a lightbox pops up with a simple info request form. Here is my problem. I would like when the link is clicked to have the text of the h3 header passed to a form input field that is hidden so I know which plan they clicked on for more info.

The input looks like so:

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

How would I do this using jQuery? (I thought of using jQuery .text() method but I read that does not work with forms and I do not know how to pass the h3 text anyway.

NOTE There are multiple h3 elements on the page.

Answer 1

You can do the following with this code.

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

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

As you click on the button it will search for the h3 tag (would be better to attach an ID to the h3 tags) grab the text of that element and insert it into the value of the input field.

If you aren’t able to attach an ID to the h3 tag you can search for the prev instance of h3 and take the text from that.

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

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