CODEWITHSUNDEEP
javascripthtmlcssforms
user8758206
user8758206

Reputation: 2191

Clicking a button to perform 2 actions: file download & signup

I’m trying to make it so that whenever the subscribe button is clicked, it performs the sign up (as in the code demoed) but also downloads a file.

I’ve tried to add onclick="window.location.href=‘#’”, but nothing happens. I’ve considered using javascript but I don’t think the subscribe can work this way but I’m confident the file can open that way.

Is there not a simple way to do this to satisfy both outcomes? Other posts do not include an email sign up, which is causing the problem. Would really appreciate some help ;)

<form action="http://someuniquemailchimpurl.us16.list-manage.com/subscribe/post?u=d6f1&amp;id=9ebc2randomlink" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

    <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

<div id="mce-responses">

        <div class="response" id="mce-error-response" style="display:none"></div>

        <div class="response" id="mce-success-response" style="display:none"></div>

    </div>

    <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">

</form>

Upvotes: 0

Views: 201

Answers (2)

Marco
Marco

Reputation: 2922

You can use event binding and perform two actions. Change post action to download action (or the opposite), then: Using jQuery:

$('#newsletter-button').click(function (e) {
    e.preventDefault();

    //although it will not complete properly, ajax call should be ok to signup url
    $.ajax({
        url: 'URL-FROM-SIGN-UP',
        complete: function () {
            // here we submit the form, get(0) needs because submit() from jQuery does not submit a form
            $('#mc-embedded-subscribe-form').get(0).submit();
        }
    });
});

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25361

First, let me start off by saying that performing two completely different actions using one button is likely not a good idea. However, you know your business better so you decide, but consider this advice. If you still want to go with that, you have several options, but all of them involve JavaScript.

Before we go with the options, I recommend removing target="_blank" from your form tag. I removed it in my examples below.

One option is to use the onclick event like you're trying to do. The way you're doing it will not work because it will reload the page and the subscription event will not happen. You will need to download the file in a popup window. Here is an example:

<form action="http://someuniquemailchimpurl.us16.list-manage.com/subscribe/post?u=d6f1&amp;id=9ebc2randomlink" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
<input type="submit" onclick="downloadFile()" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
<script type="text/javascript">
    function downloadFile() {
        var dw = window.open();
        dw.location.href = "the_file_url";
    }
</script>

Another option is to download the file when the form is submitted using the onsubmit event on the form tag. Here is an example:

<form action="http://someuniquemailchimpurl.us16.list-manage.com/subscribe/post?u=d6f1&amp;id=9ebc2randomlink" method="post" onsubmit="downloadFile()" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
<script type="text/javascript">
    function downloadFile() {
        var dw = window.open();
        dw.location.href = "the_file_url";
    }
</script>

Upvotes: 1

Related Questions