Symfony 3 Pagination Form Data - javascript

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.

Related

Form inside a Form Submit Button Triggers Both

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?

When Gravity Form is submitted then reveal content on same page

Using Wordpress with Divi Theme.
When Gravity Form submit button is pressed and submitted I also want it to reveal a section on the same page. Like a toggle reveal that submits the form at the same time.
I Enabled AJAX so the page doesn't refresh after submission but don't know how to reveal a section of page and submit at the same time. Any help welcome Thanks.
There are a few ways to do this. The easiest would be to put the section you want to reveal in the confirmation box within gravity forms. Alternatively you can have the confirmation process re-direct to a specific page that has the same information as your first page, but with the new content on it as well. Finally, (most complex but also most secure) you can setup the gravity forms to also add the user to a member group (using the "Groups" plugin), then have that groups plugin show and hide info based on group membership.

missing appended elements on window.history.back()

I have a simple form in my html page.
User can add elements in my form via append jquery function. It works fine, but if the form is submited and user is redirected to another page and goes back via window.history.back(), appended elements are missing.
Can you help me, how to save the page state before submit form to prevent missing appended elements?

Making get/post requests to bootstrap modals. How?

I am having a really difficult time trying to make a request and communicate with modals from other websites. For regular html you can see the hyperlink when hovering over the link or find out all about the element when inspecting, but with modals it seems like all the code is hidden on their website somewhere, making me unable to send http get/post requests correctly.
For ex when theres a button called "View containers" it opens up a modal and then theres a textarea field and a submit button. I know the ID of the text field, but there is like zero information on the submit button or where the submit button can lead to. I want to make a script that automatically sends a request , enter in the container # and clicks submit. But I dont know how to make the script click/send submit button
First, you'd want to change the input value
You can click buttons using the DOM click method after selecting it, probably using IDs
Additionally, I'd ensure the modal was put into the DOM before trying to insert values, or press submit...modals may not be inserted to the DOM until they are triggered/loaded.

Back button which goes back to filled in form

Is there a way to add a Back button which reloads a form with the inputs filled in?
I have a form with some input fields and a save (submit) button. When clicking submit, if the mandatory fields aren't filled in, a new page opens with a message. If I use the browser's Back button, I receive this message:
Confirm Form Resubmission
This webpage requires data that you entered earlier in order to be
properly displayed. You can send this data again, but by doing so you
will repeat any action this page previously performed. Press the
reload button to resubmit the data needed to load the page.
ERR_CACHE_MISS
So basically, it asks me to Refresh, and then confirm by clicking OK on a pop up window, after which the form reloads but with empty fields.
I have tried thinking of everything, but I can't find a solution. Thanks.
If it's possible, I would change the structure so that the form posts back to itself, and runs the validation of the mandatory fields. Then, if everything's ok, it will continue whatever processing is necessary. If there's a problem, it can show the form again, but in your code you will have access to the values already submitted, so you can pre-populate the form with these values and then display it to the user. It's a pretty standard design technique for this sort of thing.

Categories