Change form input data-bind value - javascript

I have a form in Laravel using Knockout.js, the input data-bind gets the last data from mysql. Everything works fine but a simple textfield to write in some values for the data is not what I want and a multiselect is not working for me.
I've searched for something to add values to this textfield and I've found the TextExt plugin. Now I can add some values like on this site the Tags field and save them.
In TextExt JS I can set the tagged values on page startup with
tagsItems: {{ $title->language }},
title->language get the Data from mysql and shows it as tags, but now I have the tagged values on startup and the data-bind value with the same data only as text and I need to delete them first before I can edit it.
Is there a way to hide the value from the data-bind or clear it on startup? Here is the form code I'm using
<input type="text" id="language" class="text-core" data-bind="value: app.models.title.language, valueUpdate: 'keyup' " placeholder="Language">
**edit** this is the working form
{{ Form::label('language', trans('dash.language')) }}
{{ Form::text('language', Input::old('language'), array('class' => 'text-core')) }}
When I delete the data-bind value I can't update the data.
I found something to clear the textfield on focus, but I want the tagged values on start because the data-bind value is only shown as text.
Have you some ideas how to do this?

Related

Using JavaScript to Update the Value of a DecimalRangeField in FlaskWTForm

I have a FlaskWTForm that uses DecimalRangeFields. This is the code in Python:
class DummyForm(FlaskForm):
field1 = DecimalRangeField('field1', [validators.DataRequired(), validators.NumberRange(min=0, max=5)], default=0)
I'm trying to implement a button on the front end which changes the value of the DecimalRangeField. This is the basic html:
<p>{{ dummyform.field1.label }}: <span><output for="field1" id="field1">{{ dummyform.field1.data }}</span></output></p>
{{ dummyform.field1(step=0.1, oninput="outputUpdate(value, 'field1')") }}
<button onclick="autoFill(3.0)">3</button>
I'm trying to add the functionality in JS. here's the javascript:
function autoFill(option) {
document.getElementById("myForm").reset();
document.getElementById('field1').value = option;
}
Although this changes the value (in terms of the number displayed) that appears on the front end, it does not change the value on the slider itself. Also, when submitting the form, it does not use this updated value. All help is appreciated!
Here is what you have to do,
Assign an id to the flask form field from within jinja like this,
{{ dummyform.field1(step=0.1, oninput="outputUpdate(value, 'field1')", id="field1") }}
Afterwards, you can use javascript or jquery to get the flask form field from id and update its value.
$('#field1').val("The value you want to enter in the field")
Or
document.getElementById('field1').value = "The value you want to enter in the field";

ng-repeat angularjs conflicting whit ng-model

i am creating a web app in which i am using angularjs for database conectivity
here is my code
<div ng-repeat="x in sonvinrpm">
<input type="Text" ng-model="venuemobile" value="{{x.venuemobile}}" ng-init="venuemobile='{{venuemobile}}'"
</div>
<button ng-click="updfunction()">update</button>
on my page load my textbox fetching particular venuemobile from my database(1234567890) if i edit the venuemobile and press update the value of venuemobile should be updated
but i am facing the error
missing parameter: venuemobile
and i found out this error is appearing because i am using repeater,
when i remove repeater and enter into textbox manually then my database is updating properly,
previously i used ng-repeater for my dropdownlist and table(because there are multiple data not single data) in this case i need only one value from database, what should i use instead of ng-repeat
You do not have to call a function to update a $scope variable, since angular uses two way data binding by default, the updated value will be bound to scope. Anyway your HTML should be
<input type="Text" ng-model="venuemobile" value="{{venuemobile}}" ng-init="venuemobile='{{venuemobile}}'"
</div>

Input value atttribute not working with ng-model in angular.js

I am currently working on an app, in which you can edit items, which will be updated in a DB. Because I don't want people to submit empty forms, I prepopulate the inputs with the current item.
form.form-update(method="post", ng-repeat='item in items', autocomplete="off" ng-submit='edit()')
.form-group
label(for='key') Key:
input.form-control(type="text" id="key" ng-init="key.updateKey='{{item.key}}' " value='{{item.key}}' name='keyUpdate' ng-model='key.updateKey')`
.form-group
button.btn.btn-primary(type="submit") Save
a.btn(href='/') Cancel`
Now when I submit this as an empty Form, I don't get the old data saved, but {{item.key}} in the Database.
OK, I just found out, what was causing the error. It turns out that you dont neet the {{}}, so it turns into this:
input.form-control(type="text" id="key" ng-init="key.updateKey=item.key", name='keyUpdate' ng-model='key.updateKey')

How to manipulate the type of DOM while keeping the content in AngularJS?

I want to display a list of things and let users edit them.
The list is generated using ng-repeat. At first when it was displayed, it should be in the form of pure texts. But when the user pushed the corresponding edit button, it should be changed into an input textfield, with the contents unchanged. When the user submits the form, the data is saved and the input should be changed back to pure texts.
Is this compatible with the Angular way of thinking? If so, how do I realize it? If not, what is the correct way to realize the idea in AngularJS?
Something like this would probably work:
<ul>
<li ng-repeat='item in items'>
<span ng-hide='item.editing'>item.value</span>
<input type='text' ng-show='item.editing' ng-model='item.value' />
<button ng-click='item.editing = !item.editing'>Edit</button>
</li>
</ul>
Then in your submit action set item.editing = false for every item in items
other way or way that i prefer with angular js is to keep a track of current item on scope, this works better if you the fields being edited are in large number
$scope.currentitem;
setting current item equal to the item tha's being edited
<button ng-click='currentitem = item'>Edit</button>
Now you can have an form filled in like
<input type='text' ng-model='currentitem.value' />

Angular.js Dynamic Form input types

I'm trying to make an Angular.js app that creates dynamic form inputs from a JSON object.
So firstly, I have a JSON object (called fields):
[
{"field_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
{"field_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
{"field_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
{"field_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
{"field_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
{"field_id":214,"form_id":1,"name":"password","label":"Password","type":"password"},
{"field_id":215,"form_id":1,"name":"","label":"","type":"submit"}
]
The object key type is the input type for a form. See below:
<p ng-repeat="field in fields">
{{field.name}} : <input type="{{field.type}}" value="{{record.data[field.name]}}" />
</p>
Now this works completely fine for submit, text, password, checkbox and radio fields. But if the type is file, it sets the input type to text.
If I replace {{field.name}} with {{field.type}} for the text, I can confirm it is outputting file.
If I statically change <input type="{{field.type}}"... to <input type="file"... it will display a file input correctly.
Why won't it let me set an input type as a file dynamically?
Topic if changing type property if <input> element is hot topic.
Actually, as AngularJS behaviour depends on was jQuery added (before or after angular.js).
Here you can read some discussion about possibility to change type:
change type of input field with jQuery
Also there is pull request to AngularUI for adding new directive with support of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371
If you find suggested solution is not good enough (though as type is not changed after you render form) you can go with ng-switch way - just show corrent input for user.

Categories

Resources