Develop Reference

Issues with Angular Dropdown List - dynamically select an option when a link is clicked

Am using Angular Reactive form and I have a dropdown list and a input field. I have a list of object called Category: {id, name, parent}. This list is displayed in a table which has edit button/link in each row. when a particular row's edit link is clicked, I want the data in that row to fill the input field and the select option will be selected automatically.
For example here are my form and Component:
<form [formGroup]="childCategoryForm" (ngSubmit)="saveOrUpdateChildCategory(childCategoryForm.value)" autoComplete="off">
<div class="form-group row" [ngClass]="{'error': !validateParentCategory()}">
<label class="col-form-label col-md-2" for="parent">Parent Category</label>
<div class="col-md-6">
<select [(ngModel)]="selectedValue" class="form-control" formControlName="parent" name="parent" id="parent">
<option [ngValue]=null>--- select parent category ---</option>
<option [ngValue]="parent" *ngFor="let parent of parentCategories">{{parent.name}}</option>
</select>
</div>
</div>
<div class="form-group row" [ngClass]="{'error': !validateCategoryName()}"> <!-- && categoryForm.controls.name?.errors.pattern -->
<label class="col-form-label col-md-2" for="name">Category Name</label>
<!--em *ngIf="!validateCategoryName()">Required</em>
<em *ngIf="!validateCategoryName()">Required</em-->
<div class="col-md-6">
<input type="text" formControlName="name" name="name" class="form-control" id="name" placeholder="Category name..." />
</div>
</div>
</div>
<div class="form-group row" *ngIf="childCategoryFormEditMode">
<label class="col-form-label col-md-2" for="name"></label>
<div class="btn-toolbar col-md-6">
<button type="button" (click)="cancelEditChildrenCategory()" class="btn btn-outline-secondary btn-sm mr-2">Cancel edit</button>
<button type="submit" class="btn btn-info btn-sm">Submit edit</button>
</div>
</div>
</form>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Parent</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let child of childrenCategories; index as i">
<th scope="row">{{i+1}}</th>
<td>{{child.name}}</td>
<td>{{child.parent['name']}}</td>
<td class="text-primary"><a class="deco-none" (click)="editChildCategory(child)"><i class="fa fa-edit"></i>Edit</a></td>
<td class="text-danger"><a class="deco-none" (click)="deleteCategory(child)" ><i class="fa fa-remove"></i>Delete</a></td>
</tr>
</tbody>
</table>
When a user clicks on the Edit link, I want the contents in that row to populate the form above. The means that parent column will be used to select the corresponding select option in the form.
The component looks like this:
export class AddCategoryComponent implements OnInit {
name: FormControl;
parent: FormControl;
childCategoryForm: FormGroup;
selectedValue: any;
ngOnInit() {
this.parent = new FormControl(this.selectedValue);
this.name = new FormControl('');
this.childCategoryForm = new FormGroup({name: this.name, parent: this.parent});
}
// THIS IS THE MAIN FUNCTION WHERE I AM TRYING TO DYNAMICALLY SELECT AN OPTION BASED ON THE VALUES IN THE ROW CLICKED BY THE USER. THIS IS THE FUNCTION THAT IS CALLED WHEN A USER CLICKS ON THE EDIT LINK
editChildCategory(category: Category) {
this.selectedValue = category.parent;
// this.childCategoryForm.setValue({name: category.name, parent: category.parent});
this.childCategoryForm.controls['name'].setValue(category.name);
this.childCategoryForm.controls['parent'].setValue(category.parent['name']);
this.selectedValue = category.parent['name'];
}
}
Some of the code in the above function are in comment because I have been trying different things but it's not working.

To me how you are setting the value prop of select is the prob.
Change html to below:
<option [ngValue]="parent.name" *ngFor="let parent of parentCategories">
Since, parent is an object not a string value to which you could match later on when edit link is clicked. Hope this helps!

Email id should be Pre loaded onselect() mvc

In my application user will login into his/her account by using his Email ID.
And user will be able to fill the contact details by using drop down.
But in Email ID drop down option it has to be loaded with Email ID which is login Email ID.
Here I am attaching screen shots for better understanding.
<div class="col-md-3">
<label class="control-label">Contact Type</label><br />
<select class="drop" id="drpContactType" required="required" data-bind="options: ContactTypeList,optionsText: 'Text',optionsValue:'Value',optionsCaption: '--Select--',value:ContactTypeID"></select> </div>
When we select EMail ID dropdown option the Email ID which is login by user has to be pre loaded.
can you please help me.

You can use the Hidden type for Your Email as I used....You can make hidden field for User Another Details....(like as Email ,Mobile)
$('#cont').change(function () {
if($(this).val()=='Email')
{
$('#val').val($('#email').val());
}
else
{
$('#val').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" value="sandip.viru#gmail.com" id="email">
<div>
<table>
<tr>
<td>Contact type : </td>
<td>
<select id="cont">
<option>Phone</option>
<option>Email</option>
<option>Mobile</option>
</select>
</td>
<td>Value : </td>
<td><input type="text" id="val"></td>
</tr>
</table>
</div>

Live update variable depending on form selection

I currently have the following form :
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<label for="categorie"> Tipul testului</label><br>
<select name="categorie" class="selectpicker">
<option value="1">Geometrie</option>
<option value="2">Algebră</option>
</select><br><br>
<label for="cerinta"><span class="glyphicon glyphicon-pencil"></span> Cerinţă</label>
<textarea type="text" class="form-control" id="cerinta" name="cerinta" placeholder="Cerinţă"></textarea>
<br>
<label for="rezolvare"><span class="glyphicon glyphicon-pencil"></span> Rezolvare</label>
<textarea type="text" class="form-control" id="rezolvare" name="rezolvare" placeholder="Rezolvare"></textarea>
<br>
<label for="nr_raspunsuri"><span class="glyphicon glyphicon-pencil"></span> Număr de raspunsuri</label>
<select class="selectpicker" name="nr_raspunsuri">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<table class="table">
<tr>
<td class="col-md-6">
<button type="submit" class="btn btn-success btn-block" name="btn-add"><span class="glyphicon glyphicon-off"></span> Adăugare</button>
</td>
<td class="col-md-6">
<input type = "reset" class="btn btn-danger btn-block " label="Resetare"/>
</td>
</tr>
</table>
</form>
What I am trying to do is to set a variable named $nr_raspunsuri to 1 or 2, depending on the selection of the user without refreshing the page.
For example, if he selects 2 in the second select field, I want to set the variable $nr_raspunsuri = 2, so I can show one more input field in the form with an if in php. I think this can only be accomplished with AJAX. Is it true? If yes, how would you do it?

Your if in php will not run again until the page is reloaded. You can achieve it by toggling the view with javascript - when option with value 1 is selected from first select hide the element which shouldn't be seen, if option with value 2 is selected show it. You can achieve it using change event.

Angular JS regarding populating dynamic row data in form

Please see this screen shotI need some help. I want to populate dynamic table's row data into a form when i clicked on the particular row.When i try this html elements are repeating along with data when i click on the table rows, but i need like elements should not repeat only data should change. This is my template code
<table class="table2">
<tr>
<th>'Player'</th>
<th>Age</th>
</tr>
<tr ng-repeat=" usr in fc.saveData" ng-click="fc.fnRowClick(usr)">
<td>{{usr.player}}</td><td>{{usr.age}}</td>
</tr>
</table>
<div ng-repeat="data in fc.displayData track by $index">
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
<label for="field2">
<span>Age</span><input type="text" name="field2" required="true" ng-model="data.age"/>
</label>
</div>
This is my js code.
fc.displayData=[];
fc.fnRowClick = function(usr){
console.log(usr);
fc.displayData.push(usr);
console.log(fc.displayData);`
}

html name attribute is beeing duplicated during ng-repeat.
That may cause this problem.
Change:
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
to this:
<label for="field1{{$index}}">
<span>Name</span><input type="text" name="field1{{$index}}" required="true" ng-model="data.player"/>
</label>
Do the same for second label.

Toggle between a textbox and a select using PHP

I have a basic customer information form that I would like to make a little more interactive. The idea being if the user selects a country that is not USA or Canada the state Select turns to a state textbox. I'm sure this can be done with just PHP but have debated using jQuery but would like to avoid it if possible. Here is my form sample:
<tr>
<td>
<input name="city" type="text" id="city" value="<?= $this->aBillingProf['cCity']; ?>" />
</td>
<td>
<select name="state" id="state" style="width:218px;position:relative;top:-4px;">
<? $s = strlen($this->aBillingProf['cState']) == 2 ? strtoupper($this->aBillingProf['cState']) : strtoupper(stateTranslate($this->aBillingProf['cState']));
echo stateSelect('both',$s); ?>
</select>
<input name="state" type="text" id="state" value="<?= $this->aBillingProf['cState']; ?>" />
/*The Idea being only one of the above options is available depending on what is selected from the country select */
</td>
</tr>
<tr>
<td>
<label for="zip">Zip / Postal Code</label>
</td>
<td>
<label for="country">Country</label>
</td>
</tr>
<tr>
<td>
<input name="zip" type="text" id="zip" maxlength="6" value="<?= $this->aBillingProf['cZip']; ?>" />
</td>
<td>
<select name="country" id="country" style="width:218px;position:relative;top:-4px;">
<?= AffiliateStore::countrySelect($this->aBillingProf['cCountry']); ?>
</select>
<!-- <input type="text" name="country" id="country" value="<?= $this->aBillingProf['cCountry']; ?>" /> -->
</td>
</tr>

Basically what I do is to add a div containing the inputs I would need. In this case I would use a select boxes for US and Canadian states and a text input for other. Use the CSS diplay:none to collapse all divs except the one for the default selected country.
<div id="state_inputs">
<div id="us_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="ca_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="other_states_div">
<input type="text" name="other_states" />
</div>
</div>
Now assuming that your select box for the country has the id country_select:
<script>
document.getElementById("country_select").onchange = function() {
var country_select = document.getElementById("country_select");
var country = country_select.options[country_select.selectedIndex].text;
if(country == "USA") {
document.getElementById("us_states_div").style.display="block";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="none";
} else if(country == "Canada") {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="block";
document.getElementById("other_states_div").style.display="none";
} else {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="block";
}
};
</script>
Once you've updated your PHP to output that markup, on the processing side you just look at the selected country and then use the value contained in the correct state input.

This can't be done with just PHP because it requires that you use client side scripting to determine when the event has been triggered. You could use PHP to rebuild the form, however, that would require a reload from the sever. It's much easier just to use JavaScript to handle the event and update the form.