[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 318
  • Last Modified:

How to create a form within a div which updates MySQL and then updates itself to display the submitted data

I have a page (index.php) with two divs the left hand div 'sublist' shows a list of topics, the right hand div 'subentries' is intended to display comments relevant to each topic.

When a topic is clicked on in sublist, subentries is updated using ajax.  Subentries content is driven by a file, topic.php

What I don't get is how to create a form in subentries that can be used for adding new comments for a given topic.

If I use a form in topic.php what do I set the action to ? If i set it to index.php it means reloading the whole page, if I set it to topic.php it will display topic.php and nothing else
  • 2
  • 2
1 Solution
Julian HansenCommented:
Do you want to process the form through AJAX as well?
NatchiketAuthor Commented:
yes Ajax would be fine, as long as I can post the data to MySQL
Julian HansenCommented:
The other option is to iframe your form. That way you don't have to collect the form vars with jscript (or plugin) - you can post back to a dedicated form that adds to db and returns a validation or success screen.
NatchiketAuthor Commented:
all I want is for the a) the data to go into MySQL and b) that the subentries div gets updated
Chris StanyonCommented:
The idea here is that you have a form on your page. Set it's action to a php script that will take the form data, save it to a database and then echo out whatever results you need. Here's a quick overview using PHP and jQuery, but you'll need to tweak for your own needs.

<form action="yourScript.php" method="post" id="myForm">
	<label for="myName">Name: </label>	
	<input type="text" name="myName" id="myName" />
	<input type="submit" value="Send" />
<div id="response"></div>

Open in new window

//submit the form to your script, and put the output in div#response
$(document).ready(function() {
     		url: $(this).attr('action'), //get the forms action
     		data: $(this).serialize(), //get the form data
     		type: 'post', //POST it to your script
     		dataType: 'html', //the type of data your script will return
     		success: function(data) {
     			$('#response').html(data); //update the DIV with the results

Open in new window

//get the form data
$name = $_POST['myName'];

//connect to your database and run the insert / update query

//echo out some information that you want passing back to jQuery's Ajax function
echo "You saved '$name' to the database";

Open in new window

Any problems understanding it, ask away:)

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now