We Keep Coding

Javascript function to toggle 2 divs and change button text - tageting different ID

I have multiple groups of DIV´s with each their button, in these groups I have 2 DIVS that should toggle between them on click on that button, and also switch the content on the buttons, but each group and button have their own unique ID.
The button ID´s are defined with EditButton<%=DataCon("ID")%> (Which gives EditButton1, EditButton2, EditButton3 .. etc) and the 2 DIVS in each group is called EditData<%=DataCon("ID")%> and TextData<%=DataCon("ID")%> (I.e EditData1 and TextData)
The button serverside:
<button id="EditButton<%=DataCon("ID")%>" class="btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
Which result in:
<button id="EditButton1" class="btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
The Severside JavaScript (ASP) I have:
$(function(){
$('div.EditData<%=DataCon("ID")%>').hide();// hide it initially
$('button').on('click', function(){
$('div.EditData<%=DataCon("ID")%>, div.TextData<%=DataCon("ID")%>').toggle();
});
});
$("button.EditButton<%=DataCon("ID")%>").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});
Which results in :
$(function(){
$('div.EditData1').hide();// hide it initially
$('button').on('click', function(){
$('div.EditData1, div.TextData1').toggle();
});
});
$("button.EditButton1").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});
The Severside DIVS in HTML :
<div class="EditData<%=DataCon("ID")%>" style="display:none">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=DataCon("FullName")%>" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData<%=DataCon("ID")%>">
<%=DataCon("FullName")%>
</div>
Which results in:
<div class="EditData1" style="display:none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData1">
Some Name
</div>
The above script is obviously not working because I am not calling the DIVS and Buttons correctly, but how do I fix this?
Best Regards
Stig :-)

I think #Rory McCrossan's idea to use closest() would work, the only issue is that if you have display none on the container with the button in it, then the button won't be visible to begin with.
You could adjust your markup a bit so that the Edit button and the form are both siblings of a common parent. That would allow you to use nextSibling() in vanilla JS, or next() in jQuery
$('.toggle').on('click', function(event) {
$(this).next('.EditData').toggleClass('invisible');
let text = $(this).parent().find('.TextData').toggleClass('invisible');
let newText = $(this).text() === 'Åben Redigering >>' ? '<< Luk Redigering' : 'Åben Redigering >>';
$(this).text(newText);
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id="EditButton1" class="toggle btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
<div class="EditData invisible">
<div class="input-group">
<input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData">
Some more info should appear here below
</div>
</div>
If you do it this way, you're relying on the structure of your template. You don't need to use a dynamic id to do a query each time as long as you put your button that triggers the toggle in the same position relative to one another with the same class names, this should work. Let me know if I misunderstood what you were trying to do there and I can edit my answer :)

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.

You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />

You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

jQuery getting previous input value

<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
</span>
</div>
</div>
I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.

Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:
$('#btn-chat').click(function() {
var inputVal = $('#btn-input').val();
// do something with the value here...
});
If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():
$('#btn-chat').click(function() {
var inputVal = $(this).closest('.input-group').find('input').val();
// do something with the value here...
});
If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.

$("#btn-chat").click(function(){
var input_values = $(this).parent().parent().find("input").val();
alert(input_values);
});

As #RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
//OR $(this).parent().prev().val();
console.log( val );
});
});
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
console.log( val );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>

Limit the up down movement of divs with Jquery

I making a "to do list" of task to be done. I have some buttons that will move the tasks up and down on the list.
I go the up and down buttons going. My only issue is that the task divs are able to move up and down the entire page. How can I keep the task divs to only moving up and down on on each other?
Thank you!
Here's my code:
$(document).ready(function(){
$('.up_button').click(function(){
$(this).parents('.task').insertBefore($(this).parents('.task').prev());
});
$('.down_button').click(function(){
$(this).parents('.task').insertAfter($(this).parents('.task').next());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write HTML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write XML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>

1st: I think you need to define $(this) before going to insertAfter or insertBefore
2nd: you can use .closest()
$(document).ready(function(){
$('.up_button').click(function(){
var ThisIt = $(this);
$(this).closest('.task').insertBefore(ThisIt.closest('.task').prev('.task'));
});
$('.down_button').click(function(){
var ThisIt = $(this);
ThisIt.closest('.task').insertAfter(ThisIt.closest('.task').next('.task'));
});
});
Demo Here

How to add fileds dynamically using javascript with Bootstrap?

I got the code add fields dynamically here Add fields dynamically - link
when I try use this code insight my form class <form class="form-horizontal" action="create.php" method="post"> it won't work but when put this filed out from form class it will work I know have to changes in java script but I'm new to JS so please help me the changes
this my form:
<body>
<form class="form-horizontal" action="create.php" method="post">
<div class="form-group">
<label for="des" class="col-sm-2 control-label">To Address</label>
<div class="col-sm-8">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group ">
<input class="form-control"name="fields[]"type="text" placeholder="To....." />
<span class="input-group-btn">
<button class="btn btn-success btn-add"type="button">
<span class="glyphicon glyphicon-plus"></span> </button> </span>
</div>
</form>
</div>
</div>
</div>
<div class="form-group">
<input name="submit" class="btn btn-success" type="submit" value="Save" id="search"/>
</div>
</form>
</body>
myscript :
<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>

You made a mistake in your HTML markup, adding a form inside another form, and i had a look at your reference, you would see you did make a mistake.
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>
</div>
</div>
</div>
So if you wanted to add your POST method, you would add it into the form tag there, and not create a new one.
Hope this helps.

here i did a mistake to add form insight form the easy way to add multiple fields :
<label for="des" class=" control-label">Description</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<div class="col-sm-8">
<input id="des" type="text" class="form-control" name="descrip[]"></div>
<span class="remove-field">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
script funtion :
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});