Form inside a Form Submit Button Triggers Both - javascript

I have a form to show a user's profile and allow changes to it and inside this form I also have a button to show a modal with a form to change the password (form inside a form).
When I click the button to submit the inner form it is submitting both. I know this can be fixed by using type="button" and adding an onClick event to the button that submits the form but if I do that I am also disabling the functionality of being able to submit the form by pressing the enter key.
The other option is to place the button with the modal outside of my form but I want to avoid doing that if possible because I would have to also change the styling.
Is there a better option? Which is the optimal option?

Unfortunately,
(form inside a form).
nested forms are not allowed per HTML specification, the result is invalid HTML output.
I would suggest to go with the following option, even if it's more work:
The other option is to place the button with the modal outside of my form
Per W3C spec:
Flow content, but with no form element descendants.
Relevant stackoverflow discussion:
Can you nest html forms?

Related

Is it possible to add a keyup listener to a form tag to trigger the submit event even if there is no submit button?

Consider a HTML-form, which includes several input fields and an icon from the material-icons library. I have added a click-listener to the icon, such that the form is submitted when clicking on the icon.
Now I want to go ahead and also add a keyup-Listener, such that the form will be submitted whenever I hit the 'Enter'-key. I was trying to just add this listener to the form-element. This doesn't work, however.
I am afraid that I might have to add this event-listener to each of my input fields and am curious on as there is another way of achieving what I want? Note, though, that I don't have a submit-button, I only have the icon.

Symfony 3 Pagination Form Data

i have a problem.
I use Symfony 3 for my project. In my project i have a litte pagination.
See: http://getbootstrap.com/components/#pagination-pager
On these two buttons i use the href attribute to navigate between sites.
This works perfect. But now comes the problem.
On every page are a few input fields of which i need the values.
But the pager "buttons" are links, so if i click on one "button" the form will not be submitted.
If i change the links to real buttons, the form will be submitted, but i can't change the page, because there is ne href attribute.
I know i have to set the location in the action attribute of the from, but then i can't navigate backwards or forwards.
So what can i do to get the form params and navigate forwards and backwards?
I hope you understand my problem.
If you want to go backwards and forwards, you don't want a submit button for each page. You only want a submit button at the end, which will submit your whole form (all the pages).
What you should do is:
Put your pagination and your pages inside a big <form> tag, with an action attribute if needed.
Inside your pages, put your form fields.
For the last page of your form, you "Next" link must be replaced by a submit button.
That way, when you submit your form in the last page, all the fields of your different pages will be submitted at once. And you still can navigate backwards and forwards inside your form before submitting.

change a select value and submit a form with php and javascript

I have some link buttons on the page beneath my form, within the form container is a dropdown box and a submit button, depending on what link below the form is clicked i wish to change the select and submit the form. Note i am not looking for change select and autosubmit types of solutions, just i click the link it changes the select option and then submits this selected value with the form. I also am not interested in a solution which uses hidden fields as the action to deal with the form is already functioning as required.
Craig

How to submit a form on enter that doesn't have a submit button?

I have a form whose submit "button" is actually a link. Is there a way to submit this form automatically on enter, other than attaching an event handler to check for Enter keypresses? It just seems a little wasteful to me.
I have tested in Chrome and Firefox, it appears that pressing enter in a form field will submit it, whether or not a submit button is present.
If you've found a browser where that isn't the case, you may want to try a submit button in a hidden div, or CSS positioned off-screen.
Or stick to conventions and use a submit button :P
Throw some jquery on there and submit the form with it:
$("form#formID").submit();

submit all input elements on a page

Is there an easy way to submit all input elements on a page?
I have a very customisable page where the user can add and remove rows from multiple tables. The rows contain various different input elements. Do I have to put each table inside a form and then on submit have javascript to submit all the forms?
If you want to submit all input elements, it's sufficient to have only one <form> that encircles them all. Calling form.submit() from JS or with a classic submit button then catches all input fields.
If you want a dynamic selection by the user, let her put inputs inside the form element for submission and outside to keep them where they are. This can be achieved with JavaScript.
Just put one form on the page that contains all your tables and inputs and submit that – you cannot submit more than one form at a time.

Categories