0

On page load up I want it to just display the posting in order using labels. When the user clicks the edit button, it changes the contents of the row to textbox and textarea to allow user to edit the contents, and it changes the edit button to an input submit. All tags are changed appropriately, but the new submit button doesn't do anything after being clicked.

I have tried to create the attributes with editButton.type as well as editButton.setAttribute(). I have trying using a button with type="submit". I have seen several posts talking about the form action being wrong, however the delete button still works fine and the action is correct.

Here is the php/html that creates the form

for($i=0; $i<count($posts); $i++)
            {
                echo '<form onsubmit="return confirmChangePost()" action="../controllers/CRUDController.php" method="POST">';
                    echo '<tr id="'.$i.'">';
                        echo '<td><label name="titleToEdit">'.$posts[$i][2].'</td>';
                        echo '<td><label name="textToEdit" >'.$posts[$i][3].'</label>';
                        echo '<input type="hidden" name="id" value="'.$posts[$i][0].'"/></td>';
                        echo '<td><input type="button" name="edit" value="Edit" onclick="createEditField('.$i.', \''.$posts[$i][2].'\', \''.$posts[$i][3].'\', \''.$posts[$i][0].'\')"></td>';
                        echo '<td><input type="submit" name="delete" value="Delete"/></td>';
                    echo "</tr>";
                echo "</form>";
            }

Here is the javascript that makes the text fields and edit submit

function createEditField(rowNum, title, text, id)
{
    var rowSelect = document.getElementById(rowNum);
    var td = rowSelect.querySelectorAll('td');
    var titleLabel = td[0].firstChild;
    var textLabel = td[1].firstChild;
    var editButton = td[2].firstChild;

    var titleInput = document.createElement("input");
        titleInput.type = "text";
        titleInput.name = "titleToEdit";
        titleInput.value = title;
    var textInput = document.createElement("textarea");
        textInput.name = "textToEdit";
        textInput.rows = 5;
        textInput.cols = 30;
        textInput.innerHTML = text;
    var editSubmit = document.createElement("input");
        editSubmit.setAttribute("type", "submit");
        editSubmit.setAttribute("name", "edit");
        editSubmit.setAttribute("value", "Edit");

    td[0].replaceChild(titleInput, titleLabel);
    td[1].replaceChild(textInput, textLabel);
    td[2].replaceChild(editSubmit, editButton);
    }

I am not getting any error messages. When I click the new edit button nothing happens when it should submit the form to the controller for update in the database.

Nathan.Ford
  • 1
  • Hi and welcome to stackoverflow. Your code seems alright. Could you give us the "confirmChangePost" code? – Stefmachine May 19 '19 at 15:49
  • Here's the confirmChangePost() I don't think that is the issue. When I had the text areas and submit button hard coded in everything worked just fine. It was only when I started using the javascript to get the submit button did it stop working.`code`function confirmChangePost() { return confirm("Do you wish to edit/delete this post?") } – Nathan.Ford May 19 '19 at 15:52
  • Ok, so it doesn't even show the confirm box. Btw you can edit your post to add the code directly in it. Have you tried adding an onclick event to your new edit button to test if it gets triggered? – Stefmachine May 19 '19 at 15:58
  • I tried creating an event listener on the edit button. This seems to have worked and it does submit the form. However, the data within the text fields isn't getting posted. – Nathan.Ford May 19 '19 at 16:49
  • OK, so according to what I'm looking at, your code doesn't work because from the moment the DOM is loaded, the form is put outside of the table body element (basically your form becomes useless). It still binds the buttons and fields you created on the beginning of the page load, but when you replace the buttons/labels for other things they are not in the form. – Stefmachine May 19 '19 at 17:00
  • You can look at the answer from [this post](https://stackoverflow.com/questions/5967564/form-inside-a-table/5967613). Have a nice day. – Stefmachine May 19 '19 at 17:02
  • This worked just fine, After you referred me to that posting I took wrapped the forms in div tags instead of tables. After taking away all table tags it allowed me to submit the posting just fine. Thank you for your help. – Nathan.Ford May 19 '19 at 17:41

0 Answers0