Saving data from multiple contenteditable div to a database

[senatorcox90]

I am developing a website where registered users can publish multiple articles. I have created a modal form with and input field for article heading and a text area for article stories, on submission, the form data goes into a contenteditable div which allows the user to edit all the published articles on server side. After editing, onblur the updated data get sent to a database using a form that gets populated with the updated data using a javascript code which takes the data from the content editable div to the form which then gets submitted to the database.

Now the problem is that only data from the first published article is getting sent to the database i have suspected that may be because all the published articles have the same id so I attached a form the script that stores the data on page so that each post have its own form but this has generated another problem where all the forms get submitted at the same time.

The three big question is how can I submit a form individually on a page with multiple forms? How can I update a post individually and send the updated data to a database from a page with multiple post? or is there a better way of doing this because my way is boring.

Please see my code below

   <script>
  function heading(){
    document.getElementById('head').value = document.getElementById('title').innerHTML;
	document.getElementById('stories').value = document.getElementById('story').innerHTML;
	document.getElementById('authors').value = document.getElementById('author').innerHTML;
   document.getElementById('biogid').value = document.getElementById('biogID').innerHTML;
  }
  </script>
 
  <div id="article-container"  title="Text editing is enabled on this page">
 
 
 <?php if(empty($article)){ $article = "";}else{ foreach($article as $articles):?>
 <?php  echo  "<div onclick=\"makeEditable(this)\" onblur=\"readOnly(this)\" id='article'>";?>
 <?php echo "<h3 id='title'>"  . $articles['heading'] . "</h3>";?>
 <?php  echo "<p id='story'>" . $articles['story'] . "</p>";?>
 <?php echo "<p id='author' contentEditable=false>Author: " . $_SESSION['name'] . " " . $articles['time'] .  "</p>";?>
 <?php echo "<p id='biogID'>" . $articles['biogID'] . "</p>";?> 
 
 <?php echo "</div>";?>
 
 <form action=
 '?heading=<?php echo $articles['heading'];?>' method='post' onsubmit="heading();">
<input type='hidden' id='head' name='head' value=''>
<input type='hidden' id='stories'  name='stories' value=''>
<input type='hidden' id='authors' name='authors' value=''>
<input type='hidden' id='biogid' name='biogid' value=''>

<input type='submit' name='update' value='Save changes'><br />

 
 <?php endforeach;}?>
 
</div>

[droopsnoot]

@senatorcox90

how can I submit a form individually on a page with multiple forms?

Each form will have its own ‘submit’ button, which will only transmit the contents of that specific form. If you put each article in a separate form, that should allow you to submit each one as required.

In your code above, I see where you open the form inside the foreach() loop, but you don’t appear to close it. hence, everything is in the same form.

You also already know that duplicate ids won’t work, so you need to deal with that too. At the moment, how will your code know which element with an id of “story” it should pick, aside from it not being valid html?

I’m not that experienced with JavaScript, but I think I’d add a unique ID (is biogID unique) into the form field IDs, and also pass it as a parameter to heading() in your onSubmit() so that function can use it to retrieve the correct fields from the page. At the same time, if you’re passing the article heading as part of your form destination, you probably want to URL-encode it, unless you’re already doing that elsewhere.

[senatorcox90]

Thanks for your comments, regarding security I always url-encode any input from client-side.

[droopsnoot]

It wasn’t about security, it was about having it deal with spaces and other non-URL-friendly characters when you pass it as part of the form submit destination.

<form action= '?heading=<?php echo $articles['heading'];?>' method='post' onsubmit="heading();">