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

Posted on 2012-08-24
Last Modified: 2013-09-03
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
Question by:Natchiket
    LVL 49

    Expert Comment

    by:Julian Hansen
    Do you want to process the form through AJAX as well?
    LVL 17

    Author Comment

    yes Ajax would be fine, as long as I can post the data to MySQL
    LVL 49

    Expert Comment

    by:Julian Hansen
    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.
    LVL 17

    Author Comment

    all I want is for the a) the data to go into MySQL and b) that the subentries div gets updated
    LVL 42

    Accepted Solution

    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:)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now