I am trying to edit my table rows (img: http://imgur.com/yTpfCIc ) and POST the changed data to my edit.php file. I am trying to do this via jQuery. But when I click save button nothing happens, this is the explained javascript:
//Getting all "Edit" buttons in the table (one for each row)
var buttons = document.getElementsByClassName("clicker");
var savebutton = function(id){
//Alert the Id of the button to see if the function is being called, and it is.
alert(id);
//If I have any $_POST["action"] different from "update" or "edit" I should get redirected to a page apologizing, saying this cant happen. But nothing happens. (not problem with edit.php, because already tried via another way of posting from another page)
$.post( "edit.php", { action: "test"} );
};
var buttonclicked = function(e){
if(e.target.textContent == "Edit")
{
//In this function I create a lot of inputs that you see in the picture and cannot be submited one at a time
e.target.textContent = "Cancel";
var id = e.target.id;
var editable_elements = document.querySelectorAll("[contenteditable=false]");
var sub = document.getElementById("sub"+id);
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("style", "width: 150px");
j.textContent = sub.textContent;
sub.innerHTML = "";
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 = "";
editable_elements[k].appendChild(l);}
//If any edit button is pressed, create a save button in the same row
var s = document.createElement("input");
s.textContent = "Save";
s.setAttribute('type',"button");
s.setAttribute('value',"update");
s.setAttribute("id", id);
s.setAttribute("name", "a");
//Call the function that is supposed to POST all inputs infotmations
s.setAttribute("onclick", "savebutton(this.id)");
var clickbutton = document.getElementById("save"+id);
clickbutton.appendChild(s);
}
else //save button has been clicked
{
//nothing
}
};
//If one of those buttons is clicked call the function
for(var j = 0; j < buttons.length; j++)
{
buttons[j].addEventListener('click', buttonclicked);
}
That is my problem... If you want to see the whole page, its here: http://pastie.org/10578782