I am creating a HTML table and I want it to be editable. so I created javascript like this:
<script>
var buttons = document.getElementsByClassName("clicker");
var buttonclicked = function(e){
if(e.target.textContent == "Edit")
{
e.target.textContent = "Cancel";
var id = e.target.id;
var table = document.getElementById("tr"+id);
var editable_elements = document.querySelectorAll("[contenteditable=false]");
var sub = document.getElementById("sub"+id);
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"edit.php");
table.appendChild(f);
var j = document.createElement("input");
j.setAttribute("type", "text");
j.setAttribute("name", "subject");
j.setAttribute("value", sub.textContent);
j.setAttribute("placeholder", sub.textContent);
j.setAttribute("disabled", true);
j.setAttribute("style", "width: 150px");
j.textContent = sub.textContent;
sub.innerHTML = "";
f.appendChild(j);
sub.appendChild(j);
for(var k = (id*6); k < (id*6)+6; k++){
var l = k;
var index = k -(k*id) + 1;
l = document.createElement("input");
l.setAttribute('type',"number");
l.setAttribute("style", "width: 75px");
l.setAttribute("step", "0.01");
if(index <= 4){
l.setAttribute('name',"g"+index);
l.setAttribute('placeholder',"G"+index);
l.setAttribute("value", editable_elements[k].textContent);
}
else if(index == 5){
l.setAttribute('name',"creditos");
l.setAttribute('placeholder',"credits");
l.setAttribute("value", editable_elements[k].textContent);
}
else if(index == 6){
l.setAttribute('name',"criteria");
l.setAttribute('placeholder',"criteria");
l.setAttribute("value", editable_elements[k].textContent);
}
editable_elements[k].innerHTML = "";
f.appendChild(l);
editable_elements[k].appendChild(l);}
var s = document.createElement("button");
s.textContent = "Save";
s.setAttribute('type',"submit");
s.setAttribute('value',"update");
s.setAttribute("id", id);
s.setAttribute("name", "action");
var clickbutton = document.getElementById("save"+id);
f.appendChild(s);
}
else //save button has been clicked
{
//nothing
}
};
for(var j = 0; j < buttons.length; j++)
{
buttons[j].addEventListener('click', buttonclicked);
}
</script>
This creates a lot of input forms in the table cells (check the image: http://imgur.com/z5DRRZz) and a submit button and try to send it to my PHP file (edit.php), all seems to work well, but when it submits to the PHP file, it submits an empty string in the place of "Subject". I dont know why. I know that bracause as soon as I press "save" button it tells me I have accessed this appologize function:
else if ($_SERVER["REQUEST_METHOD"] == "POST")
{
if($_POST['action'] == ["update"])
{
//validate submission
if(empty($_POST["subject"]))
apologize("You must provide what subject to change");
...
}
...
}
Related
I have created checkbox using javascript and i am trying to change the color once the checkbox is clicked and if someone uncheck it goes back to previous state means in the original form and i have created the checkbox in dynamic way using javascript and here is the code i have tried to create a checkbox
<div id="checklist"></div>
and here is the javascript code
const checkboxArray = [];
const checkboxList = ['1','2','3]
checkboxList.forEach((checkboxes) => {
const checklist = document.getElementById("checklist");
checklist.style.display = "inline-block";
checklist.style.alignItems = "center";
checklist.style.flexDirection = "row";
const inputCheckbox = document.createElement("input");
inputCheckbox.type = "checkbox";
inputCheckbox.name = "checklist";
inputCheckbox.id = checkboxes;
let label = document.createElement("label");
label.style.color = "#333333";
inputCheckbox.style.backgroundColor = "#219653 !important";
label.style.paddingTop = "35px";
let text = document.createTextNode(checkboxes);
label.htmlFor = checkboxes;
label.appendChild(text);
checklist.appendChild(inputCheckbox);
checklist.appendChild(label);
checklist.appendChild(document.createElement("br"));
checkboxArray.push(inputCheckbox.id);
});
and i am also try to change the color when someone clicked on select all button and here is the code for that
Select
all
and here is the function
async function toggle(source) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
console.log(checkboxes);
const checklistResponse = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source) checkboxes[i].checked = source.checked;
}
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source) checkboxes[i].checked = false;
}
document.getElementById("selectAll").checked = false;
}
Something like this
function changeColor(id, color){
document.getElementById(id).style.backgroundColor = color;
}
function checked(id){
if(document.getElementById(id).checked == true){
changeColor(id, blue);
var v = 100;
}else if(document.getElementById('kind').checked == false){
//other code
};};
You have to put the id in quotation marks and the color in quotation marks
I have an input of type checkbox with an onchange event as shown below:
<input type="checkbox" runat="server" id="cbWarehouse" onchange="disableAllButtons()"/>
<script>
function disableAllButtons()
{
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (i = 0; i < gvDetailControls.length; i++)
{
gvDetailControls[i].disabled = true;
}
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (i = 0; i < gvSummaryControls.length; i++)
{
gvSummaryControls[i].disabled = true;
}
}
</script>
This function's purpose is to disable all buttons in two GridViews - gvSummary and gvDetail. However, it only disables the buttons in whichever GridView I mention first in the JS function. I.e. in the example above, the buttons in gvDetail will be disabled but not in gvSummary.
So it seems that the function stops halfway through..?
Anyone have any ideas where I am going wrong?
****EDIT (RESOLVED)****
Issue was resolved by checking that each GridView was defined and not null:
<script>
function disableAllButtons()
{
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
if (typeof (gvSummary) != 'undefined' && gvSummary != null)
{
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (var i = 0; i < gvSummaryControls.length; i++) {
gvSummaryControls[i].disabled = true;
gvSummaryControls[i].className = "btn-xs btn-secondary";
}
gvSummary.title = "You have unapplied filters. Pleae update table.";
}
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
if (typeof (gvDetail) != 'undefined' && gvDetail != null)
{
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (var i = 0; i < gvDetailControls.length; i++) {
gvDetailControls[i].disabled = true;
gvDetailControls[i].className = "btn-xs btn-secondary";
}
gvDetail.title = "You have unapplied filters. Pleae update table.";
}
}
</script>
Not sure what the problem is, also not a javascript coder at all. Can someone shed some light on what I am missing.
The main problem I am having is trying to make this a bit more dynamic based on the selection of a select input. if I comment out the first two variable entries and set the stropt variable to something static that would identify one of my div's then it works fine.
aChecked = false;
function checkByParent() {
var sel = document.getElementByID("me");
var stropt = sel.options[sel.selectedIndex].value;
//var stropt = 'test2';
var collection = document.getElementById(stropt).getElementsByTagName('INPUT');
if (aChecked === false) {
aChecked = true;
} else {
aChecked = false;
}
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() === 'CHECKBOX')
collection[x].checked = aChecked;
}
}
Here is my fiddle
http://jsfiddle.net/sasatek/b654V/2/
The problem is getElementByID, which is a mistake it should be getElementById
Like this
aChecked = false;
function checkByParent() {
// var sel = document.getElementByID("me");
var sel = document.getElementById("me");
var stropt = sel.options[sel.selectedIndex].value;
//var stropt = 'test2';
var collection = document.getElementById(stropt).getElementsByTagName('INPUT');
if (aChecked === false) {
aChecked = true;
} else {
aChecked = false;
}
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() === 'CHECKBOX')
collection[x].checked = aChecked;
}
}
Javascript & DOM api is written in CamelCase
I have a little procedure to prevent server side action if all texboxes do not have values.
I want to assign a color to the texbox for in case a value was not added.
This is not working the way I expected.
var txtName = document.getElementById("MainContent_txtName").value;
var txtSurname = document.getElementById("MainContent_txtSurname").value;
var txtContact = document.getElementById("MainContent_txtContactNumber").value;
var txtEmail = document.getElementById("MainContent_txtEmail").value;
var txtMessage = document.getElementById("MainContent_txtMessage").value;
var fields = new Array(txtName, txtSurname, txtContact, txtEmail, txtMessage);
var tot = 0;
for (var i = 0; i < fields.length; i++) {
if (fields[i] == "") {
fields[i].style.backgroundcolor = '#FEF5CA';
tot++;
}
else {
fields[i].style.backgroundcolor = "white";
}
}
if (tot > 0) {
return false;
}
return true;
regards
The problem is you are creating an array of values, you need the elements themselves:
var txtName = document.getElementById("MainContent_txtName");
var txtSurname = document.getElementById("MainContent_txtSurname");
var txtContact = document.getElementById("MainContent_txtContactNumber");
var txtEmail = document.getElementById("MainContent_txtEmail");
var txtMessage = document.getElementById("MainContent_txtMessage");
var fields = [txtName, txtSurname, txtContact, txtEmail, txtMessage];
var tot = 0;
for (var i = 0; i < fields.length; i++) {
if (fields[i].value == "") {
fields[i].style.backgroundColor = '#FEF5CA';
tot++;
}
else {
fields[i].style.backgroundColor = "white";
}
}
if (tot > 0) {
return false;
}
return true;
You have to change backgroundcolor to backgroundColor and add .value to your if check.
try style.backgroundColor instead of style.backgroundcolor (note the capital "C") Javascript is case sensitive.
I used the below code to upload multiple files. Its working absolutely fine but as i need to check that the file which i am uploading is duplicate or not, i am facing one problem in that. I created one function called checkDuplicate for that and calling it inside the function. But the problem is that the for loop is looping double the size of the array. I don't know why it is so. Please kindly help me if anyone has any idea.
Here is the Javascript
<script type="text/javascript">
function MultiSelector(list_target, max) {
this.list_target = list_target;
this.count = 0;
this.id = 0;
if (max) {
this.max = max;
} else {
this.max = -1;
};
this.addElement = function(element) {
if (element.tagName == 'INPUT' && element.type == 'file') {
element.name = 'file_' + this.id++;
element.multi_selector = this;
element.onchange = function() {
var new_element = document.createElement('input');
new_element.type = 'file';
this.parentNode.insertBefore(new_element, this);
this.multi_selector.addElement(new_element);
this.multi_selector.addListRow(this);
this.style.position = 'absolute';
this.style.left = '-1000px';
};
if (this.max != -1 && this.count >= this.max) {
element.disabled = true;
}
;
this.count++;
this.current_element = element;
}
else {
alert('Error: not a file input element');
}
;
};
this.addListRow = function(element) {
var new_row = document.createElement('div');
var new_row_button = document.createElement('img');
new_row_button.setAttribute("src","<%=request.getContextPath()%>/images/deletei.gif");
new_row_button.onclick = function() {
this.parentNode.element.parentNode.removeChild(this.parentNode.element);
this.parentNode.parentNode.removeChild(this.parentNode);
this.parentNode.element.multi_selector.count--;
this.parentNode.element.multi_selector.current_element.disabled = false;
return false;
};
if(checkDuplicate(element)) {
new_row.element = element;
new_row.innerHTML = element.value + " ";
new_row.appendChild(new_row_button);
this.list_target.appendChild(new_row);
}
};
};
function checkDuplicate(element) {
var arr = new Array();
var i = 0,dup=0;
//alert(new_row.element = element.value);
if(dup==0) {
arr[i++] = element.value;
dup=1;
}
alert("Length ==> "+ arr.length);
for ( var j = 0; j < arr.length; j++) {
alert("Name ==> " + arr[j]);
if(arr[j] == element.value && j>=1) {
alert("Duplicate");
} else {
alert("Not Duplicate");
arr[i++] = element.value;
}
}
}
</script>
Here is the HTML
<body>
<!-- This is the form -->
<form enctype="multipart/form-data" action=""method="post">
<input id="my_file_element" type="file" name="file_1">
<input type="submit">
<br/>
<br/>
Files:
<!-- This is where the output will appear -->
<div id="files_list"></div>
</form>
<script>
var multi_selector = new MultiSelector(document
.getElementById('files_list'), 15);
multi_selector.addElement(document.getElementById('my_file_element'));
</script>
</body>
</html>
because you have the arr[i++] = element.value; in the last line, and j < arr.length in the for, so every time the array.lenght gets bigger and bigger.
change the for line to these two lines:
var len = arr.length;
for ( var j = 0; j < len; j++) {