We Keep Coding

Check Common Dropdown Items (JavaScript, jQuery)

I need some help with the following code.
So I have a page like the following one in the example.
So far, I tried the following method. (Please check my code and live example)
With my current method to select the checkboxes, I have to write code for each and every option like this.
$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
Is there any simpler way to do this? for an example can we just select every one which contains us_, as_, eu part without assigning unique values to every option. Any assistance you can provide would be greatly appreciated.
$("button.select-all").on("click", selectAll);
function selectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !0)
})
}
$("button.unselect-all").on("click", unselectAll);
function unselectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !1)
})
}
$("button.select-us").on("click", selectAmerica);
function selectAmerica() {
unselectAll();
$(".schoolareas").toArray();
$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
}
$("button.select-eu").on("click", selectEurope);
function selectEurope() {
unselectAll();
$(".schoolareas").toArray();
$("#check_eu, #check_eu-1").prop("checked", !0)
}
$("button.select-as").on("click", selectAsia);
function selectAsia() {
unselectAll();
$(".schoolareas").toArray();
$("#check_as, #check_as-1").prop("checked", !0)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid py-4">
<div class="row text-center">
<div class="col-8 offset-2">
<div class="btn-groups">
<button class="btn btn-primary select-all">Select All</button>
<button class="btn btn-primary unselect-all">Unselect All</button>
<button class="btn btn-primary" id="latencybutton">Count</button>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Country/Area</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item select-us" type="button">America</button>
<button class="dropdown-item select-eu" type="button">Europe</button>
<button class="dropdown-item select-as" type="button">Asia</button>
</div>
</div>
</div>
</div>
</div>
<div class="container col-8 offset-2">
<div class="table-responsive shadow p-3 mb-5 bg-light rounded text-xs-center">
<table id="grid" class="table table-hover">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string">Locations:</th>
<th data-type="number">Scores:</th>
<th data-type="number">Average:</th>
<th class="thmw" data-type="string">Score Status:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="check_eu" checked />
<label for="check_eu"></label>
</td>
<td>London (EU)</td>
<td class="schoolareas" id="eu"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_eu-1" checked />
<label for="check_eu-1"></label>
</td>
<td>Manchester (EU)</td>
<td class="schoolareas" id="eu-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us" checked />
<label for="check_us"></label>
</td>
<td>New York (US)</td>
<td class="schoolareas" id="us"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-1" checked />
<label for="check_us-1"></label>
</td>
<td>California (US)</td>
<td class="schoolareas" id="us-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-2" checked />
<label for="check_us-2"></label>
</td>
<td>Florida (US)</td>
<td class="schoolareas" id="us-2"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as" checked />
<label for="check_as"></label>
</td>
<td>Singapore (AS)</td>
<td class="schoolareas" id="as"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as-1" checked />
<label for="check_as-1"></label>
</td>
<td>China (AS)</td>
<td class="schoolareas" id="as-1"></td>
<td class="status"></td>
</tr>
</tbody>
</table>
</div>
</div>

Sure you can! Instead of accessing elements by their IDs (which have to be unique), give them all a common class and grab them by that instead.
So elements that look like this:
<input type="checkbox" id="check_us-1" checked />
<input type="checkbox" id="check_us-2" checked />
Get an additional class prop, like this:
<input type="checkbox" id="check_us-1" class="us" checked />
<input type="checkbox" id="check_us-2" class="us" checked />
Then you can update their props in batch like this:
$(".us").prop("checked", !0)

Without modifying your current HTML you can select all elements wich class contains a string with:
$('checkbox[class^="us"]')
and changed their checkbox value like this:
$('checkbox[class^="us"]').prop("checked", !0)
then change us for whatever word you want.

There are several ways you can do this using either JavaScript or jQuery.
You could use the attribute contains selector to find all elements with an id that matches a pattern:
$('[id*="us_"]').prop('checked', true);
This form of selector also works with JavaScript's native document.querySelector() method.
However, this runs the risk of unintentionally selecting irrelevant elements that happen to match the selector. The selector above would also match an element with an id of "status_code", for example.
A better approach is the one that #jonny suggests in his answer. While the id attribute of every element in a document has to be unique, other attributes like "class" do not. This allows you to assign a css class name to a group of related elements and select them by that class name using the class selector. (Again, this selector also works with the document.querySelector method).
Personally, I dislike using css class names to select related groups of elements because css classes are for styling, not for functionality. So another approach you can use if you want to keep style an function separate is to include data attributes like so:
<input type="checkbox" id="check_us-1" checked data-group="us" />
<input type="checkbox" id="check_us-2" checked data-group="us" />
You can then use the attribute selector to select both inputs:
$('[data-group="us"]').prop('checked', true);

Get td value when clicking the td row. MVC

I have a prblem with fetching the right value from a Td element. I can get the first element in the table when im clicking on that element but no other row is working. My code is looking like this:
<div id="Users">
<table id="UserTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th name="id">ID</th>
<th name="UserName">Användarnamn</th>
<th>Installation</th>
<th>Säljföretag</th>
</tr>
</thead>
<tbody>
#foreach (var users in Model.AdminUsers)
{
<tr>
<td id="userId">#users.Id</td>
<td id="userName" >
<a id="userIds"href="#backdropreport" class="">#users.UserName </a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
</tbody>
</table>
</div>
And my Jquery code:
$("#userName").click(function () {
var id = $("#userId").text();
$("#user").val(id);
});
Model content dialog
<div id="backdropreport">
<div class="modal-content">
<div class="header">
<h3>Återställ lösenord</h3>
</div>
#using (Html.BeginForm("ResetPassword", "Users", FormMethod.Post))
{
<div class="copy">
<div class="form-group">
<div class="m-form-item">
För att återställa lösenordet så tryck på återställ så kommer ett mail skickas med ett nytt lösenord
</div>
<div style="clear: both;">
</div>
<div class="m-form-item">
<input type="submit" id="reset" value="Återställ" class="btn btn-primary" />
<a id="close" href="#" class="btn btn-grey">Stäng</a>
</div>
<div class="m-form-item">
</div>
</div>
<input type="text" id="user" name="user" />
</div>
}
</div>
<div class="overlay"></div>
The thing i want to do is to fetch the id of a specific td element when a user is clicking on the username. At the moment just the first element in the table is working. Any suggestions?

Html attribute "id" should be unique, but when you're doing foreach loop, then in all rows < td > element has id="userId". I would recommend you adding userId to html id attribute:
<tbody>
#foreach (var users in Model.AdminUsers)
{
<tr>
<td id="userId_#users.Id">#users.Id</td>
<td id="userName_#users.Id" >
<a id="userIds"href="#backdropreport" class="">#users.UserName </a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
</tbody>

An id is supposed to be unique through the whole DOM document. You can use classes instead, and use the .class selector.
#foreach (var users in Model.AdminUsers) {
<tr>
<td class="userId">#users.Id</td>
<td class="userName">
<a class="userIds" href="#backdropreport">#users.UserName</a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
$(".userName").click(function() {
var userId = $(this).siblings(".userId").text();
alert(userId);
});

Get the text box value and display it into the h3 element

Tried to get the text box value and display into the h3 element in above the textbox field
Here is my HTML Code :
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to get the input field value <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]"> and display the value into the "
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">"**Here the text box value"</strong> </h3>
" on blur function and this was dynamic text box
My Jquery :
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});

I added an id attribute to the h3 where you want to display it and use that as reference on the blur event callback: DEMO HERE
HTML
<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>
jQuery
$("input").blur(function () {
var string = $(this).val();
$('#output').html(string);
});

See a working demo here: http://jsfiddle.net/wPCZ5/
You need to do this in your handler:
$(this).closest('div').find('h3 > strong').html(string);
for all text boxes to work. The closest() call looks up the DOM hierarchy and returns the first matching element. In your case, it is the accordion div. The find() call then looks down the DOM hierarchy for the matching element. Finally html() replaces the current HTML within the element with the supplied string. Your original call to append() would add the string to whatever is already present.

There's a working fiddle here: http://jsfiddle.net/u63CU/ but I think you should not reuse class and ID names like you have. It can lead to many undesired results, as jquery selects by id or class name.
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong id="text-value" class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
$( "#attribute_name" ).blur(function() {
var string = $(this).val();
$('#text-value').text(string);
});

try something like this
$( "input" ).blur(function() {
$(this).closest('strong.attribute_name').text(this.value);
});

If you want to place text box value in place of **Here Text box value should be displayed**, please try this:
$( "input" ).blur(function() {
var string = $(this).val();
$(".attribute_name").text(string);
});

check to see a child div has certain link in a parent DIV

<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
How can i use jQuery/Javacript to find link with "abc" inside #name div of #posts table.
and after locating it (the link with abc). jQuery will add html content to #post-content #load div of that table that has link with "abc" inside ,using the html(); function in jQuery.
that means after adding my code will look like this :
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
Some stuff is added here using html()
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
while the #name with no link with "abc" which is the link with "user2" will not be affected or modifeid.
How can i do this?
I hope you understand.

Assuming you fix the html and use classes:
$('.name a[href*="abc"]').closest('tr').find('.load').html('Some stuff is added here using html()');

Find a tag with href containing 'abc'
Get parent tr
Find #postcontent >#load within this element
var x = $('a[href*="abc"]');
var b = x.parents('tr');
var c = b.find('#post-content > #load');
alert(c.html());

how to create forms dynamically in javascript

I have this div, where divBrdr should contain a form summaryConfig
<div id="popup">
<div id="popupClose">
<input type="image" alt="close window" src="images/close_btn.gif" width="20" height="20" onclick="" align="right">
</div>
<div id="divBrdr" >
</div>
</div>
<div id="backgroundPopup">
</div>
Right now i have this form inside divBrdr but then this popup appears differently for create and update so I wanted to make this form made dynamically. Can somebody help me do that?
<form style="padding-bottom:11px;" name="summaryConfig" method="post" action="">
<img alt="title" src="images/update_conform_title.gif" width="189" hspace="4" height="17" vspace="4"><br>
<br>
<table align="center" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr> <td width="800"></td> </tr>
</table>
<div id="postUploadInfo">
</div>
<table align="center" border="0" cellpadding="10" cellspacing="0" width="84%">
<tr>
<td colspan="3" align="center">
<label>
<input type="button" tabindex="4" id="btnOk" value="Done" class="btn" onClick="">
</label>
</td>
</tr>
</table>
</form>

if you want to add this form dynamically then you can hold your form in a variable and append that variable to divBrdr div on button click.
VariableHoldingForm = "<form style='padding-bottom:11px;' name='summaryConfig' method='post' action=''> ";
VariableHoldingForm +="<img alt='title' src='images/update_conform_title.gif' width='189' hspace='4' height='17' vspace='4'><br> <br> ... and till...</form>'
$('#buttonId').click(function(){
$('#divBrdr').append(VariableHoldingForm);
});
even you can use document.createElement() to create any html tag
**EDIT**
to unAppend remove html of your div like this..
$('#divBrdr').html('');
and then again add new form element variable on update button
$('#updateButton).click(function(){
$('#divBrdr').append(newForm);
});