Home/ Questions/Q 7638593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T08:12:45+00:00

I am trying to use jQuery Ajax in my form to submit… Here is

  • 0

I am trying to use jQuery Ajax in my form to submit…

Here is the full code of the page:

<?php
if(isset($_POST['save'])) {
    print "<pre>";
    print_r($_POST);
    print "</pre>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

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






<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
</script>
<!-- /TinyMCE -->

</head>
<body>

<form id="my_form" method="post" action="insert.php">
    <div>
        <h3>Edit Page</h3>



        <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
        <div>
            <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
<?php
$con = mysql_connect('localhost', 'root', 'dev');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("my_db");
$query = "SELECT * FROM pages where id=1";
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
$contents = $row['content'];
echo $contents;
?>
            </textarea>
        </div>

        <br />
        <input id="submit_page_changes" type="submit" name="save" value="Submit" />
        <input type="reset" name="reset" value="Reset" />
    </div>
</form>

<script>
    $(document).ready(function(){
        $('#my_form').submit(function(event) {
            event.preventDefault();
            alert($(this).serialize());
        });
    });
</script>



</body>
</html>

Basically I need it to submit using JQuery Ajax.

EDIT:

Here is the code from insert.php

<?php
$con = mysql_connect("localhost","root","dev");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("my_db");


$sql="UPDATE pages SET content=('$_POST[elm1]') WHERE id='1'";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo "1 record added";


$query = "SELECT * FROM pages where id=1";
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
$contents = $row['content'];

echo $contents;

mysql_close($con)
?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This code will do the trick :

    $('#my_form').submit(function(event) {
    event.preventDefault(); 
    $.post("insert.php", $("#my_form").serialize(), function (response) {
        //do something on success
    });

});

    or try using below code to post data to backend:

    $.post("insert.php", {'elm1' : $('#elm1').val()}, function (response) { 
    //do something on success
});

    Since you are using tinyMCE for textarea #elm1 use:

    $.post("insert.php", {'elm1' : tinyMCE.get('elm1').getContent()}, function (response) { 
    //do something on success
});
    • 0