I am implementing an auto complete box using the Ajax.autocompleter method of the scriptaculous.js framework.
This is the auto complete box and the div where the auto suggested entries are populated.
<?php echo $form->create('Share', array('url' => '/forms/share')); ?>
<label for="shareWith">Share Form with</label>
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<div id="autocomplete_choices" class="autocomplete"></div>
<input type="hidden" id="sharedUserId" name="sharedUserId"/>
<?php echo $form->end('Share');?>
This is the JQuery function to get the auto-suggested list and to get the id of the selected entry which is stored in the hidden field of the form.
new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"http://localhost/FormBuilder/forms/autoComplete",
{
tokens: ',',
afterUpdateElement : getSelectedId
}
);
function getSelectedId(text, li) {
$("#sharedUserId").val(li.id);
}
Suppose if I select multiple entries,how to send those values?
Can I have an array as a hidden field, so that I can have an array of the selected elements and save that array as a hidden field?
Simply create a new hidden input field for every selected ID, and make sure that for each you have name="sharedUserId[]". This doesn't follow the CakePHP form element naming convention, but it will make sure that the POSTed value of sharedUserId is an array.
serialize with json and parse it in the server back. PHP 5.2 can parse json natively.
Not related to your question though..
http://docs.jquery.com/Plugins/Autocomplete
jQuery Auto complete you
Related
I created a frontend override of com_content/views/form/tmpl/edit.php and added a plain ol' HTML input field within the <form> as below:
<input type="text" name="jform[attribs][vidurl]" value="" id="jform_attribs_vidurl" />
I expected the data to be saved in the _content/attribs table but it just returns null as if the name is not passed during POST.
It worked properly for the image field
I did the same for the image_intro field and that value saves correctly.
I deleted line
<?php echo $this->form->renderField('image_intro', 'images'); ?>
and used
<input type="hidden" name="jform[images][image_intro]" id="jform_images_image_intro" value="" />
Then pass the image path value from a AJAX process after successful upload via file input field, to the hidden image field via javascript. The data saves successfully on submit.
Is it that there must be an existing XML string with the field attributes?
Does JFORM ignore HTML fields if its attributes are not found in a xml string? How can I get a custom added field to save?
The custom form output
In Laravel 4 I can create text inputs with code like:
{{ Form::text('title', '', ['placeholder' => 'Ex. title', 'id' => 'title']) }}
This is very useful, because if other fields of my form fail validation, I can just do...
return Redirect::back()->withErrors($validator)->withInput(Input::all());
And when the form is shown again, the field title will conserve the value that was submitted before.
Good stuff.
Now here is my problem: What about input arrays?
I added the following input fields to my form:
<input type="text" name="option[]" />
<input type="text" name="option[]" />
<input type="text" name="option[]" />
<input type="text" name="option[]" />
And I submitted the form, knowing that would fail, to see if when the form appears again, the values on these fields still remained. Instead Laravel threw an exception.
ErrorException
htmlentities() expects parameter 1 to be string, array given
Even if I have just 1 option, it still gives me the same error:
{{ Form::text('option[]') }}
Now, I know that I could handle the filling of the array option manually, maybe like this:
$options = Input::get('option');
return Redirect::back()
->withErrors($validator)
->withInput(Input::except('option'))
->with('options', $options);
and then just looping through the $option array on the blade template.
Yes, that would probably work. But that is kinda hacky, and it still misses the powerful workflow of Laravel to autofill fields after failed submission, like I did back with title. So my question is:
Is there any built-in way in Laravel 4 to handle Input Arrays under these situations?
If you add an index to each input like:
{{ Form::text('option[1]') }} {{ Form::text('option[2]') }} it will work.
You can see how this works in vendor\laravel\framework\src\Illuminate\Html\FormBuilder.php in the function that creates the input
I am facing problem in populating default values for dynamically generated form fields in using angular. So, I have a login form that generates itself based on the attribtes returned by aREST interface. Therefore for my html page, I just have :
<li ng-repeat="element in elements">
<label>UserName</label>
<input type="{{element.inputType}}" ng-model="{{element.fieldName[element]}}" required="required"/>
The default values are returned in an attribute called placehoder in elements object. following tag gives an idea of the task that I am trying to achieve
<input type="{{element.inputType}}" ng-model="{{element.fieldName[element]}}" required="required" placeholder="{{element.placeholder}}"/>
Finally, when the user clicks submit , I need to post the default value of text field if it has not been changed.
Any help would be highly appreciated.
Thanks
If you can add/use a library like underscorejs or lodash, then you can use their _.defaults() :
var object = { 'name': 'barney' };
_.defaults(object, { 'name': 'fred', 'employer': 'slate' });
// → { 'name': 'barney', 'employer': 'slate' }
with angular only, you could add a directive to your form, that watches 'submit' and sets the default values for you.
Thanks for replying #nilsK, I am very new to javascript frameworks and Angular is the first one that I am having my hand on.
So in my R&D with it , I solved my issue by adding the two arrays of values i.e. FieldName and Placeholder to the scope object that I use to post data to my backend. I assign values to these arrays from the objects(placeholder and fieldName) that recieve from REST service as:
$scope.user={};
$scope.user.FieldNames=[];
$scope.user.FieldValues=[];
angular.forEach($scope.elements,function(value,index){
$scope.user.fieldValues[index] = $scope.elements[index].placeholder;
$scope.user.fieldNames[index] = $scope.elements[index].fieldName;
})
and on the html form, I bind ng-model to the scope array of values that I want to display as defaults in text field.
<input type="{{element.inputType}}" ng-model="user.fieldValues[$index]" required="required" />
Therefore, the default values are posted if user does not change them and if there is a change, updated values are posted.
Any suggestions to improve this solution are most welcome.
I'm trying to implement a multilingual text input field with a little dropdown button to the left for selecting the language. For instance, when the dropdown menu shows 'de' the text field should be bound to model.multilingualData['de'].someField and so on.
My first approach was to set ngModel to model.multilingualData[selectedLanguage].someField. But when the user selects a different language without filling in the field correctly, no error is set on the form, because the model now points to a different object.
My next idea was to create an entire element directive without ngModel, but then I wouldn't be able to do other validations like ngMaxLength.
I couldn't find anything helpful on the web either. Any idea on how to implement this properly?
EDIT
Here's a little fiddle that illustrates the problem: http://jsfiddle.net/FZ2kg/
Not only that the form appears valid when you switch languages, the previous field value is also deleted, because the model is set to null when the field becomes invalid.
would be nice if you use this awesome external directive for multilanguage!
https://angular-translate.github.io/
I hope it helps
If you need to have form validation for all language variations and you're loading all languages at once in your model, can't you just create an input per language in the form and hide all but the currently selected language?
Here's a fiddle: http://jsfiddle.net/jvl70/w3rstmwd/5/
<form name="myForm">
<div ng-repeat="(lang, value) in model.multilingualData"
ng-show="lang==stuff.currentLanguage">
<ng-form name="innerForm">
<div ng-class="{ 'has-error': innerForm.anything.$invalid }">
<input type="text" name="anything" ng-model="value.someField" ng-maxlength="6"/>
</div>
</ng-form>
</div>
</form>
(At first I tried to use dynamic names for each input but found that the individual field $invalid wasn't available for dynamically named inputs. See this post to get around it: Dynamic validation and name in a form with AngularJS.
As an alternative to ng-form, you could use dynamic names for each input and try one of the custom directives on the link.)
I guess if there were many possible languages, this approach might get slower but it's ok for a few languages.
I've got some JSON data- an Array of Fields containing Input Type (input, dropdown, radio, checkbox, etc.), Label and whether they are required or not.
I'm doing an ng-repeat through the array to build the form. I'm trying to understand what's the best way to build different kinds of inputs based on the Input Type value.
In normal programming, I would do a
foreach (var field in FormData){
if (field.inputType == "dropdown"){
//logic to build dropdown using jQuery, etc..
}
}
In AngularJS, I can't really do if thens within an ng-repeat="field in FormData". What's the proper way to dynamically build out these different kinds of elements while looping through an array?
This question is very similar:
How can I use Angular to output dynamic form fields?
Many thanks for any suggestions.
In my application, I did use an ng-switch (see the answer from the very similar question) in my ng-repeat to achieve something similar to this. The only problem with this is to link to the model. If you want to bind to a property name that is stored in a variable (if you json contains an id for the field), you won't be able to something like this :
<input type="text" ng-model="formdata.{{elem.id}}" />
I found that you can do this instead :
<input type="text" ng-model="formdata[elem.id]" />