Develop Reference

Handle form submission (by pressing enter etc.) from particular form fields only

I have a complex form with many different types of fields and a submit button. As far as I'm aware, a form can be submitted by clicking the submit button, by pressing Enter in certain form fields (for example text input fields), and on mobile devices by pressing the submit button on the on-screen keyboard. There may be more ways to submit the form that I'm not aware of.
I would like to register a separate (JavaScript) submit handler that applies when the form is submitted only within a certain section of the form. Pressing the submit button or submitting the form from a form field outside of the special section should call the regular submit handler, but submitting the form from a form field inside the special section should call another handler. One particular challenge in my case is that some of my form fields are rendered by third-party React components, and I don't have the possibility to control their DOM.
I could come up with ideas that go in the following directions:
Somehow find out from which form element the form was submitted, and check whether that element is within the special section. The problem is that I have not been able to find a way to detect the originating form field on the submit event.
Use nested forms and put the special form group in its own form with its own submit button and submit event handler. The problem is that there seems to be no supported way of nesting forms in HTML.
Use the form attribute on each input field within the special form group and point it to a separate form with its own submit button and submit event handler. I am assuming that this would produce the desired behaviour. Unfortunately, I cannot add this attribute to all input fields, since I don't control their DOM.
React to keydown events with key set to Enter. The first problem is that pressing Enter only submits the form in certain cases. For example, pressing enter in a text input submits the form, but pressing enter in a textarea or a button input does not. In some cases such as a file input (which sometimes consists of a text field and a button) I'm not even sure and the behaviour between browsers is probably inconsistent. So I don't know under what conditions even to call the submit handler. The second problem is that I assume that this does not take other submission methods into consideration, such as the submit key on touch devices.
Is there a good way to catch the form submission from within a certain section of the form only?

Can't submit upload form in Selenium, Page just refreshes

I am trying to upload an image to instagram's mobile website through selenium. It seems to find the element in question but when I try to submit it, the page merely refreshes.
uploadForm=driver.find_element_by_xpath('//*[#id="react-root"]/section/nav/div/div/form/input')
driver.execute_script("arguments[0].style.height='auto'; arguments[0].style.visibility='visible';", uploadForm)
#makes form visible
submitForm = driver.find_element_by_xpath('//*[#id="react-root"]/section/nav/div/div/form')
#selects whole form
driver.execute_script("arguments[0].style.height='auto'; arguments[0].style.visibility='visible';", submitForm)
#unhides form as well
uploadForm.send_keys("/testman.JPG")
#sends the file path to the input section of form
submitForm.submit()
#attempts to submit form, causing the refresh
Could there be some kind of JS listener preventing me from uploading this way? Here is the code of the form in question

Try doing a .click() on the submit button. Frequently, a dev will put a JavaScript onclick on the button that prevents the default action. You can see the default action for the form when the page "refreshes". The URL will contain your form as query-string parameter.

Submit Lotus Notes XPage form from outside with plain JS

I have a simple Lotus Notes XPage with only an editable RichText dialog that is embedded in a bigger form using an iframe.
The bigger form has a submit button, which triggers some javascript and finally a notes agent which saves all non-richtext values that are inside the bigger form.
Of course the user shall not have to use two submit buttons, so I won't have a (visible) submit button for the XPage. Instead, I want to use javascript to tell the iframe to submit the form.
Using iframe.document.forms[0].submit() does not work - the form is indeed submitted to the Notes server, but XPages won't save the changes I made.
Using a simple XPage button with the action "Save Data Sources", saving works like a charm, but I don't want the user to have to click two buttons in the correct order.
I also tried the following javascript code to fill some invisible fields with the values that IBM submits to the server, but this does not help either:
iframe.document.forms[0].elements["view:_id1:inputRichText1_h"].value = iframe.document.forms[0].elements["view:_id1:inputRichText1"].value;
iframe.document.forms[0].elements["view:_id1:inputRichText1_mod"].value = true;
iframe.document.forms[0].elements["$$xspsubmitid"].value="view:_id1:_id4";
iframe.document.forms[0].elements["$$xspsubmitscroll"].value="0|0";
iframe.document.forms[0].submit();
So now I ask you: how to correctly submit that form content, without the user actually clicking the XPages button? Can I programmatically trigger a click on that button, which would be indifferent from a human actually clicking, except for the human?

have an ordinary div with a fixed id and inside this div have a computedtext that will compute the clientsideid of the "save button" and return that inside the div
and use this clientside js code to do the actual click
var id=iframe.document.getElementById("button").innerHTML
var button=iframe.document.getElementById(id)
button.click()

costum redirect after submit

I have this form: http://lawb.co.il/HTMLPage.html
When someone click on the submit button ("שלח טופס" ) they are automaticaly redirected.
How can I prevent this action after clicking on the "שלח טופס" button, or that the page will redirect to a page that I choose and still I will get the information that people fill in the form?
The code is here http://jsfiddle.net/TCpkb/4/
Can you help me with it pleas?

You need to submit using AJAX and then redirect manually to your custom page. If you cannot use JavaScript, there is unfortunately no way to control the redirection if you let the user directly submit the HTML form.

Dojo - finding out which button was clicked on submitting a form

If I connect to my form's onSubmit event, how can I find out which button on the form was used for submit? Or, if the form was submitted by pressing the Enter key on an element, how can I find out which element was in focus?
I cannot rely on ExplicitOriginalTarget property of the event object, as this is Mozilla-specific.
Any suggestions?

Don't use submit buttons, you can easily run a script when a button is pressed, in that script you may submit the form (simply call the forms .submit() method), that way you will easily know what button was pressed, and any submit not originating from your code must then of course originate from the user pressing enter.