How to dynamically add a new input if other are filled Angular - javascript

I have three inputs:
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
<input type="text" class="form-control" id="friend-email-input" placeholder="Email" />
How to add a new input if this three inputs adn previous are filled ?
I am using angular route and I would rather use Angular.
Thanks.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" class="form-control" ng-model="field1" placeholder="Email" />
<input type="text" class="form-control" ng-model="field2" placeholder="Email" />
<input type="text" class="form-control" ng-model="field3" placeholder="Email" />
<input ng-show="field1.length && field2.length && field3.length" type="text" class="form-control" ng-model="field4" placeholder="Email" />
</div>
Assign each input a model and then use ng-show to only display the 4th input if the length of the models are truthy (ie: nonzero).

in your controller keep track of all the inputs that you need, starting from
$scope.inputs = [{value: ""}, {value: ""}, {value: ""}];
in your template you are going to iterate on this array to show the inputs yoou have
<div ng-app="main" ng-controller="MainController">
<div ng-repeat="input in inputs track by $index">
<input type="text" class="form-control" placeholder="Email" ng-model="input.value"/>
<button ng-click="remove($index)">Remove</button>
</div>
<button ng-click="addInput()">Add Input</button>
</div>
So when the remove button of an input is clicked that input gets removed if there are more than 3 inputs present
If the add input button is pressed we append an input text with a remove button
$scope.remove = function(index){
if($scope.inputs.length > 3){
$scope.inputs.splice(index, 1);
}
}
$scope.addInput = function(){
$scope.inputs.push({value: ""})
}
here is an example codepen

Related

(ngModelChange) delete last symbol (Angular)

I have 2 inputs where I enter value and concat it into new one
Here is code from HTML
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.firstName" required maxlength="32">
<validation-messages [formCtrl]="firstNameInput"></validation-messages>
</div>
<div class="form-group">
<label>{{l("LastName")}}</label>
<input #lastNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.lastName" required maxlength="32">
<validation-messages [formCtrl]="lastNameInput"></validation-messages>
</div>
And concat value I show in this field
<div class="form-group">
<label>{{l("OrganizationName")}}</label>
<input #organizationName="ngModel" class="form-control" type="text" name="organizationName" [(ngModel)]="landlord.organizationName" required maxlength="500">
<validation-messages [formCtrl]="organizationName"></validation-messages>
</div>
Here is code from ts file
onNameChange() {
this.landlord.organizationName = `${
this.landlord.firstName ? this.landlord.firstName : ''
} ${this.landlord.lastName ? this.landlord.lastName : ''}`;
}
My problem, that last character is deleted from firstName or lastName
How I can fux this stuff?
Your ngModelChange event is firing before the model is actually updated, so with the current value at the time the event is fired, prior to the change. Likely to do with the ordering of (ngModelChange) and [(ngModel)] in your template.
Change your event to fire on (input) and it will get the most recent value.
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" (input)="onNameChange($event)" [(ngModel)]="landlord.firstName" required maxlength="32">
</div>
OR
Change the order of your attributes in your template:
<div class="form-group">
<label>{{l("FirstName")}}</label>
<input #firstNameInput="ngModel" class="form-control" type="text" name="name" [(ngModel)]="landlord.firstName" (ngModelChange)="onNameChange()" required maxlength="32">
</div>
Stackblitz: https://stackblitz.com/edit/angular-p7ecgh

How to validate some fields and selects on ng-click AngularJS

I have a list of some input fields and few select options, so I want them be required on ng-click and raise a message just over the particular required item in form of PopupMenu or kind of that, or what ever the suitable way to show require warning just over the field
Hierarchy in my case:
<form>
<input required
<input required
location form for multiple records (not form tag)
contact form for multiple contacts (not form tag)
submit button to post (input required), all locations and all contacts.
</form>
My Form:
<div class="form-inline">
<div class="form-group">
<input type="text" placeholder="Legal Name" ng-model="companyForm.legalName" required/>
</div>
<div class="form-group">
<input type="text" placeholder="EIN" ng-model="companyForm.ein"/>
</div>
<div class="form-group" id="selectFormationDiv">
<select id="formationListId"></select>
</div>
<div class="form-group">
<input type="checkbox" style="margin-top: 5px;" ng-model="companyForm.internal"/> <b>Internal</b>
</div>
</div>
Note this is not form, and not be called on ng-submit.
My Output:
My Desired output:
Please guide me through how do I code to get my desired output. Thanks
angular.module('app', [])
.error {
color: red;
}
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app'>
<form name="form" class="css-form" novalidate>
<input type='text' ng-model='temp1' required name='temp1' />
<span ng-show="form.temp1.$error.required && form.$submitted" class='error'>
field1 is required
</span>
<br>
<input type='text' ng-model='temp2' required name='temp2' />
<span ng-show="form.temp2.$error.required && form.$submitted" class='error'>
field2 is required
</span>
<br>
<input type="submit" value="Save" />
</form>
<hr>
<!--Solution without `<form>` tag: -->
<input type='text' ng-model='temp3' name='temp3' />
<span ng-show="!temp3 && $submitted" class='error'>field3 is required</span>
<br>
<input type='text' ng-model='temp4' name='temp4' />
<span ng-show="!temp4 && $submitted" class='error'>field4 is required</span>
<br>
<input type="button" ng-click='$submitted=true' value="Save" />
</div>

How to Pass the Text field value to a variable in Javascript

i have the below script where i want to pass the text field value to a variable
and display in alert window
<form name='searchdata' id="search_form" >
<div class="col-xs-4" id="form_submit_ins">
<label for="usr">Search Instance</label>
<input type="text" class="form-control" id="ins" id"searchval" placeholder="Instance Name"><br/>
<button class="btn btn-danger navbar-btn" onclick="form_submit();" >Search</button>
</div>
<div>
</div>
</form>
</div>
<script type="text/javascript">
function form_submit() {
var item = document.getElementById('searchval').value;
alert(item);
}
You have a typo:
id"searchval"
Should be:
id="searchval"
id should be equal to searchval i.e id="searchval"
There is something wrong with your HTML (does it have two ID fields? Is one missing a "=" sign?
Your code should work if you fix the HTML to:
<input type="text" class="form-control" id="searchval" placeholder="Instance Name">
Your input has two id's, it can only have one id
change:
<input type="text" class="form-control" id="ins" id"searchval" placeholder="Instance Name">
To:
<input type="text" class="form-control" id="searchval" placeholder="Instance Name">

Finding which forms are filled out on submit

I need to use unobtrusive javascript/jquery to check if input fields have been filled out. If they are I need to display what input field that was. Not the value.
Here is the input form
<div class="inputCol">
<div class="formItem first-name">
<label>First Name:</label>
</div>
<div class="inputCol">
<input maxlength="40" size="35" id="firstName" name="firstName" class="imput_value" type="text" />
</div>
<div class="formItem last-name">
<label>Last Name:</label>
</div>
<div class="inputCol">
<input maxlength="40" size="35" id="lastName" name="lastName" class="imput_value" type="text" />
</div>
<div class="formItem email">
<label>Email:</label>
</div>
<div class="inputCol">
<input maxlength="40" size="35" id="email" name="email" class="imput_value" type="text" />
</div>
<div class="inputCol">
submit
</div>
So on click of the submit button I need it to alert "First Name, Email" if just the first name and email had input in them. These inputs do not need to be validated. As long as the field is not empty it should display that that input has been submitted.
This is the code I currently have, don't really know where to go from here:
$('a.submit_button').click(function(){
var validate= false;
$('input.imput_value').each(function(){
if($(this).val() != '' || $(this).attr('checked'))
validate = true;
});
if(validate){
var dataFilled = $(this).closest('.formItem').find('input').text().trim();
alert(dataFilled);
return false;
}
});
$('a.submit_button').click(function(){
var filledInputs = '';
$('input.imput_value').each(function(){
if($(this).val() !== '' || $(this).attr('checked')){
filledInputs += $(this).attr('name') + ', ';
}
});
if(filledInputs !== ''){
alert(filledInputs);
}
});
Should do what you want.

jQuery's val() returns empty string on bootstrap popover input field

I have a bootstrap popup form with a few input fields. I've added a submit button to the form, that triggers client-side JS validation. However, when the button is clicked, the current value of the input fields is not captured by jQuery's val() method: I just get an empty string.
Here is the markup:
<div class="popover fade right in" style="top: -154.5px; left: 249px; display: block;">
<div class="arrow">
</div>
<h3 class="popover-title">New Job Site contact</h3>
<div class="popover-content">
<form class="popover-form form-horizontal" id="newjobsite_contact_form" accept-charset="utf-8" method="post" action="http://dev.temperature/home/#">
<div class="form-group">
<div class=" required ">
<input type="text" class="form-control" id="popover-first_name" required="1" placeholder="First name" value="" name="first_name">
</div>
<div class=" required ">
<input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">
</div>
<div class=" required ">
<input type="text" class="form-control" required="1" placeholder="Phone" value="" name="phone">
</div>
<div class="">
<input type="text" class="form-control" placeholder="Mobile" value="" name="mobile">
</div>
<div class="">
<input type="email" class="form-control" placeholder="Email" value="" name="email">
</div>
<div class="">
<input type="url" class="form-control" placeholder="Website" value="" name="website">
</div>
</div>
<div class="popover_buttons">
<button class="btn btn-success" onclick="submit_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_submit">Submit</button>
<button class="btn btn-warning" onclick="close_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_cancel">Cancel</button>
</div>
</form>
</div>
</div>
Here is the JS:
function submit_newjobsite_contact() {
errors_found = validate_popover_form($('#newjobsite_contact_form'));
if (errors_found.length == 0) {
// Form values submitted to PHP code through AJAX request here
} else {
error_msg = "Please check the following errors:\n";
$(errors_found).each(function(key, item) {
error_msg += "- "+item.message+"\n";
});
alert(error_msg);
}
}
function validate_popover_form(form_element) {
found_errors = [];
$('span.error').remove();
form_element.find('select,input').each(function(key, item) {
if ($(item).attr('required') && $(item).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"});
}
console.log($(item).val()); // More validation here, just putting debugging code instead
});
return found_errors;
}
What am I doing wrong? All other attributes for these input fields are being correctly retrieved by jQuery, just not the value after I've typed text into them.
The answer to this problem couldn't be found here because I didn't post the whole source JS, which is too large. What really happened is that I accidentally cloned the popover form, which led to a duplication of the input fields.
form_element.find('select,input').each(function(key, item) {
if ($(item).attr('required') && $(item).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"});
}
I Modified it to:
form_element.find('select,input').each(function(key, item) {
if ($(this).data('required') == '1' && $(this).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(this).attr('name'), message: "A value for "+$(this).attr('placeholder')+" is required"});
}
Try using data attributes so instead of using required="1" use data-required="1"
<input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">
so your input should be like this:
<input type="text" class="form-control" data-required="1" placeholder="Surname" value="" name="surname">

Categories