javascript - Submit a form with JQuery Ajax still displaying target page

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" ".dtd">
<html xmlns="">
<head>
<title></title>

<script src=".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)
?>

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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>

<script src="http://ajax.googleapis./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 Improve this question edited Mar 14, 2012 at 18:54 asked Mar 14, 2012 at 17:46 Satch3000 49.5k90 gold badges225 silver badges349 bronze badges

1 Is the script before or after the form? If it's before, then the element won't exist when the code is executed, and the event handler will never be bound. If that is the case, wrap everything between the <script> and </script> tags in $(function() {...}. – Anthony Grist Commented Mar 14, 2012 at 17:57
what is it displaying inside alert($(this).serialize()); alert? – Nemoy Commented Mar 14, 2012 at 18:46
This is an example alert: elm1=%3Cp%3ETesting+123%3C%2Fp%3E++++++++++++ – Satch3000 Commented Mar 14, 2012 at 18:48

Add a ment |

6 Answers 6

Sorted by: Reset to default 3

Satch,

First you need to insert the submit script inside a $(document).ready function like this:

<script>
    $(document).ready(function(){
        $("#my_form").submit(function() {

            $.ajax({
                type: 'post',
                url: 'insert.php',
                contentType: "application/json",
                data:$(this).serialize(),
                dataType: "json",
                success: function (msg) {
                    alert(msg);
                  },
                error: function(msg){
                    alert("Error" + msg);
                }
            });

          return false;
        });
    });
</script>

You will also need to post the serialized data through the jquery ajax function like $.ajax. I hope that this helps.

You should be using the $.ajax method

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
});

Instead of returning false, try preventdefault:

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

EDIT: To include Eduardo's tip above, here is a more extended answer:

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

<form id="my_form" method="post" action="insert.php">
    <input type="submit" name="save" value="Submit" />
</form>

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

A couple of things to note: - You should include the query library on top of the page (preferably the head) - You should FIRST include the HTML, then the script that uses the HTML (otherwise the JS doesn't know about the element) - If you have to add the JS above the HTML, use $(document).ready(), as it will make sure all HTML is part of the DOM before attaching any event handlers to it. - If you already use jQuery on the page, the use event.preventDefault(); is slightly safer than return false;.

$.ajax({
type: 'post',
url: 'insert.php',
contentType: "application/json; charset=utf-8",
data:{'id':id}
dataType: "json",
beforeSend: function () {
//show wait
},
success: function (msg) {
    if (msg.d != null) {
    //result is obtained
    }
  }
});

EDIT: You can use $.ajax in that function so that it will post the data

Modify your code like:

<script>
$('input[name=save]').click(function(e)
{
  alert($('#my_form').serialize());
  return false; // You can also use e.preventDefault();
});
</script>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745331254a4622887.html

javascript - Submit a form with JQuery Ajax still displaying target page - Stack Overflow

6 Answers 6

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Submit a form with JQuery Ajax still displaying target page - Stack Overflow

6 Answers 6

相关推荐