submit all input elements on a page - javascript

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.

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?

How to disable submit in AngularJS in following scenario?

I am having some trouble with disabling Submit button in a HTML form in AngularJS.
Scenario:
I am selecting a certain process from a HTML Select Box ie. Drop
Down List
Once I select some entry from that, the lower portion is
automatically populated with the required form which again has a set
of inputs
Once you fill in these value, you can either Submit or Cancel the request
Condition:
There is a process in the list where I need to upload 1 or more files along with other input parameters. To do this, I am using a two step approach where I first Choose a File using a button and then I use another button to Upload the file. Clicking on this button makes a REST call and the file is sent to the required target.
I am using ng-file-upload directive from https://github.com/danialfarid/ng-file-upload to accomplish this.
Problem:
I was initially using ng-disabledto disable submit button on the condition that All mandatory input elements are filled and all input validations are passed. Now the problem occurs when I am in the use cases which need files to be uploaded. When I choose a file and upload it, HTML treats that element as empty as the file is already sent to its target and hence fails the validation All mandatory input elements are filled! If I remove this validation, my form expectedly get submitted even if Mandatory fields are empty.
So what can I do in this case to disable my submit button?
Create a boolean variable as what #ShashankVivek said.
if file uploaded $scope.uploaded = true.
so your button should look like this
<button data-ng-disabled="!form.valid && !uploaded">Submit</button>

Cloned elements values not returned on Submit of form in Rails

I have a form in which the fields are cloned to add the fields to the form dynamically. I'm also removing some of the fields from form.
All addition and removal of elements are done using javascript and jquery using clone(), append() and remove() methods.
But on submit of form the values of the fields added dynamically are not returned in parameter list on submit of form. The values of fields removed still appear in parameters list.
What I observe is the dynamically added or removed elements are not recognized by rails and considering only the elements present in form initially when page was loaded.
Can any one suggest why is this behavior seen.

Selective submission of form elements

I have a form that has hidden elements in it to create a pseudo-array of comma-separated values that will be submitted to the server through post, where the hidden elements will then be decoded into arrays and processed for storage. To fill the hidden elements, I use visible elements and a button that javascript handles to add values to the hidden elements, clearing the form every time the button is pressed.
Here is the question: How do I get the visible elements NOT to be submitted to the server and only submit the hidden elements in an effort to save bandwidth? Is there a way to create a text entry field that doesn't get submitted with the rest of the form, but that javascript and normal form controls can still access? The goal here is to prevent unnecessary repeats of the same data being sent when the submit button is clicked, AFTER javascript has filled the pseudo-arrays with the data I need.
EDIT: Thanks for the help. The first two answers I got were good, but I chose as an answer the one I thought was a little more detailed and helpful to myself and anyone else who may be looking for the same solutions.
PLAN: I'll have an onsubmit script that disables unneeded fields just before submit so that they don't get sent to the server, thereby saving (a tiny bit of) bandwidth and reducing the amount of information my server-side script needs to do. This keeps it possible to easily use javascript to clear the fields I want cleared while constantly keeping the hidden fields loaded with the CSV's I need.
There are two provabilities that I can think of now:
Put visible input elements outside form tag, leave only submit button and hidden fields inside.
Create an event onsubmit on form element to set disabled property on visible fields. On some browser that may require to additionally remove that event, return false and trigger form submission manually.
You can set the "disabled" property of the elements to true in order to prevent them from being submitted.

Deselecting a form input and waiting for a function before submitting

I have a form with an input field where a user enters a unique identifier. I then have some jQuery code that upon the user moving away from the input field (blur) goes out and fetches details about the part and populates some fields on the page. The problem is if the user clicks the submit button before moving out of the input field the jQuery code never has a chance to load in the data and populate the necessary fields. Whats the best way to go about doing this? I thought about maybe setting the focus to body and then having an infinite loop that keeps checking the page until all fields that should be filled in have been filled in but I feel like some sort of event based solution would be better than unpredictable infinite loops. Any ideas?
Give the form an onsubmit event.
Have that event return false unless all the form fields are populated correctly.
In jQuery:
$("#formname").submit(function()
{ if (condition_not_met) return false; });
This will block the form from submitting until everything is in place.
The blocking will not work with JavaScript disabled, but seeing as you're using Ajax to fetch the correct fields, that probably won't matter.
I'm guessing you are making an ajax call in the blur function?
Could you disable the submit button (either on page load or on blur), and then enable it in the ajax callback?

Categories