Passing data using HTML tags and innerHTML, setAttribute(), etc. Editing and updating news articles stored in a database

Question

I have a simple news update interface where I read news headlines/titles from a database and print them on page as a list. The goal is, that when I click one of the headlines it brings out an area with a form where the news article could be modified and then updated back into database.

Now in order to do that I need to somehow pass the information (an id, or the headline itself) on to the form, so I can there read the proper article and other info from the database. It seems like a very simple task, but I've come to notice it seems like an impossible task. I could of course put the whole form inside a javascript function and then pass on the headline as a parameter using this.innerHTML to the function and then read it from a variable, but then I'd have to generate all the html using javascript, or php, but I think there must be a simpler way to do this.

I've tried using a hidden input tag and others like span and div elements and then pass the headline there as the input elements value using onclick="document.getElementByID("elementsname").value=this.innerHTML;" and onclick="document.getElementsByName("elementname")[0].setAttribute("value/name", this.innerHTML);". Something like this would be so simple, but for some reason unknown to me these methods don't work. Either the info doesn't get there, or it's not further readable from the elements by javascript.

For example I can pass on the info using input element when setting it to type="text" and it shows up on the page as a text field, but it's not readable from there for some reason and it doesn't even appear on the code when checking the source code from the browser. Why is this? For that reason I can't get the info passed to my SQL query, so I could read the corresponding news article in to a textarea from database.

So, is there a way to somehow make that idea to work, or should I forget it and use other methods? How is this usually done anyway by web developers when they want to open something for editing/updating from database?

Answer 1

This approach is usually going to be accomplished using ajax and a separate template view for the form which is populated dynamically server side.

You will have your page of news articles. When one is clicked, it will make an ajax request to your server with an identifier for the article. The server will compose a page containing a WYSIWYG editor pre-filled with the information from the article inside of a set of input elements along with a save or cancel action.

The response from the server with this template page will come in the success callback in your page of news articles which will then popup a modal type of element containing the server side produced view.

Upon completing changes if the view is saved an update is called to the relevant news article on the page, as well as posting the changes to the server.