We Keep Coding

jquery code not working for all selection options

jquery code does not alert for all options I have in select element, instead jquery only alerts for 1 of the Select option. Please see the below code
I did spent hours to get this fix by checking solution online, but no success
<div>
<h4>Company name</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select class="form-control" id="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#get_comment_button").on('click',function(){
var optionText = $("#sel1 option:selected").text();
if (optionText == "updated") {
$("#comment").html("Team Updated on ");
}else {
$("#comment").html("Team Validated on ");
}
});
});
</script>

The ID attribute is unique per document and your code does not work in an intended way because you are repeating the same ID. Either use unique IDs or attach an event to the <select>
Also as a side note, it would also be a good practice to use console.log() for debugging instead of alert()
var company_name = $('#company_name');
var owner_name = $('#owner_name');
var address = $('#address');
var vertical = $('#vertical');
$("#get_comment_button").on('click', function() {
if (company_name.val() == "Updated" ||
owner_name.val() == "Updated" ||
address.val() == "Updated" ||
vertical.val() == "Updated") {
$("#comment").html("Team Updated on ");
} else {
$("#comment").html("Team Validated on ");
}
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div>
<h4>Company name</h4>
<select id="company_name">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select id="owner_name">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select id="address">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select id="vertical">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>

You have used same id in all <select>. Id should be unique. So, you can add same class in all <select> tags.
Here is the Demo
$(document).ready(function(){
$(".sel1").on('change',function(){
var optionText = $(this).children("option:selected").text();
alert("Selected Option Text: "+optionText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h4>Company name</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Owner name</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Address </h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div>
<h4>Vertical</h4>
<select id="sel1" class="sel1">
<option></option>
<option>Updated</option>
<option>Validated</option>
</select>
</div>
<div class="form-group" style="margin:100px;">
<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
<textarea class="comment-box" rows="5" id="comment"></textarea>
</div>

How to display results from a search

I have a search page on my Angular application. It search for properties (house, apartments ect). The user selects their criteria through a form, this form triggers a function in my component, which hits an endpoint from my API via a service.
The data is saved in my component, and currently I'm logging it to the console.
What would be the best way to display the results on the page.
This is the search page html.
<div class="container mt-4">
<div class="card">
<form [formGroup]="searchForm" (ngSubmit)="search()">
<div class="card-header">Search for a Property</div>
<div class="card-body">
<!-- County and Town Label-->
<div class="row">
<div class="col-md-6">
<label class="ml-1" for="county">County</label>
</div>
<div class="col-md-6">
<label for="town">Town</label>
</div>
</div>
<div class="row">
<!-- County Column -->
<div class="col-md-6">
<select class ="form-control" id="county" formControlName="county" >
<option *ngFor="let county of counties" [value]="county.value">
{{county.display}}
</option>
</select>
</div>
<div class="col-md-6">
<select class="form-control" formControlName="town">
<option *ngFor="let town of towns" [value]="town.value">
{{town.display}}
</option>
</select>
</div>
</div>
<!-- Bed and Bath Label-->
<div class="row mt-md-4">
<div class="col-md-3">
<label class="ml-1" for="min-bedrooms">Min Bed</label>
</div>
<div class="col-md-3">
<label for="max-bedrooms">Max Bed</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="min-bathrooms">Min Bath</label>
</div>
<div class="col-md-3">
<label for="max-bathrooms">Max Bath</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control" formControlName="min_bedrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="max_bedrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="min_bathrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="min_bathrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-3">
<label class="ml-1" for="min-rent">Min Price</label>
</div>
<div class="col-md-3">
<label for="max-rent">Max Price</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="type">Selling Type</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="type">Property Type</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control" formControlName="min_price">
<option *ngFor="let price of prices" [value]="price.value">
{{price.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="max_price">
<option *ngFor="let price of prices" [value]="price.value">
{{price.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="selling_type">
<option *ngFor="let type of sellingTypes" [value]="type.value">
{{type.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="property_type">
<option *ngFor="let type of propertytypes" [value]="type.value">
{{type.display}}
</option>
</select>
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-4">
<button type="submit" class="form-control btn btn-primary">
Search
</button>
</div>
</div>
</div>
</form>
</div>
</div>
This is the component linked to the HTML
export class PropertySearchComponent implements OnInit {
searchForm: FormGroup;
searchParams: any = {};
property: Property;
constructor(private advertService: AdvertService, private alertify: AlertifyService, private formBuilder: FormBuilder) { }
ngOnInit() {
this.createSearchForm();
}
createSearchForm() {
this.searchForm = this.formBuilder.group({
county: ['', Validators.nullValidator],
town: ['', Validators.nullValidator],
min_bedrooms: ['', Validators.nullValidator],
max_bedrooms: ['', Validators.nullValidator],
min_bathrooms: ['', Validators.nullValidator],
max_bathrooms: ['', Validators.nullValidator],
min_price: ['', Validators.nullValidator],
max_price: ['', Validators.nullValidator],
selling_type: ['', Validators.nullValidator],
property_type: ['', Validators.nullValidator],
});
}
search() {
this.searchParams.county = (Object.assign({}, this.searchForm.value));
this.advertService.propertySearch(this.searchParams).subscribe(data => {
this.property = data;
console.log(this.property);
}, error => {
console.log(error);
});
}
In the search() function above the property search results are saved in this.property.
This is the function in my service that is called from the component.
propertySearch(model: any): Observable<Property> {
return this.http.post<Property>(environment.apiUrl + 'search', model);
}
How should I go about displaying the results saved in this.property.

You need add a table with contain your fields.
And display like this, i assume your property variable has these id, name, email, website.
<table class="table table-striped">
<thead>
<tr>
<th style="width: 20%">
ID
</th>
<th style="width: 50%">
Name
</th>
<th style="width: 10%">
Email
</th>
<th style="width: 20%">
Website
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of property">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.website}}</td>
</tr>
</tbody>
</table>

how to clone div bassed select option

i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>

The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>

Appending row in container

I am writing a code which dynamically creates rows.
The problem is when I click on button it adds row after the already present row. but Now div with id dynamic contains two rows and so if I click now button it will add two rows. If I use ('#dynamic').html() then it grabs columns but if it is done so it violates the indentation because it will not add the div with class row.
Please any body can tell me the solution to problem?
$(function() {
$("#button1").click(function() {
$("#main-row").after($('#dynamic').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="above">
<div class="container">
<div class="row">
<div class="col-sm-1">No.</div>
<div class="col-sm-2">Name of Item</div>
<div class="col-sm-3">Quanity</div>
<div class="col-sm-3">Price</div>
<div class="col-sm-1"><span class="btn"></span></div>
</div>
</div>
<div class="container" id="dynamic">
<div class="row padding-3 " id="main-row">
<div class="col-sm-1 ">1</div>
<div class="col-sm-2 ">
<select class="container-fluid">
<option value="1">Computer</option>
<option value="2">Mobile</option>
<option value="3">LCD</option>
<option value="4">Keyboard</option>
<option value="5">Mouse</option>
</select>
</div>
<div class="col-sm-3 "><input class="container-fluid" type="number" name="name" value="" /></div>
<div class="col-sm-3 "><input type="text" name="text" value="" /></div>
<div class="col-sm-1 ">-</div>
</div>
</div>
<button class="btn btn-primary" id="button1">Add Row</button>
</section>

Try:
$(function() {
$("#button1").click(function() {
$('#dynamic').append($("#main-row").clone().removeAttr('id'));
});
});

Syntax highlighting js

What I use and what I did
I have SyntaxHighlighter (alexgorbatchev.com/SyntaxHighlighter)
<div class="question-text">
<pre width="300px" class="brush: xml">
<?= //php generated text ?>
</pre>
</div>
And it perfectly works when I just write following code bellow:
$(document).ready(function(){
SyntaxHighlighter.all();
});
What I've tried to do
But there's an issue: I want to change brush dynamicaly when user selects it from the select :
<div class="nameselect">
<select name="language">
<option value=" ">Text</option>
<option value="cpp">C++</option>
<option value="csharp">C#</option>
<option value="css">CSS</option>
<option value="java">Java</option>
<option value="js">JScript</option>
<option value="php">PHP</option>
<option value="py">Python</option>
<option value="ruby">Ruby</option>
<option value="sql">Sql</option>
<option value="xml">HTML/XML</option>
</select>
</div>
I wrote some code:
$(document).on('change', 'select[name=language]', function () {
var code = $(this).parent().parent().find("pre");
code.addClass('brush: ' + $(this).val());
SyntaxHighlighter.all();
});
But it doesn't work.
What I think
Actually I found that this library changes my <pre> tag at all.
Any suggestions?
Changed <pre class="brush: xml"> with value <body>HTML's here</body> is looks like:
<div>
<div id="highlighter_860958" class="syntaxhighlighter xml">
<div class="toolbar">
<span>
?
</span>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
<code class="xml plain"><</code>
<code class="xml keyword">body</code>
<code class="xml plain">>HTML's here </</code>
<code class="xml keyword">body</code>
<code class="xml plain">></code>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>