Geek Answers Handbook

Publish data for self-use using jquery

I am trying to publish some form data for myself without success. My code is as follows

<html> <title>Post to self</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function () { $('.x-button').live("click", function () { $.ajax({ type: "POST", url: "self.php", data: $(".aj").serialize(), success: function (data) { alert("Data Loaded:"); } }); }); }); </script> </head> <body> <?php if(isset($_POST['submit'])) { echo $_POST['firstname']; } ?> <form name="input" action="" class="aj" method="post"> <article> <label>Firstname</label> <input type="text" name="firstname" value="Ed" class="x-input" /> </article> <article> <label>Lastname</label> <input type="text" name="lastname" value="Doe" class="x-input" /> </article> <article> <label>City</label> <input type="text" name="city" value="London" class="x-input" /> </article> <input type="submit" value="Update Options" class="x-button" /> </form> </body> </html>

When using <form name="test" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post"> in simple php and html it works, but I cannot force it work with jquery.

+7
source share
3 answers

Of course, you do not want to include the entire page in the response text, so you need instructions if ajax is requested.

  <?php /* AJAX check */ if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { if(isset($_POST)) { print_r($_POST); } }else{ ?> <html> <title>Post to self</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function () { $('.x-button').live("click", function () { $.ajax({ type: "POST", url: "self.php", data: $(".aj").serialize(), success: function (data) { alert("Data Loaded:"); } }); }); }); </script> </head> <body> <form name="input" action="" class="aj" method="post"> <article> <label>Firstname</label> <input type="text" name="firstname" value="Ed" class="x-input" /> </article> <article> <label>Lastname</label> <input type="text" name="lastname" value="Doe" class="x-input" /> </article> <article> <label>City</label> <input type="text" name="city" value="London" class="x-input" /> </article> <input type="submit" value="Update Options" class="x-button" /> </form> </body> </html> <?php }?>
+1
source

you mix the two approaches as a whole.

 <form id="myform" action="" > ..... </form>

To send an ajax request to the same page, you can leave the url parameter empty / deleted

TRY

  <script type="text/javascript"> $(document).ready(function () { $('.x-button').live("click", function () { $.post({ data: $('form#myform').serialize(), success: function (data) { alert("Data Loaded:"); } }); }); }); </script>
+13
source

add return false; at the end of the javascript built-in function to avoid submitting the form in the “normal” way

+2
source

More articles:


All Articles