How to add data from link click to form field

I'm building a site that offers a number of downloads in return for email addresses. When each of the downloads are clicked it brings up a pop-up form where the user can enter their email address to get their download.

Something like this (https://jsfiddle.net/8frqbgmz/):

<!-- LINKS -->

<a href="#1">Download #1</a>

<a href="#2">Download #2</a>

<a href="#3">Download #3</a>



<!-- FORM -->

<form>

    <label for="link">Link that's been clicked:</label>

    <input type="text" name="link">

</form>

What I'd like to do is populate this 'link' field with the details of which of the links the user has clicked on.

I'm guessing this may be done by adding some extra info to each of the links and then creating a script that populates the 'link' field with the info when the link is clicked, but I've no idea how to do that.

Any ideas would be appreciated,

Thanks in advance,

Tom

edited Jan 18 at 14:18

asked Jan 17 at 17:33

Tom Perkins

2791514

Provide a Minimal, Complete, and Verifiable example

– zer00ne
Jan 17 at 17:48

Maybe take a look at bootstrap modals

– Davy de Vries
Jan 18 at 14:25

1

I added a simple JS example to your fiddle, maybe that'll gives you a hint: jsfiddle.net/c1j9wa64/2

– Steffen Roßkamp
Jan 18 at 14:30

To add to Steffen's fiddle you'd probably want to preventDefault() and catch the href in the jQuery on click. You can then capture the href to both display it exactly how Steffen has it, and also spawn the download from another window perhaps using window.location.assign(href) or window.open(href)

– Zenkylo
Jan 18 at 15:52

That's really helpful everyone, especially @Steffen Roßkamp. I've added my exact solution below in case it helps anyone else in future.

– Tom Perkins
yesterday

add a comment |

Something like this (https://jsfiddle.net/8frqbgmz/):

<!-- LINKS -->

<a href="#1">Download #1</a>

<a href="#2">Download #2</a>

<a href="#3">Download #3</a>



<!-- FORM -->

<form>

    <label for="link">Link that's been clicked:</label>

    <input type="text" name="link">

</form>

What I'd like to do is populate this 'link' field with the details of which of the links the user has clicked on.

Any ideas would be appreciated,

Thanks in advance,

Tom

edited Jan 18 at 14:18

asked Jan 17 at 17:33

Tom Perkins

2791514

Provide a Minimal, Complete, and Verifiable example

– zer00ne
Jan 17 at 17:48

Maybe take a look at bootstrap modals

– Davy de Vries
Jan 18 at 14:25

1

I added a simple JS example to your fiddle, maybe that'll gives you a hint: jsfiddle.net/c1j9wa64/2

– Steffen Roßkamp
Jan 18 at 14:30

To add to Steffen's fiddle you'd probably want to preventDefault() and catch the href in the jQuery on click. You can then capture the href to both display it exactly how Steffen has it, and also spawn the download from another window perhaps using window.location.assign(href) or window.open(href)

– Zenkylo
Jan 18 at 15:52

That's really helpful everyone, especially @Steffen Roßkamp. I've added my exact solution below in case it helps anyone else in future.

– Tom Perkins
yesterday

add a comment |

Something like this (https://jsfiddle.net/8frqbgmz/):

<!-- LINKS -->

<a href="#1">Download #1</a>

<a href="#2">Download #2</a>

<a href="#3">Download #3</a>



<!-- FORM -->

<form>

    <label for="link">Link that's been clicked:</label>

    <input type="text" name="link">

</form>

What I'd like to do is populate this 'link' field with the details of which of the links the user has clicked on.

Any ideas would be appreciated,

Thanks in advance,

Tom

edited Jan 18 at 14:18

asked Jan 17 at 17:33

Tom Perkins

2791514

Something like this (https://jsfiddle.net/8frqbgmz/):

<!-- LINKS -->

<a href="#1">Download #1</a>

<a href="#2">Download #2</a>

<a href="#3">Download #3</a>



<!-- FORM -->

<form>

    <label for="link">Link that's been clicked:</label>

    <input type="text" name="link">

</form>

What I'd like to do is populate this 'link' field with the details of which of the links the user has clicked on.

Any ideas would be appreciated,

Thanks in advance,

Tom

jquery forms hyperlink

edited Jan 18 at 14:18

asked Jan 17 at 17:33

Tom Perkins

2791514

edited Jan 18 at 14:18

asked Jan 17 at 17:33

Tom Perkins

2791514

edited Jan 18 at 14:18

asked Jan 17 at 17:33

Tom Perkins

2791514

asked Jan 17 at 17:33

Tom Perkins

2791514

asked Jan 17 at 17:33

Tom Perkins

2791514

Provide a Minimal, Complete, and Verifiable example

– zer00ne
Jan 17 at 17:48

Maybe take a look at bootstrap modals

– Davy de Vries
Jan 18 at 14:25

1

I added a simple JS example to your fiddle, maybe that'll gives you a hint: jsfiddle.net/c1j9wa64/2

– Steffen Roßkamp
Jan 18 at 14:30

To add to Steffen's fiddle you'd probably want to preventDefault() and catch the href in the jQuery on click. You can then capture the href to both display it exactly how Steffen has it, and also spawn the download from another window perhaps using window.location.assign(href) or window.open(href)

– Zenkylo
Jan 18 at 15:52

That's really helpful everyone, especially @Steffen Roßkamp. I've added my exact solution below in case it helps anyone else in future.

– Tom Perkins
yesterday

add a comment |

Provide a Minimal, Complete, and Verifiable example

– zer00ne
Jan 17 at 17:48

Maybe take a look at bootstrap modals

– Davy de Vries
Jan 18 at 14:25

1

I added a simple JS example to your fiddle, maybe that'll gives you a hint: jsfiddle.net/c1j9wa64/2

– Steffen Roßkamp
Jan 18 at 14:30

To add to Steffen's fiddle you'd probably want to preventDefault() and catch the href in the jQuery on click. You can then capture the href to both display it exactly how Steffen has it, and also spawn the download from another window perhaps using window.location.assign(href) or window.open(href)

– Zenkylo
Jan 18 at 15:52

That's really helpful everyone, especially @Steffen Roßkamp. I've added my exact solution below in case it helps anyone else in future.

– Tom Perkins
yesterday

Provide a Minimal, Complete, and Verifiable example

– zer00ne
Jan 17 at 17:48

Maybe take a look at bootstrap modals

– Davy de Vries
Jan 18 at 14:25

I added a simple JS example to your fiddle, maybe that'll gives you a hint: jsfiddle.net/c1j9wa64/2

– Steffen Roßkamp
Jan 18 at 14:30

To add to Steffen's fiddle you'd probably want to preventDefault() and catch the href in the jQuery on click. You can then capture the href to both display it exactly how Steffen has it, and also spawn the download from another window perhaps using window.location.assign(href) or window.open(href)

– Zenkylo
Jan 18 at 15:52

That's really helpful everyone, especially @Steffen Roßkamp. I've added my exact solution below in case it helps anyone else in future.

– Tom Perkins
yesterday

add a comment |

1 Answer
1

active

oldest

votes

Cracked it thanks to Steffen's comment above.

Here's a fiddle and code snippet showing the solution that worked for me, hopefully it helps someone else looking to do the same in the future:

https://jsfiddle.net/L271scn9/1/

<!-- LINKS -->

<a href="#ebooks_form_popup" id="Title of the first ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the second ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the third ebook" class="fancybox_no_padding visible_link">Download for free</a><br><br>



<!-- FORM -->

<form>

    <label for="email">Email Address:</label><br>

    <input type="text" name="email"><br><br>

    <label for="link">Link that's been clicked:</label><br>

    <input type="text" name="link">

</form>



<!-- SCRIPT -->

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $("a.visible_link").on("click", function(event) {

            $("[name="nf-field-33"]").val(event.target.id);

        });

    });

</script>

answered yesterday

Tom Perkins

2791514

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54241348%2fhow-to-add-data-from-link-click-to-form-field%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Cracked it thanks to Steffen's comment above.

Here's a fiddle and code snippet showing the solution that worked for me, hopefully it helps someone else looking to do the same in the future:

https://jsfiddle.net/L271scn9/1/

<!-- LINKS -->

<a href="#ebooks_form_popup" id="Title of the first ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the second ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the third ebook" class="fancybox_no_padding visible_link">Download for free</a><br><br>



<!-- FORM -->

<form>

    <label for="email">Email Address:</label><br>

    <input type="text" name="email"><br><br>

    <label for="link">Link that's been clicked:</label><br>

    <input type="text" name="link">

</form>



<!-- SCRIPT -->

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $("a.visible_link").on("click", function(event) {

            $("[name="nf-field-33"]").val(event.target.id);

        });

    });

</script>

answered yesterday

Tom Perkins

2791514

add a comment |

Cracked it thanks to Steffen's comment above.

Here's a fiddle and code snippet showing the solution that worked for me, hopefully it helps someone else looking to do the same in the future:

https://jsfiddle.net/L271scn9/1/

<!-- LINKS -->

<a href="#ebooks_form_popup" id="Title of the first ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the second ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the third ebook" class="fancybox_no_padding visible_link">Download for free</a><br><br>



<!-- FORM -->

<form>

    <label for="email">Email Address:</label><br>

    <input type="text" name="email"><br><br>

    <label for="link">Link that's been clicked:</label><br>

    <input type="text" name="link">

</form>



<!-- SCRIPT -->

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $("a.visible_link").on("click", function(event) {

            $("[name="nf-field-33"]").val(event.target.id);

        });

    });

</script>

answered yesterday

Tom Perkins

2791514

add a comment |

Cracked it thanks to Steffen's comment above.

Here's a fiddle and code snippet showing the solution that worked for me, hopefully it helps someone else looking to do the same in the future:

https://jsfiddle.net/L271scn9/1/

<!-- LINKS -->

<a href="#ebooks_form_popup" id="Title of the first ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the second ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the third ebook" class="fancybox_no_padding visible_link">Download for free</a><br><br>



<!-- FORM -->

<form>

    <label for="email">Email Address:</label><br>

    <input type="text" name="email"><br><br>

    <label for="link">Link that's been clicked:</label><br>

    <input type="text" name="link">

</form>



<!-- SCRIPT -->

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $("a.visible_link").on("click", function(event) {

            $("[name="nf-field-33"]").val(event.target.id);

        });

    });

</script>

answered yesterday

Tom Perkins

2791514

Cracked it thanks to Steffen's comment above.

Here's a fiddle and code snippet showing the solution that worked for me, hopefully it helps someone else looking to do the same in the future:

https://jsfiddle.net/L271scn9/1/

<!-- LINKS -->

<a href="#ebooks_form_popup" id="Title of the first ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the second ebook" class="fancybox_no_padding visible_link">Download for free</a><br>

<a href="#ebooks_form_popup" id="Title of the third ebook" class="fancybox_no_padding visible_link">Download for free</a><br><br>



<!-- FORM -->

<form>

    <label for="email">Email Address:</label><br>

    <input type="text" name="email"><br><br>

    <label for="link">Link that's been clicked:</label><br>

    <input type="text" name="link">

</form>



<!-- SCRIPT -->

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $("a.visible_link").on("click", function(event) {

            $("[name="nf-field-33"]").val(event.target.id);

        });

    });

</script>

answered yesterday

Tom Perkins

2791514

answered yesterday

Tom Perkins

2791514

answered yesterday

Tom Perkins

2791514

answered yesterday

Tom Perkins

2791514

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku