I have a web page(admin page) and using some JQuery I have it so that when you click the 'Add News' link a form appears in another div. This bit works ok.
The form data gets sent to another php file which the either adds the data to a mysql table or if the user has left out something in the form it tells them.

The probllem is that if I fill the form out correcttly, it takes me to another page, if I fill it out incorrectly it also takes me to another page telling me what errors I have made.

Is there to get the error displaayed on the same page in the same div, just under the form?

Here are my files so far.

My admin page where i want everthing displayed

<html xmlns="http://www.w3.org/1999/xhtml">

   <link href="../css/template.css" rel="stylesheet" type="text/css" />
   <link href="../css/adminpanel.css" rel="stylesheet" type="text/css" />   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


   <title>Diamondback Tattoo Admin Page</title>

      <div class="wrap">
         <div id="header">
            <div id="logo">
               <a href="home.php"><img src="../images/siteimages/logo.JPG" alt="Logo image" /></a>
          <div id="menu">

         <div id="content">
            <div class="nav">
            <div id='cssmenu'>

                     <li><a href='home.php'>Home</a></li>
                     <li><a href='#' id='1' class="category">Galleries</a> </li>
                     <li><a href='news.php'>News</a></li>
                     <li><a href='#' id='3' class="category">Contact</a></li>
                     <li><a href='#' id='4' class="category">Links</a></li>
                     <li><a href='#' id='5' class="category">Buy Vouchers</a></li>
              <div id='adminmenu'>

                     <li><a href='#' id='news'>Add News Item</a></li>
                     <li><a href='#' id='1' class="category">Add/Change Contact Details</a> </li>
                     <li><a href='news.php'>Add Links</a></li>
                     <li><a href='#' id='3' class="category">Add/Change Homepage Info</a></li>
                     <li><a href='#' id='4' class="category">Remove News Item</a></li>
                     <li><a href='#' id='5' class="category">Remove Links</a></li>


               <div style="clear: both;">&nbsp;</div>
               <div id="container"> 
                  <span class="text">hi</span>    

                <div class="contentimgs">
                   <img class="tat3" src="../images/siteimages/nikhands.jpg" alt="Tattooed Hands Image" />



        <div id="footer">
           <p>&copy Copyright of Diamondback Tattoo<br />Site Developed by Webslinger Development</p>

My php file to send the form to the admin page.

   // this will be the string that you will return into the container div 
    $returnHtml = ''; 

        // construct the html to return
        $returnHtml .= "<span class='text'>";
        $returnHtml .= "Add a news item";
        $returnHtml .= "</span>";
        $returnHtml .= "<form class='form1' action='newsadd.php' method='post' enctype='multipart/form-data' name='add_news-form' id='add_news_form'>";
        $returnHtml .= "<h1 style='margin-bottom: 0px'><span class='text'>Fill in all the details:</span></h1>";
        $returnHtml .= "<input type=text name='atitle' /><b><span class='text'>Title<span></b>";
        $returnHtml .= "<br />";
        $returnHtml .= "<textarea rows='8' name='acontent'></textarea><b><span class='text'>Content</span></b>";
        $returnHtml .= "<br />";
        $returnHtml .= "<br />";
        $returnHtml .= "<input type='submit' name='submit' value='Add News Item' />";
        $returnHtml .= "<input type='hidden' value='new' />";
        $returnHtml .= "</form>";

// display the html 
echo $returnHtml;


And newsadd.php

  include '../inc/connect.php';

  // validate form fields
   if (!empty($_REQUEST['atitle'])){
      $atitle = $_REQUEST['atitle'];

      $atitle = NULL;
      echo "<span class='end'><p>Enter a title for the News Item</p></span>";
   if (!empty($_REQUEST['acontent'])){
      $acontent = $_REQUEST['acontent'];

      $acontent = NULL;
      echo "<span class='end'><p>Enter content for the News Item</p></span>";

   //if evetrything is ok continue with form post inserting data to table
   if ($atitle && $acontent){
       if (isset($_POST['submit'])){  
       $r = mysql_query("INSERT INTO news  VALUES ('', now(), '$atitle', '$acontent')");
       echo "<span class='end'><p>The news article has been added to the website</p></span>";

Thanks for looking...................

The form does not have to be loaded from a separate php file. It can be in a div that is initially hidden (say the id is form-container) and when the user clicks the Add News Item link the div is shown using jquery show() method.


Change the button in the form from type="submit" to type="button" since you do not want to submit the form (and go to the action page). Give the button an ID (say id="send-data") and with jquery call a function that will validate the form and with ajax call the php script for updating or display an error message in a error div.

Hi, thanks for your reply.
I have done tyhe first part of your suggestion and got the hidden div to show when I click 'Add News Item"

I'm kind of lost on the second part though!
Do you mean to send the form data to addnews.php with jquery then get any messages from that same script back with ajax?
Sounds confusing!!

If the requirement is that the page does not change (reload) and you want to display a form, update a database and display a status of the operation, then you have to use ajax. This is how I would do it:

  • the form would be initially hidden
  • if user clicks Add news, the form gets displayed (you've got this covered already)
  • the button for submitting calls a validation function first to check for entered information
  • if the information is OK, the database gets updated through ajax call to a separate PHP page that handles the update
  • if the update is OK, the PHP returns success, otherwise it returns failure
  • the status gets displayed in another div using jquery:

    • if information was OK and update successful succes is displayed
    • if information is OK but update failed, some other message can be displayed
  • if information wasn't OK, the message to complete the information is displayed

It maybe sounds confusing but you have to structure the scripts appropriately and maybe put javascript/jquery functions in a separate file.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.