I have working on Edit Profile page in angular Js
Normally List of details will be show. When click on one list , I called the one method
$scope.editContact = function(user){
$('#editContactSection').show();
$scope.eUser = user;
}
Then I assigned the text box value by eUser
<input type="text" class="form-control" id="fname" ng-model="fname" name="fname" ng-minlength='3' value="{{eUser.firstname}}" required>
<div ng-show='editContacForm.fname.$error.minlength' class='error'>Enter atleast 3 characters</div>
Here i got the textbox value in input tag in console like value="somename".
Value is assigned correctly. But i can't see in textbox in browser window
And how to change the drop down list value. That drop down list value filled by angular js ng-repeat
Try setting ng-model='eUser.firstname'
as in
<input type="text" class="form-control" id="fname" ng-model="eUser.firstname" name="fname" ng-minlength='3' required>
Try this
$scope.editContact = function(user){
$('#editContactSection').show();
$scope.eUser = user;
$scope.fname = $scope.eUser.firstname;
}
Or
<input data-ng-init="fname=eUser.firstname" type="text" class="form-control" id="fname" ng-model="fname" name="fname" ng-minlength='3' required>
<div ng-show='editContacForm.fname.$error.minlength' class='error'>Enter atleast 3 characters</div>
Related
I want to automatically fill the registration form fields on an HTML web page. The form has multiple input boxes. I want to define the value of fields and when the web page appears the fields fill automatically. Before, I used autofill extension for it. But, the autocomplete feature of fields has been off and HTML objects don't have names or ids. Also, they have the same class. Therefore, fields don't fill automatically. How I can fill fields on the webpage automatically?
for example, two input objects and some of codes have been defined as follow:
<input autocomplete="off" class="red" placeholder="" type="text">
<input autocomplete="off" class="red" placeholder="" type="text">
<div class="input-item" max-length="10" placeholder="ID" data-v-6b0449e1=""><label class="label"><i>*</i>ID:</label><input autocomplete="off" class="ltr green" max-length="10" placeholder="" type="text"><p class="errors"><ul></ul></p></div>
<div class="select-item" data-v-6b0449e1=""><label class="label"><i>*</i>Sex:</label><select><option hidden="" disabled="" value="">Select</option><option value="false">male</option><option value="true">female</option></select><p class="errors"><ul></ul></p></div>
If you're looking to fill the fields when the page loads, you can use JavaScript:
HTML
<form class="my-form">
<input type="text" id="input1" />
<input type="text" id="input2" />
<input type="text" id="input3" />
</form>
JavaScript
window.onload = function() {
document.getElementById("input1").value = "This is the first input";
document.getElementById("input2").value = "This is the second input";
document.getElementById("input3").value = "This is the third input";
}
All this does is just, when the page loads (window.onload), replaces the value of each of the specified input fields to whatever you set it to.
I have a input field that has data pulling form the database, however when the data base is empty the input field displays the disabled that is used to disable the field when not editable.
For example in my html:
<label for="fname">CompanyCode:</label>
<input type="text" id="fname" name="fname" value={{$id->CompanyCode}} disabled>
This above pulls data however if there is now data to pull it uses the "disabled" word as the value and then the field doesn't become disabled.
Can I use a condition to overcome this using something like:
<label for="fname">CompanyCode:</label>
<input type="text" id="fname" name="fname"
value= #if($id->CompanyCode) count() == 0)
<td colspan="5" class="text-center"> Nothing Found </td>
#endif
disabled>
I was able to get the answer :
<label for="fname">CompanyCode:</label
<input type="text" id="fname" name="fname" value="{{ $id->CompanyCode}}" {{$id->companyCode ? '' : 'disabled' }}>
I could have also added Quotations for the desired result aswell :
<label for="fname">CompanyCode:</label
<input type="text" id="fname" name="fname" value="{{ $id->CompanyCode }}" disabled>
I am creating dynamic textboxes from a list like the following
Angular js
$scope.phonenumbers = [{text: ''},{text: ''},{text: ''}];
HTML Part
<div class="relativeWrap" ng-repeat="phone in phonenumbers">
<input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" >
</div>
Now I need to do the following validation in form
Any one of the following 3 textboxes is mandatory. I put required but it is validating all.
Please help
You will need to use ng-required and conditionally set the required to true for all the field only when none of the fields have a value. To do this you will need to maintain a flag in your controller and bind that your ng-required.
The method in the controller:
$scope.isValue = false;
$scope.textChange = function(){
$scope.isNoValue = $scope.phonenumbers.some(function(item)){
return item.text;
}
}
Your HTML:
<div class="relativeWrap" ng-repeat="phone in phonenumbers">
<input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" ng-required="!isValue" ng-change="textChange">
</div>
I want to validate input value not equal to by default value through html5 validation,is it possible?
<input type="text" name="First Name" value="First Name" id="FirstName"
required="" title="First Name is Required!" >
when user click on submit button, if input filed has value= First Name
then show error.
I don't want to use placeholder="First Name".
Is there a way to validate using pattern attribute,
like pattern="!First Name" <-Stupid logic :)
Adding a pattern should work.
<input type="text" name="First Name" value="First Name" id="FirstName"
required="" title="First Name is Required!" pattern="^((?!First Name).)*$">
This will throw a error if your value contains the string "First Name".
You can use Javascript for this try below:
<form>
<input type="text" name="First Name" value="First Name" id="FirstName" required="" title="First Name is Required!">
<input type="submit" value="Submit" onclick="if (document.getElementById('FirstName').value == 'First Name') return false;">
</form>
There is a better solution: use the placeholder attribute instead of the value attribute ... but do not use it as a replacement for a label (see MDN page on input).
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="First name is required" ... />
This means that you do not need to have any logic to check the default value has not been filled.
This question already has answers here:
Concatenate multiple HTML text inputs with stored variable
(2 answers)
Closed 9 years ago.
I have my code like this
First name : <input type="text" name="txtFirstName" /> <br><br>
Last name : <input type="text" name="txtLastName" /> <br><br>
Full name : <input type="text" name="txtFullName" > <br><br>
if i give abc in first name text box and def in last name text box the result should be displayed as abcdef in full name text box. How to do this?
It's actually quite simple with a tiny bit of inline JavaScript using the form oninput attribute.
<form oninput="txtFullName.value = txtFirstName.value +' '+ txtLastName.value">
First name : <input type="text" name="txtFirstName" /> <br><br>
Last name : <input type="text" name="txtLastName" /> <br><br>
Full name : <input type="text" name="txtFullName" > <br><br>
</form>
http://jsfiddle.net/RXTV7/1/
I'd also suggest using HTML5 <output> element instead of third input. To learn more start here: http://html5doctor.com/the-output-element/
Bind a function that generates the full name on keyup events for your inputs...
<script type="text/javascript">
function generateFullName()
{
document.getElementById('fullName').innerText =
document.getElementById('fName').value + ' ' +
document.getElementById('lName').value;
}
</script>
First Name <input type="text" id="fName" onkeyup="generateFullName()" /><br/>
Last Name <input type="text" id="lName" onkeyup="generateFullName()" /><br/>
Full Name <span id="fullName" />
if you want, you can have the FullName as a input too, and set it's Value.
Try this (using jQuery). it will work. But the fullname field will remain empty if the individual fields are empty
<script>
$(document).ready(function(){
$("fullName").focus(function(){
var fullname = $("fName").val() + $("lName").val();
$("fullName").val(fullname);
});
});
</script>
First Name <input type="text" id="fName" /><br/>
Last Name <input type="text" id="lName" /><br/>
Full Name <span id="fullName"/>
For manipulating HTML you'll need to use JavaScript. There are tons of good tutorials out there, for example on w3schools.com.
You may also want to check out jQuery, which makes this kind of manipulations a lot easier and more straightforward.
you can use the below code for that:
<script type="text/javascript">
function generateFullName()
{
document.getElementById('txtFullName').value =
document.getElementById('fName').value + ' ' +
document.getElementById('lName').value;
}
</script>
First Name <input type="text" id="fName" /><br/>
Last Name <input type="text" id="lName" oninput="generateFullName()" /><br/>
Full name <input type="text" id="txtFullName" name="txtFullName" > <br><br>
Also, instead of oninput event , you can opt for onblur also.