Jquery Input Post with Same name Input Like PHP Post

A few days ago I found a problem with my Input name. If I using PHP, I can create form input using name array if I have form input with same name like this:

<!DOCTYPE html>
	<title>Example POST</title>
	<form method="post" accept-charset="utf-8" action="getPost.php">
		<input type="text" name="people[]" value="john"><br />
		<input type="text" name="people[]" value="bill"><br />
		<input type="text" name="places[]" value="california"><br />
		<input type="text" name="places[]" value="michigan"><br />

		<input type="submit" value="Save" />

And this is file php to get post:

	echo "<pre>";
	echo "</pre>";

And if we run that code (click submit/save button), we can get result like this:

    [people] => Array
            [0] => john
            [1] => bill

    [places] => Array
            [0] => california
            [1] => michigan


Then the question is, how to create like that if I use Jquery?
For the answer, the first we must change file example.php to be like this:

<!DOCTYPE html>
	<title>Post Using Ajax</title>
	<script src='http://code.jquery.com/jquery-latest.min.js'></script>
	<h1>Example Post Using Ajax</h1>
	<form method="post" accept-charset="utf-8">
		<input type="text" name="people[]" value="john"><br />
		<input type="text" name="people[]" value="bill"><br />
		<input type="text" name="places[]" value="california"><br />
		<input type="text" name="places[]" value="michigan"><br />

		<input type="submit" value="Save" />

<script type="text/javascript">
	$(function () {

	    $( "form" ).submit(function(e) {
	            url: "getPost.php",
	            type: "post",
	            data: $( this ).serialize(),
	            success: function (data) {


  1. Line 9. We change code with remove action attribute form tag <form>
  2. Line 21 is to trigger if user click save button, so if user klik save button, and from the form $(“form”), run the function
  3. Line 23. We send data using Ajax. Read this for more info ajax http://en.wikipedia.org/wiki/Ajax_(programming)
  4. Line 24. This same if we use just using html form action like this:
    <form action="getPost.php"......
  5. Line 25 to send data using method post like this:
    <form method="post"......
  6. Line 26. This is built-in function from jquery to get all value input. For more info look this site https://api.jquery.com/serialize/
  7. Line 27 is using to get the result if data succes sending. If we using php console.log like print_r() function

The important thing here is to use the built-in function of jquery that is .Serialize ()
Then now run that code, and don’t forget to open your browser developer mode. If using Chrome, the developer mode can open using this shorcut Ctrl + Shift + J or for firefox Ctrl + Shift + K.
This the result if we click save button (I using Chrome):



  1. What’s up to every body, it’s my first pay a visit of this weblog; this webpage includes amazing and actually fine information for readers.

  2. My spouse and I absolutely love your blog and find the majority of your post’s to be what precisely I’m looking for. can you offer guest writers to write content for you personally? I wouldn’t mind creating a post or elaborating on most of the subjects you write about here. Again, awesome web site!

    1. Do you want to be a writer as well on my blog? I gladly accept it .. Because lately I’m busy with my final project in college .. Okay, please send me your email and will be discussed through email alone .. And thank you for visiting my little blog .. πŸ˜€

  3. When someone writes an post he/she keeps the plan of a user in his/her mind that how a user can understand it. So that’s why this piece of writing is amazing. Thanks!

  4. My brother recommended I might like this blog. He was totally right. This post actually made my day. You can not imagine just how much time I had spent for this information! Thanks!

  5. Howdy! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!

  6. Heya i am for the first time here. I found this board and I find It really useful & it helped me out a lot. I hope to give something back and aid others like you aided me.

  7. I was suggested this blog by my cousin. I am no longer positive whether or not this submit is written through him as nobody else recognize such unique approximately my trouble. You’re amazing! Thanks!

  8. Pretty part of content. I simply stumbled upon your site and in accession capital to say that I get actually enjoyed account your blog posts. Any way I will be subscribing for your augment or even I achievement you get entry to persistently fast.

  9. whoah this weblog is great i love reading your articles. Stay up the great work! You understand, a lot of individuals are hunting around for this information, you can help them greatly.

  10. Excellent website. Lots of helpful info here. I am sending it to a few buddies ans also sharing in delicious. And certainly, thank you for your sweat!

  11. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

  12. Good way of describing, and pleasant paragraph to get facts on the topic of my presentation subject matter, which i am going to convey in institution of higher education.

  13. Howdy I am so glad I found your webpage, I really found you by accident, while I was browsing on Yahoo for something else, Nonetheless I am here now and would just like to say cheers for a fantastic post and a all round interesting blog (I also love the theme/design), I don’t have time to go through it all at the minute but I have book-marked it and also added your RSS feeds, so when I have time I will be back to read more, Please do keep up the excellent work.

  14. I’ll right away clutch your rss feed as I can not in finding your e-mail subscription link or e-newsletter service. Do you’ve any? Kindly permit me recognize in order that I could subscribe. Thanks.

  15. Hi there just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same outcome.

  16. I wanted to thank you for this very good read!! I certainly loved every little bit of it. I have got you book marked to check out new things you post…

  17. I needed to thank you for this good read!! I certainly enjoyed every little bit of it. I have you bookmarked to check out new stuff you post…

  18. I do accept as true with all the ideas you have introduced on your post. They’re really convincing and will definitely work. Nonetheless, the posts are very brief for novices. May just you please prolong them a little from subsequent time? Thank you for the post.

  19. I needed to thank you for this wonderful read!! I absolutely enjoyed every little bit of it. I have got you book marked to look at new things you post…

  20. Excellent post. I was checking constantly this blog and I’m impressed! Extremely helpful info specially the last part πŸ™‚ I care for such information a lot. I was looking for this particular information for a long time. Thank you and good luck.

  21. Thank you a bunch for sharing this with all folks you actually recognize what you’re speaking approximately! Bookmarked. Please additionally discuss with my site =). We may have a hyperlink alternate arrangement between us

  22. Ahaa, its good discussion on the topic of this article at this place at this web site, I have read all that, so at this time me also commenting here.

  23. Nice weblog right here! Additionally your site lots up fast! What web host are you using? Can I am getting your affiliate link in your host? I wish my web site loaded up as quickly as yours lol

  24. I am no longer certain where you’re getting your information, but great topic. I must spend a while studying more or working out more. Thanks for fantastic information I used to be searching for this information for my mission.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s