CODEWITHSUNDEEP
javascriptphpjquerypost
Joao Turolla
Joao Turolla

Reputation: 33

Submitting inputs without forms with

I am trying to edit my table rows (img: https://i.sstatic.net/ViZHb.jpg ) 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

Upvotes: 0

Views: 44

Answers (1)

HaukurHaf
HaukurHaf

Reputation: 13816

You have this comment in your code:

//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"} );

When you post via ajax, redirects do not work. Open the dev tools in your browser and check the network traffic. I'm pretty sure the edit.php page is being posted to. You need to use a callback function to check the response of the post action and act accordingly, example:

$.post( "edit.php", { action: "test"}, function(data) {
  //data is the response from the edit.php
  alert(data);
});

Try this code and see what the alert box says. If you want to "redirect", you can use document.location.href = 'whatever.php'; inside the callback in place of the alert(); statement.

Upvotes: 1

Related Questions