In a form I have 2 <select multiple> elements. First one is filled with <option> itens in server-side.
I have then developed a JavaScript code to move itens from one to another. That's a basic multiselect feature.
Now I must send second select's values back to server when form is submitted. But it only sends itens that are selected. That's not the behavior I need, I want all existing itens to be sent. Any idea how to implement it, preferably without using Ajax?
I ended up not implementing it. But if I would I'd just try to get all select's values into an array, JSON marshal them and put the string into the input hidden. I'd try to do it in form's submit event.
Related
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>
Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?
Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)
One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.
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.
In my rails application, i am displaying some records. I am using pagination for records..
i have a javascript function to select all the checkboxes associated with a record..But it selects checkboxes of only current page. I want to have a feature where i can select all the checboxes of current page and then move to next page selec there and then submit all of them together.
I'd say hopping between pages and selecting everything is way too tedious and extremely error prone.
Have your "Check all" function submit something like a yourform[check_all]=true parameter to your controller (via ajax or plain HTTP POST) and have your controller handle the requested action on all relevant records.
Recently I have done the same task as you. I am using table with Ajax pagination, so I can remember all checked positions in array or other object. Then I've added on-click handler to submit button where hidden fields are adding to form to make the same effect as missing checkboxes.
I was wondering how to go about form validation in rails. Specifically, here is what I'm trying to do:
The form lets the user select an item from a drop down menu, and then enter a number along with it. Using RJS, the record instantly shows up in a table below the form. Resetting the form with AJAX isn't a problem.
The issue is, I don't want the person to be able to select the same item from that drop down menu twice (in 1 day at least). Without using ajax, this isn't a problem (as I have a function for the select statement currently), but now that the page isn't reloading, I need a way to make sure people cant add the same item twice in one day.
That said, is there a way to use some javascript/ajax validation to make sure the same record hasn't been submitted during that day, before a duplicate can be created?
Thanks in advance!
Elliot
With regards to form validations, for your special logic, you'll want to override #validate in your model. See the docs for ActiveRecord::Validations#validate.
Your best bet to "make sure people cant add the same item twice in one day" is to not present the user with options that they can't select. When your controller prepares data for the view have logic that filters out any options that the user shouldn't have (i.e. those they already selected that day). Or present them but disable them as options (so they are grayed out). If the user could select the same option twice in one request you'll want some JS to do client-side validation before a POST to the server.