is it possible to add onclick for a button in a form with action?

Question

I'm trying to add onclick to a button in a form with action. it's a mailchimp action for subscription, so after he click on the button will go to the success page of mailchimp in a new tab, but want also in the page to show a popup alert/div with a message, is it possible to have both? action and onclick for the same submit button?

any ideas how to make this?

UPDATE

My form look like this:

<form action="/" method="post" name="form" target="_blank">
    <h3><span>Subscribe to Newsletter</span></h3>
    <p class="email_first">
        <label for="email">Your Email</label>
        <input id="EMAIL" class="email" type="email" name="EMAIL" value="Your Email Address:" size="30" />
    </p>
    <p class="submit"><button type="submit">Send</button></p>
</form>

JavaScript

function popUp(){
    var popup = document.createElement('div');
    popup.className = 'popup';
    popup.id = 'test';
    var cancel = document.createElement('div');
    cancel.className = 'cancel';
    cancel.innerHTML = 'close';
    cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
    var message = document.createElement('span');
    message.innerHTML = "This is a test message";
    popup.appendChild(message);                                    
    popup.appendChild(cancel);
    document.body.appendChild(popup);
}

Just to make things clear, are you injecting JS code? If so, which means you are using — Alexander, Feb 28 '13 at 20:18
What about writing onClick and within that function submitting the form after the pop up ? — hop, Feb 28 '13 at 20:19
i'm trying something like this in the button: `onClick="popUp();"` but not working, just the action of form is working, it goes to the success page of mailchimp — Abude, Feb 28 '13 at 20:19
Yes, it is possible. However, instead of adding an onclick attribute, you need to bind an event. — Kevin B, Feb 28 '13 at 20:19
@hop yes this will be great to make the popup show first and then submitting the form, how ? thanks! — Abude, Feb 28 '13 at 20:20
QUESTION is update with my form, how can i show the popup first and then when exit or pressing ok, form submits, or any other ideas? — Abude, Feb 28 '13 at 20:22
@Jimmy, [Is this what you want?](http://jsfiddle.net/BgKYs/). I think james emanon's answer is in good track. The only remark is that you should use proper event binding, not inline JavaScript — Alexander, Feb 28 '13 at 20:39

score 2 · Accepted Answer · edited May 23 '17 at 12:25

You should better use proper event binding instead of inline JavaScript. I will borrow an event binding function in JavaScript from Properly bind JavaScript events.

For simplicity, I added an id attribute to the form element.

<form id="form" action="/" method="post" name="form" target="_blank">
  ...
</form>

Bind the onsubmit event to the #form element.

window.onload = function() {
    var popUp = function() {
        ...
    };
    var bindEvent = function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else {
            element.attachEvent('on' + type, handler);
        }
    };
    bindEvent(document.getElementById("form"), "submit", popUp);
}

You can see it here.

Mr. Polywhirl · Answer 2 · 2013-02-28T21:04:56.023

All you have to do is catch the onSubmit() event and stop propagation. This way you can call your own function which after your logic/validation, can submit the form.

<html>
  <head>
  <script type="text/javascript">
    function handleFormSubmit(form) {
      popUp();
      form.submit();
    }

    function popUp() {
      alert("This is a test message");
    }
  </script>
  </head>
  <body>
    <form action="/" method="post" name="form" target="_blank"
          onSubmit="handleFormSubmit(this); return false;">
      <h3><span>Subscribe to Newsletter</span></h3>
      <p class="email_first">
        <label for="email">Your Email</label>
        <input id="EMAIL" class="email" type="email"
               name="EMAIL" value="Your Email Address:" size="30" />
      </p>
      <p class="submit"> <input type="submit" value="Send"/> </p>
    </form>
  </body>
</html>

don't understand exactly how to do it, can you update your answer to match my example code please? thanks a lot! — Abude, Feb 28 '13 at 20:34

score 0 · Answer 3 · edited Feb 28 '13 at 20:33

0

Please forgive if I misunderstand your question.

<form id="whatever" name="someform" action="/something" autocomplete="off" onsubmit="return doSomethingFunc(this);">

and in that function:

function doSomethingFunc(){
     // add whatever behavior you want here
     // if something fails, add return false; to cancel submission

}

This way, you don't have to add an eventHandler on the submit button. The function will run and you can do your magic in there or cancel the submission altogether. It also prevents some race conditions.

edited Feb 28 '13 at 20:33

Mr. Polywhirl

42,981
12
84
132

answered Feb 28 '13 at 20:23

james emanon

11,185
11
56
97

didn't work, i've added onsubmit with a popup div like in the question – Abude Feb 28 '13 at 20:26

score 0 · Answer 4 · answered Feb 28 '13 at 20:59

The thing about <input type="submit"> buttons is that they will always submit the form immediately after any "onclick" code has finished running, unless you it not to. Example:

   onclick='someFunction(); return false'

In you're situation, your "onclick" code is building a popup and displaying it, but as soon as it's displayed, the form submits and the page moves on to the mailchimp page.

What Mr. PolyWhirl suggested is to use an <input type="button"> element instead. These buttons actually don't do anything until you tell them to. This allows you to build some JS functionality that includes the form.submit(); where ever you want the submission to occur.

Based on your code, I think you want something like this:

HTML

<form action="/" method="post" name="form" target="_blank">
   <h3><span>Subscribe to Newsletter</span></h3>
   <p class="email_first">
      <label for="email">Your Email</label>
      <input id="EMAIL" class="email" type="email" name="EMAIL" value="Your Email Address:" size="30" />
   </p>
   <input type="button" value="Send" onclick="popup();/>
</form>

JavaScript

function popUp() {
   var popup = document.createElement('div');
   popup.className = 'popup';
   popup.id = 'test';

   var cancel = document.createElement('div');
   cancel.className = 'cancel';
   cancel.innerHTML = 'close';
   cancel.onclick = function (e) {
      popup.parentNode.removeChild(popup);
      form.submit();
   };

   var message = document.createElement('span');
   message.innerHTML = "This is a test message";

   popup.appendChild(message);                                    
   popup.appendChild(cancel);
   document.body.appendChild(popup);
}

Edit: And, yes, proper binding is important here, but the real issue is that you are trying to stop the submission long enough to display the popup and let the user confirm their action. The best way to do that is really, to not call the action until you are ready to take it. In this case, that is after the user has confirmed it in the popup.

Actually, I think you misunderstood the question. He doesn't want to stop the form submission. Also, the page has a `_blank` target — Alexander, Feb 28 '13 at 21:04
Not stop, but it appears that he wants to delay it long enough for the user to be able to interact with the popup. If he doesn't want the form to submit until after the user is done with the popup, then he really shouldn't initiate the submit until that point. — talemyn, Feb 28 '13 at 21:06
I think you should clarify and confirm that aspect first commenting in OP's question. It's the best course of action, IMHO — Alexander, Feb 28 '13 at 21:07
Ahh, I missed the `_blank` . . . perhaps I was misunderstanding what he was asking . . . — talemyn, Feb 28 '13 at 21:08
@Alexander - I really wanted to, but with a rep of 40, I'm not allowed to comment yet. :/ — talemyn, Feb 28 '13 at 21:09
Well, I just hit 50, so it shouldn't be an issue in the future. LOL :D — talemyn, Feb 28 '13 at 21:11

score 0 · Answer 5 · answered Apr 03 '20 at 18:06

0

What worked for me is instead of using button use a div and onclick for it like this :-

<div onclick="popUp();">Send</div>

answered Apr 03 '20 at 18:06

user8459720

375
3
9

is it possible to add onclick for a button in a form with action?

5 Answers5