Show Selected Items Before Removing from Database - javascript

I've been researching how to do this and I can't find any helpful links so I'm asking here.
I have table on my website with data from my database. Each item has a delete checkbox next to it. If the user checks these boxes then hits the delete button, they are prompted with a message asking them if they are sure they want to delete the items. If they say yes, then the items are removed. I'd like to show what they selected in the confirmation box.
Example: Let's say they selected item4, item8, and item9, then clicked on delete. I'd want the prompt to say:
"Are you sure you want to delete the selected items?
item4
item8
item9"
I'm not sure how to even start this. Here's my current delete button:
<input type="submit" value="Delete" onclick="return confirm('Are you sure you want to delete the selected item(s)?');"/>

You could use javascript for this, something like below will work (pseudo code);
<!-- Add the onclick handler -->
<input type="submit" onclick="submitOnClick();" value="Delete" />
// Javascript function
function submitOnClick() {
var ret = "";
var table = getTable();
for (int i = 0; i < table.length; i++) {
if (row.checked) {
ret += row.innerText + " ";
}
}
alert('Are you sure you want to delete the selected items of " + ret);
}
Depending how your HTML is setup/structured you may have to change things to get it working properly.
Hoped this helped.

Related

Button unexpectedly submitting form

So, I'm building a form where you select a date, then you can add timeslots to that date to schedule things. Something like this:
<form name="NewForm" ng-submit="submitForm(NewForm)">
<form-group>
<angular-ui datepicker>
<button ng-click="addRow()">
</form-group>
<form-group ng-repeat="timepicker in timepickers track by $index">
<angular-ui timepicker>
<select box for tasks to pick from>
<button class="btn btn-danger" ng-click="deleteRow($index)">
</form-group>
<button type="submit" class="btn btn-primary">
</form>
Then in the controller I have:
$scope.timepickers = []
$scope.addRow = function() {
$scope.timepickers.push({ some default object data to fill out the row });
}
$scope.deleteRow = function(index) {
$scope.timepickers.splice(index, 1);
}
$scope.submitForm(form) {
if ($scope.timepickers.length < 1) {
//do some stuff and don't send the form
}
else if (form.$valid) {
//send form data to api
}
else {
//do some other stuff and don't send the form
}
}
The delete button was the last thing I added, and everything was working fine before I added it. The problem, however, is that sometimes when I push the delete button on a row, it submits the form and for the life of me I can't figure out why.
If I only have 1 or 2 'rows' it works fine. The delete button deletes the row and I can keep adding new rows, etc. If I have more than 2 rows added, though, AND I try to delete one of the rows in the middle (ie where if I checked if '$middle == true' in the ng-repeat), then it deletes the row and calls the submitForm function.
I know it actually runs through the submitForm function because if I don't fill out the form completely, then the validation stuff still triggers and the submit doesn't go through.
Anyone have any ideas?
You need to add the attribute of type button:
<button class="btn btn-danger" ng-click="deleteRow($index)" type="button">

Child Div is not removed when tried to remove using Jquery

Clearing child div inside parent div, there are many answers like :
$(".ChildDiv").html("");
$('.ChildDiv > div').remove();
$(".ChildDiv").html("");
$("#ParentDiv").html("");
$(".ChildDiv div").remove();
$(".ChildDiv div").empty();
$('.ChildDiv ').find('div').remove();
Probably I have listed all possible way to remove the div's, but even after using all these, I still not able to clear all the div's inside Parent Div. let me explain what I am doing and what I need.
Scenario :
I have two container-1, one of the container has input search box, where I can search for entering employee name and select few employees Ex. 5 and can use "Add" button to move those employees to the other container-2 which is 'div'.
Now I click on report button event and get the information of those 5 people in different aspx, now if i go back to the page where i have to search for another 3 employees and when I again click on the "Add" button, it should add only 3 employees instead it is adding last searched 5 + 3 employees!!.
So i am trying to clear the 5 employees inside that div after i click on "Report" button , when i use alert() it says it has 0 element, but when I add it for the second time, it appends the data again, which i dont need. here is the code :
Points to remember :
1. ParentDiv is the container-2
2. ChildDiv is the child div inside ParentDiv(which is dynamically appended when we select 5 employees on "Add" button click"
Here is the code:
HTML :
<table id="topTable">
<tr>
<td id="leftpane">
<h4>Search for Employee by Name or Profile:</h4>
<input type="text" id="EmployeeSearchBox" class="search-box" aria-multiselectable="true" />
<select id="EmployeeList" size="20" multiple></select>
</td>
<td id="centerpane">
<div> <input type="button" value="Add >>" class="AddButton" id="buttonAdd" /></div>
<div> <input type="button" value="Add All >>" class="AddButton" id="buttonAddAll" /></div>
</td>
<td id="rightpane">
<h4>Selected Employees:</h4>
<div id="ParentDiv"></div>
</td>
</tr>
</table>
Run Report button event
<input class="data" type="submit" name="cmdSubmit" value="Run Report" onclick="return FormValidate();"
onserverclick="RunReport" runat="server" id="Submit1" />
Add Button Click :
which moves the employees from container-1 to container-2.
$(document).on('click', '#buttonAdd', function (e) {
$('#EmployeeList :selected').each(function (i, selected) {
myHash[$(selected).val()] = $(selected).text();
});
var myNode = $("#ParentDiv")[0];
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for (var emp_id in myHash) {
var emp = $("#ParentDiv").append("<div class= ChildDiv id=" + emp_id + ">" + myHash[emp_id] + " <span class='close'>×</Span> </div>");
}
$('#EmployeeSearchBox').val("").trigger('input');
});
On click of "Report" button it should clear all the elements from ParentDiv/ChildDiv which is what I did, but still it is not clearing it, how can I resolve/remove these elements once "Report" button event clicked.
Here is a sample of "Report" button event :
function FormValidate() {//Part of my other code
$(".ChildDiv").html("");
$('.ChildDiv > div').remove();
$(".ChildDiv").html("");
$("#ParentDiv").html("");
$(".ChildDiv div").remove();
$(".ChildDiv div").empty();
$('.ChildDiv ').find('div').remove();
}
None of them is working, i feel there is an issue with the "Add" button event, where it is storing the data.
NOTE :
I don't want to clear the array of employee list, since I want to select multiple employees again again Ex. I can select 2 employees starts with the letter "M" and I can search the 2 employees of letter "L" and add those 2 employees, the container should hold 4 employees before "Report" button click.
Let me know if I am clear enough.
Console Log
Finally I could able to fix the issue, i was facing, I am posting the answer, now it is working as I need.
$(document).on('click', '#buttonAdd', function (e) {
var div_count = $('#ParentDiv').find('div').length;
if (div_count === 0) {
myHash = []; // Clearing the hash, so that it can add fresh employees, if count == 0 in container- 2.
$('#EmployeeList :selected').each(function (i, selected) {
myHash[$(selected).val()] = $(selected).text();
});
}
else { // If there are existing employees in container-2 then append few more.
$('#EmployeeList :selected').each(function (i, selected) {
myHash[$(selected).val()] = $(selected).text();
});
}
var myNode = $("#ParentDiv")[0];
console.log(myNode);
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for (var emp_id in myHash) {
var emp = $("#ParentDiv").append("<div class= ChildDiv id=" + emp_id + ">" + myHash[emp_id] + " <span class='close'>×</Span> </div>");
}
$('#EmployeeSearchBox').val("").trigger('input');
});
What I did
Since I should be able to append multiple employees by searching, that is handled in 'else' part, if I generated the "Report" then, I am clearing the Container-2.
When I come back to page to search few more employees, by this time Container-2 will not be having any employees, so
var div_count = $('#ParentDiv').find('div').length;
if (div_count === 0) {
myHash = [];
//....
}
will clear the array which allow me to add fresh employees, hence it solved my problem :)
Thanks all for the support.
Edited to adjust on comments:
You need to clear the myHash variable. Otherwise employees will be added again from there.

best way to format multiple onclick buttons

Back again! I always get such great responses here!
I currently have a HTML site with multiple onclick buttons calling up a js function allowing users to "opt-in" to certain notification services. If the user wants to op-in to multiple groups, they are required to hit each button one at a time.
It technically works, but as you can imagine it certainly doesn't look pretty. Additionally, the way it's set up now, the user doesn't get any feedback that they have successfully subscribed to said group (not a huge concern though).
Here's a snip of the code right now:
<button onclick="_pcq.push(['addSubscriberToSegment', '50cc']);">
50cc
</button>
<button onclick="_pcq.push(['addSubscriberToSegment', '65a']);">
65A
</button>
<button onclick="_pcq.push(['addSubscriberToSegment', '65b']);">
65B
</button>
<button onclick="_pcq.push(['addSubscriberToSegment', '85a']);">
85A
</button>
<button onclick="_pcq.push(['addSubscriberToSegment', '85b']);">
85B
</button>
I should also note that although I only listed 5 buttons here, the website actually has more than 20...which is pretty overwhelming.
Does anyone have an elegant way (open to suggestions) to format this?
I thought of doing bullets, but I struggled with getting the form to run 'addSubscriberToSegment' with different values off of one submit button.
Surely it's just my lack of expertise that has got me stumped. Perhaps some of you will have a nicer solution for me?
Thanks!
I would do nested checkboxes for something like this. Each option has a checkbox, but there are also general sections that you can check on or off to enable/disable a group of options. Take a look at this codepen by lonekorean for an idea how to style them, you can add a little bit of javascript to make parent checkboxes enable/disable their children items.
The best way, probably, is to replace your buttons with checkboxes, as mentioned by u_mulder.
In any case it is better to create a function where you can handle the subscription and the notification instead of pushing things on the fly into an array.
for example:
function subscribeAnything(codeVariable){
_pcq.push(codeVariable);
alert("Great you have subscribed to " + codeVariable);
}
Then you add an eventlistener as commented by Jordan Davis to link this function.
If you decide to effectively replace the buttons by checkboxes, you could set the subscription code into the name or id of each checkbox and then loop trough your checkboxes to push them into your array.
var myChbxArray = [];
var btn = document.getElementById("pushCheckBoxes");
btn.addEventListener("click", pushAllChbxIntoArray, false);
function pushAllChbxIntoArray(){
myChbxArray = []; // clear content of array
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox" && inputs[i].checked == true) {
myChbxArray.push(inputs[i].name);
}
}
notification();
}
function notification(){
var myDiv = document.getElementById("result");
myDiv.innerHTML = "You have checked the following checkboxes:<br>";
for(var i = 0; i < myChbxArray.length; i++) {
myDiv.innerHTML = myDiv.innerHTML + myChbxArray[i] + "<br>";
}
}
ul{
list-style-type: none;
}
<div id="checkboxList">
<ul>
<li><label for="chk1"><input type="checkbox" name="chk1" id="chk1">Chk1</label></li>
<li><label for="chk2"><input type="checkbox" name="chk2" id="chk2">Chk2</label></li>
<li><label for="chk3"><input type="checkbox" name="chk3" id="chk3">Chk3</label></li>
<li><label for="chk4"><input type="checkbox" name="chk4" id="chk4">Chk4</label></li>
</ul>
<button id="pushCheckBoxes">ClickMe</button>
</div>
<div id="result">
</div>

check radio button with no ID, just name, type, value

I am trying to select some radio button on a webpage using Javascript inside Tampermonkey. For this particular button, there is no element ID, so I'm not really sure how to select them.
There's really no other identifying elements for these buttons that I can see.
Note: There's several radio buttons on this page, and the only unique identifier between them is the "value." There are 12 other buttons, but I want these 3 selected by default after the page loads.
<input name="Offense" type="radio" value="Indifferent">
<input name="Likelihood" type="radio" value="Indifferent">
<input name="Humor" type="radio" value="Indifferent">
So, I tried to catch them all at once with this:
document.getElementByValue("Indifferent").checked = true;
but it's not doing anything, I'm sure I'm missing something.
Thank you!
Using querySelector/querySelectorAll from Selectors API returns a NodeList of matching DOM Nodes. Since it is not an Array, a for-loop is used:
var inputs = document.querySelectorAll('input[value="Indifferent"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
The same in jQuery:
$('input[value="Indifferent"]').attr('checked', true);
// list will contain all the radio buttons
var list = $('input[value="Indifferent"]')
$.each(list, function(index, value) {
alert( index + ": " + value );
});
All the data you need will be in the value object
https://jsfiddle.net/o46rhpwL/
And if you are looking for the checked value in the list
https://jsfiddle.net/z73ah82b/

Best way to add/show additional form fields

I am hoping for some insight on the best way to accomplish the following. I want to create a form that will allow for more fields to be added when a + or add button is clicked. So for example the user would fill out a text field lets call it "Description" and then next to it another field called "Unit number". I want to allow for multiple "Description" and "Unit number" fields without submitting the form after each entry, but for the sake of keeping the site looking "Clean" I don't want there to be several duplicate fields if the user only needs to enter information into one of them. I was thinking about using JavaScript to hide the additional fields by just setting display:none. Is this a good/efficient solution? Is there a better solution? I am new to programming so take it easy if you feel this is a dumb question.
The best way to do this is to make your fields and put them in a div and then hide it. Use jQuery to .clone your first row and then update the field names any time the user clicks an add link.
You can use a templating library like mustache or handlebars. You can also do this using jQuery. My approach would be to generate new elements on the fly. I won't hide it so that the user can see if he is already inputting duplicate. But if you want to make your markup cleaner, you can also hide the field once the user has already inputted something. So when the user clicks on the add button, you will need to check if the user has actually inputted something, if there is an input, then hide it and then generate a new input again.
If you need a code sample, feel free to ask.
Here's some javascript I wrote on my own site awhile ago:
var SITE = SITE || {};
SITE.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button'),
$fakeFile = $this.siblings('.file-holder');
if(newVal !== '') {
$button.text('File Chosen');
if($fakeFile.length === 0) {
$button.after('<span class="file-holder">' + newVal + '</span>');
} else {
$fakeFile.text(newVal);
}
}
};
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<span class=\"file-wrapper\"><input type=\"file\" name=\"screenshot[]\" id=\"screenshot\" /><span class=\"button\">Choose a screenshot</span></span>";
document.getElementById(divName).appendChild(newdiv);
counter++;
$('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
}
}
$(document).ready(function(){
$("#addss").click(function(){
addInput("screenshots");
});
});
Then you can just use the array for the name in the php or whatever else you're using to handle the data.
HTML:
<div id="screenshots">
<span class="file-wrapper">
<input type="file" name="screenshot[]" class="screenshot" />
<span class="button">Choose a screenshot</span>
</span>
</div>
<input type="button" id="addss" value="+Screenshot" class="btn" />

Categories