I have a few form inputs on a page with angular model(s) attached but one of their values is set dynamically via a jquery call after some image upload has been performed.
<input class="form-control ng-dirty ng-valid ng-valid-required" id="name" ng-model="item.name" required="required" name="name" type="text" value="">
<input class="form-control ng-dirty ng-valid ng-valid-required" id="url" ng-model="item.url" required="required" name="url" type="text" value="">
<input class="form-control" id="imgname" ng-model="item.imgname" required="required" name="imgname" type="text" value="">
The later input field is added via jquery.
<input class="form-control" id="imgname" ng-model="item.imgname" required="required" name="imgname" type="text" value="">
The issue is then when i submit the form only the item.name and item.url are sent through and not the item.imgname.
my submit code:
$scope.submitForm = function(store){
....
$log.debug(store);
};
I am adding the code to the form via:
...
complete : function(imgname){
JQ('#imgname').val(imgname);
},...
How can i add the data and have the form pick it up on submit?
You can't set ng-model value via Jquery. Rather, you have to fill that scope named "item.imgname" somewhere in your controller like $scope.item.imgname="Hello"
and on Submit button you can get this whole model(item)... you'll have that value in item.imgname model for sure.
Well in fact after a few more goes at it and just checking my code, I first had to correct the input type as i was setting it to a URL not a text type thus it was always causing issues etc.
Anyway once that was sorted i then placed
$scope.item = {};
Within my controller.
Then replaced the
JQ('#imgname').val(imgname);
for the $scope value
complete : function(imgname){
$scope.item.img = imgname;
}....
Then once the image was uploaded and then the form field populated as above inc. the other form details it the img field was submitted with the form.
Related
I am trying autofill a website using javascript.
This code
document.getElementsByClassName('form-control')[1].value = "MYNAME";
input text changing but when i click the submit button it says empty.
Please help me..
This is the html
<div ng-app="VitaminMiddleSchoolApp" ng-controller="componentEbaEtudExternalEditViewController">
<input spellcheck="false" autocapitalize="none" class="form-control input-sm ng-pristine ng-valid ng-empty ng-valid-maxlength ng-touched" type="text" ng-model="render.etudName" maxlength="60" ng-change="saveRenderer()" style="">
You need to use scope.$apply() after calling document.getElementsByClassName('form-control')[1].value = "MYNAME"; Because angular doesn't know about your autofilled inputs.
But better solution is to use angular model way. So for example if you want to autofill <input type="text" ng-model="my_test_model"> you can just use ng-init directive : <input type="text" ng-model="my_test_model" ng-init="my_test_model='test_value'"> or assign it in the angular controller scope.my_test_model='test_value'
I'm trying to load value in textbox when angucomplete item selected.
This is how I declare the directive in my html file:
<angucomplete id="autoName" placeholder="Name" pause="100" name="customer" selectedobject="sel" localdata="names" searchfields="custName" titlefield="custName" inputclass="form-control form-control-small" />
and i want selected value in textbox declared as:
<input id='autoValue' type="text" class="form-control" name='custValue' ng-model="selVal" minlength="15" placeholder="custmer value" required>
i tried this one but on pageload getting initial value error
<input id='autoValue' type="text" class="form-control" name='custValue' ng-model="selVal = sel.originalObject.value" minlength="15" placeholder="custmer value" required>
using above solution after selecting item from angucomplete value updated in textbox but textbox become non-editable. so is there any way to update value in textbox without making non-editable
I have a form which has an email field. I am adding the value of the form field with interpolation. But I do not want the user to be able to change the email address in the form field. So I add the disabled flag to the input field. When I add disabled the form does not pass the email to the http post.
How can I disable this input field but still show the email address init to the user so that it will still post when the form is submitted with the rest of the form data?
<input type="text" class="form-control" id="email"
[(ngModel)]="personal.email" name="email" #email="ngModel" required
value="{{auth.userProfile.email}}" placeholder="{{auth.userProfile.email}}" disabled>
Maybe I am confused about two way data binding but can I not just add the value to it with something like this,
[(ngModel)]="personal.email"
=
{{auth.userProfile.email}}
Then still keep the form input field disabled?
<input type="text" class="form-control" id="email"
[(ngModel)]="personal.email" name="email" #email="ngModel" required
value="{{auth.userProfile.email}}" placeholder="{{auth.userProfile.email}}" readonly>
do not use disable.
if you wanna pass value then use readonly (readonly="readonly").
it will let you post the value
I have one registration form in my site in which I am saving fields and after saving the form when user again come back to that registration form I want previous field values to be saved in browser auto-fill.
below is my code snippet -
<form class="clearfix">
<input autocomplete="given-name" name="firstName" type="text" placeholder="Enter First Name" class="form-control" value="">
<input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
<input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value="">
<input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
<input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
<input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
<a href="javascript:void(0);" className="btn baseBtn primeBtn" onClick={this.signupUser}>Sign Up</a>
</form>
In this code onClick of anchor tag I am doing ajax call via signup user function.
and after that i want that users data to be auto filled in browsers autofill address in chrome.
I have tried below ways : -
1.Few people suggested to use form "submit" button functionality to save data in autofill rather than having ajax call form anchor tag onClick event.
but that is also not working in my case.
2.I have gone through few post in which they told to use proper name and autocomplete attribute for field. but by using that browser can only guess proper field values .
I am answering my own question.
Actually,I just ignored that I am not directly submitting my form.
On backend we are using grails and using it just for REST API's.
on frontEnd we have react.js but request and response are getting served from Nginx .
So form is not getting submitted to grails that's why on form submit data was not getting saved in browser autofill.
I am creating a form, the customer has requested an 'eventStart' and 'eventStop' range, they also want it to be required, and don't want anyone to be able to manually change the values.
I am using jquery datePicker and jquery validate.
I have it working one way or the other, but not both.
<input class="inputs" type="text" id="eventStart" readonly/>
<input class="inputs" type="text" id="eventStop" readonly/>
This works perfectly, the range works, and it cannot be manually edited.
<input class="inputs" type="text" id="eventStart" required/>
<input class="inputs" type="text" id="eventStop" required/>
This pops up the "! Please fill out this field", but allows the date to be manually edited.
If I put both, it allows the user to skip the field (no validation.)
In this case if you add readonly and required and it bypasses validation your options are to implement your own validation or to hook form submit or the onclick action of your submit button.
Another option is to use required only. Then hook the keydown action and stop text entry.
$("#inputs").keydown(function (event) {
event.preventDefault();
});
This will only stop text entry and is not secure. Sneaky people can still change the value if they want. Don't forget to validate field entry on the backend.
i have this workaround
$nextmonth = date('Y-m-d 23:59:59',strtotime("+1 month"));
and for input
<input type="text" class="text-input" name="project_deadline" id="project_deadline" value="<?php echo $nextmonth ?>" readonly />