Embedded Form Submit Event

Question

I am trying to trigger a function on submit of an embedded form. The form is embedded using javascript. I've tried to target the form with a generic call i.e

$('form').submit(function(){
    alert();
});

This is not working. I also tried to target the embedded submit button using $('#submit_button').on('click', function(){}); but does not work either.

Is this possible?

This form is being loaded with this embed snippet.

<!-- SharpSpring Form for XXX  -->
<script type="text/javascript">
var ss_form = {'account': 'XXX', 'formID':'XXXX'};
ss_form.width = '100%';
ss_form.height = '1000';
ss_form.domain = 'XXXXXX';
// ss_form.hidden = {'Company': 'XXXX'}; 
</script>
<script type="text/javascript" src="https://external-form.js?ver=1.1.1"></script>
<script type="text/javascript">
var __ss_noform = __ss_noform || [];
__ss_noform.push(['baseURI', 'https://']);
__ss_noform.push(['endpoint', '00000-000-0O0O0-000-000OOO00O']);
</script>

If I run this JS through the console

$('form').submit(function(){
    alert();
});

I will get an alert when submitting the form, It just won't fire the event with that code.

You do have JQuery referenced prior to this code, right? And, the final characters at the end of your statements should be a semi-color (`;`), not a color (`:`). — Scott Marcus, Feb 21 '17 at 16:41
You still have a colon at the end of your `submit` method call. This is incorrect. — Scott Marcus, Feb 21 '17 at 16:48
You are not actually showing where the form is added. If I look at https://koi-724ki.sharpspring.com/client/form.js?ver=1.1.1 it seems it document.writes a form into an iframe. You should "inspect element" in Chrome and see where your form actually lives and what the event handlers it has already set look like — mplungjan, Feb 22 '17 at 07:11

score 0 · Answer 1 · answered Feb 21 '17 at 16:43

0

It would be great to see some HTML

If the form is loaded after the event handler, for example with AJAX, you need to delegate:

$(document).on("submit","form",function(){
If the form has ANYTHING named submit (name or ID) then you need to rename those

answered Feb 21 '17 at 16:43

mplungjan

169,008
28
173
236

Scott Marcus · Answer 2 · 2017-02-21T17:06:21.117

-1

Your code does not embed an HTML form at all and so, there is no submit event ever triggered.

This:

<!-- SharpSpring Form for XXX  -->
<script type="text/javascript">
  var ss_form = {'account': 'XXX', 'formID':'XXXX'};
  ss_form.width = '100%';
  ss_form.height = '1000';
  ss_form.domain = 'XXXXXX';
  // ss_form.hidden = {'Company': 'XXXX'}; 
</script>

Declares a variable called ss_form which has a value of a standard JavaScript object. It them creates new properties on that object.

This:

<script type="text/javascript">
  var __ss_noform = __ss_noform || [];
  __ss_noform.push(['baseURI', 'https://']);
  __ss_noform.push(['endpoint', '00000-000-0O0O0-000-000OOO00O']);
</script>

Attempts to set a variable called __ss_noform to either something called __ss_noform or regular JavaScript array.

It then populates the object or array with another array.

To make a form that can be submitted, you'll need an actual HTML <form> element (this can be hard-coded or dynamically created). The element will need to have its action and method attributes set as well.

Of course, if you are using JQuery, you must have JQuery referenced prior to your code.

Here's an example, this code won't work here in the Stack Overflow snippet environment because submitting isn't allowed, but you can see a working version here.

$('form').submit(function(){
    alert();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

  <input type="submit">
</form>

edited Feb 21 '17 at 17:06

answered Feb 21 '17 at 16:44

Scott Marcus

64,069
6
49
71

Please complain on META about the submit sandbox issue. It is REALLY annoying – mplungjan Feb 21 '17 at 16:46
@mplungjan I've never actually use the META site. Can you give me a link? – Scott Marcus Feb 21 '17 at 16:47
yeah, the code here was just a typo. I re-wrote the code for this question and was not a copy and paste. And yes I am referencing jQuery. I am not getting any errors, just cannot fire an event on submit. Thanks for replying. – Juan Rangel Feb 21 '17 at 16:48
http://meta.stackoverflow.com/questions/344191/why-is-form-submit-disabled-in-stack-snippets – mplungjan Feb 21 '17 at 16:48
@JuanRangel As you can see in my Fiddle, this is all you need to make the code work. If it's still not working, then it must be because of other code you have that you aren't showing us. – Scott Marcus Feb 21 '17 at 16:49
Yeah - like the name="submit" or the deferred loading of the form I mention in my answer – mplungjan Feb 21 '17 at 16:51
In your JSFiddle you are using HTML tags. The form is embedded with a JS script. I added it to my question. – Juan Rangel Feb 21 '17 at 16:57
@JuanRangel You are not embedding a form at all. You are declaring an object and an array! – Scott Marcus Feb 21 '17 at 17:01
@JuanRangel You haven't shown us that code. The code you did show does not embed a form into the HTML. – Scott Marcus Feb 21 '17 at 17:07
The question is not how the form is embedded, but rather how to trigger an event from ANY embedded form. The standard `$("form").submit();` does not work. It was just a general question on interacting with an embedded form, and you turned this into a code review. I mentioned in my initial question that `$('form').submit(function(){alert();});` did not work, but you still answered with that. I really do appreciate your input, but you are causing more frustration than the helping. – Juan Rangel Feb 21 '17 at 17:15
It turns out that the question is about how the form is embedded, because you don't seem to have a form and that would explain why the very simple binding to the `submit` event isn't working for you. Understand that binding to a `submit` doesn't change based on how the form got into the DOM. What does matter is that the form gets into the DOM correctly. That is your problem. Sorry, if you don't understand that. – Scott Marcus Feb 21 '17 at 17:19
And, the down vote really just shows that you aren't interested in solving your problem. – Scott Marcus Feb 21 '17 at 17:22
*"I mentioned in my initial question that `$('form').submit(function(){alert();});` did not work"*. No you didn't. You said *"I mentioned in my initial question that `$('form').submit(function(){alert():}):` did not work"* and that's what my initial comments were alluding to because that is a syntax error that would prevent your code from working. – Scott Marcus Feb 21 '17 at 19:29

Embedded Form Submit Event

2 Answers2