I am developing a web application. I have a page with a form, form1, and I am pushing another page which also has a form, form2, inside form1. Both the forms have some values. I want to serialize both the forms. When I specify the root form (form1) like $('#form1').serialize(); it serializes the root form (form1) only, not form2.
If specify like this $('#form1, #form2').serialize(); and $('form').serialize(); it sealizes all the forms.
What is wrong with this jQuery $('form1').serialize(); which serializes root form only, not form2?
I tried with a jsFiddle example, in which it works fine. What could be the issue in my web application form?
Nested forms are not allowed in HTML. jQuery isn't designed to handle them. Don't create them.
Even it is not supported for your purpose you can use :input selector.
$('#form1 :input').serialize();
for the performance using filter highly recomended.
$('#form1 > *').filter(':input').serialize();
If you can explain why you are using nested forms maybe we can suggest some workaround. for example if you only use the second form for AJAX request you can cover it by a div to easily select or give those form items an extra class and use the similar selector for them.
Related
I have a form with many different input fields (some of them are not really input but behave as inputs).
When submitting the from from the regular button click each field is validated through angular validation and html - such as required, ng-maxlength, minlength, etc..
Now we want to add a shortcut to submit the form on keyboard click. That code is running from the controller behind the html. How can I check the validity of the form from there? I know I can get the form by document.forms["myForm"] but can I use that somehow to check the validity same way as .$valid is working in the html? Could I somehow show the error messages on the html as well?
I tried to add jQuery validation plugin for that but seems like it is too much work to change the entire validation mechanism
Don't get the form withdocument.forms["myForm"]".
It's bad practice to use DOM manipulation inside a controller.
You can access the form with $scope.myForm. But beware of the fact that it will be initialised asynchronously.
But that shouldn't be a problem when you want to access the form after a keyboard click.
When you access the form with $scope.myForm you can iterate throw the $$controls. In this object are all form fields.
For example you can do it like this:
angular.forEach($scope.myForm.$$controls, function(value, key) {
value.$setDirty();
value.$setTouched();
});
And one more reminder when you use angular don't try do use JQuery for everything. If you want to use plugins search for angular plugins
I've been experimenting with Symfony forms for some time. Without a doubt Symfony's FormType is a great feature which help create robust forms, especially with related entities (eg. ManyToMany, OneToMany etc.). The FormType makes my job a lot less complicated and easy when it comes to persistence. One of these case is the embedded forms, where u have multiple(lets say Category and Tag) entities with ManyToMany relation. Using FormType, I can create a 'Select dropdown' field using ChoiceType form field to choose category from, embed another CollectionType field with multiple 'text input' fields to accept multiple tagname, and finally a submit button. All I need is to add the cascade = {persist} option using annotations on the categoryname property of the Category entity and Wallah!
Now what if I wanted to create a single input field which can accept multiple tags, instead of having multiple input fields. Like this:
To do this I can create an <input> element using CollectionType form field, and then in my html.twig I can insert the javascript(jquery/AngularJS) dependency as attributes.
This can be done by using jquery Chosen or Select2 https://www.sitepoint.com/jquery-select-box-components-chosen-vs-select2/
or by using AngularJS ngTagsInput component http://mbenford.github.io/ngTagsInput/
Not just this particular case, I know that jquery delivers almost everything u want to do on the client side, and works good with Symfony, but I've been looking into AngularJS for some time now and it is undoubtedly true that it is further a step ahead of jquery or any other javascript framework. Thus my opinion is a little biased towards AngularJS.
The thing is, jquery(Chosen/Select2) uses <select> element and the AngularJS(ngTagsInput) uses custom <tags-input> element to display this field. Although with AngularJS I can make some elementary changes and convert the <tags-input> element to <div ngTagsInput> but I can't convert it to <input ngTagsInput> because the standard HTML<input> element has no closing tag, thus many features like auto-complete don't work. Customizing ngTagsInput & autoComplete directives (AngularJS)
Problem: For Symfony to persist the CollectionType field input in the standard way I need to use the <input> element to display the field.
Questions:
How do I make this work?
How compatible are Symfony and AngularJS? And is it recommended to use them together?
All help is appreciated.
Thanks in advance!
I'm trying to loop through the input elements in a form using jQuery so that I can do some lightweight client-side validation. I'm using Django to generate the pages server side and the problem I'm having is that the particular page has many forms dynamically generated so I don't know the id of them before hand. If I did I could easily do the validation.
So in my javascript I'm trying to capture the submit action of the form and when that's found, somehow get the input elements so that I can check the parameters. Here's what I've tried amongst other things:
$(".s-inputs").submit(function(event){
$(this).filter(':input').each(function(){
console.log("Doesn't work");
});
event.preventDefault();
});
I tried including the django code that generates the html forms below but something in the templating system was throwing off Stack Overflow's formatting of it. I don't think it would have been very instructive anyway. Essentially my html is just an arbitrary number of forms on the page each with an arbitrary number of inputs, all dynamically generated server side. The only thing they share in common is the class "s-inputs."
Thanks for any help.
You should use find(), not filter():
$(this).find(':input').each(function(){
console.log("Doesn't work");
});
filter() attempts to filter the currently selected element(s) (which is currently just your form element) and remove anything which isn't what is being filtered on. This will return nothing, as your form element isn't matched by :input.
find() on the other hand searches for any matching selector contained within the currently selected elements. This will match any matching :input element contained within your form.
I have a situation where i have to modify a form (to dynamically add a table) via jquery after it's been rendered / created.
The problem is that when the form is submitted, and redisplayed because of errors or validation issues, I don't know of a good way to save and redisplay the data they've entered into the fields I've created dynamically.
Any suggestions would be appreciated.
You probably want to use something like jQuery Populate.
Dynamically added data don't differ from the static added ones. You have to use 'validate()' method to prevent submitting and rendering the html-code with errors, in this case user will see the dynamically added data.
In Drupal, we can use hook_form_alter to add additional items in a form.
But if I have some form items, which is very difficult to use Drupal form API to express them. How to add them into the form ?
I have a complicated nested select, checkbox from category, to type, to item control, and
also include JavaScript to control their display.
Define your own element. An example of this is in the drupal examples module.