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> <html> <head> <title>Example POST</title> </head> <body> <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" /> </form> </body> </html>
And this is file php to get post:
<?php echo "<pre>"; print_r($_POST); echo "</pre>"; ?>
And if we run that code (click submit/save button), we can get result like this:
Array
(
[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>
<html>
<head>
<title>Post Using Ajax</title>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
</head>
<body>
<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" />
</form>
<script type="text/javascript">
$(function () {
$( "form" ).submit(function(e) {
e.preventDefault();
$.ajax({
url: "getPost.php",
type: "post",
data: $( this ).serialize(),
success: function (data) {
console.log(data);
}
});
})
});
</script>
</body>
</html>
Explanations:
- Line 9. We change code with remove action attribute form tag <form>
- Line 21 is to trigger if user click save button, so if user klik save button, and from the form $(“form”), run the function
- Line 23. We send data using Ajax. Read this for more info ajax http://en.wikipedia.org/wiki/Ajax_(programming)
- Line 24. This same if we use just using html form action like this:
<form action="getPost.php"......
- Line 25 to send data using method post like this:
<form method="post"......
- 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/
- 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):
imron02 
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.
Thank you.. 🙂
Read it, liked it, many thanks for it
Your welcome guy. 🙂
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!
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 .. 😀
It’s enormous that you are getting thoughts from this article as well as from our dialogue made at this time.
I was able to find good information from your articles.
Hi friends, its impressive article on the topic of teachingand completely explained, keep it up all the time.
Thanks 😀
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!
Thanks and your welcome.. 🙂
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!
Your welcome Frieda.. 🙂
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!
May you can look at this https://wordpress.org/plugins/captcha/
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.
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!
Thanks and your welcome Jessika.. 😀
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.
I like it whenever people get together and share views. Great blog, continue the good work!
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.
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!
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.
I just used share icon from bottom page, like share to twitter or facebook.. 🙂
This is my first time pay a visit at here and i am in fact happy to read everthing at single place.
This website was… how do I say it? Relevant!! Finally I have found something that helped me. Appreciate it!
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.
Its not my first time to go to see this web site, i am browsing this website dailly and get good data from here everyday.
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.
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.
Yes you can follow it, I create the widget (on right side) to follow this blog using email.. 😀
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.
Here I do not find it a problem, I upload pictures using picasa
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…
I constantly spent my half an hour to read this blog’s posts daily along with a mug of coffee.
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…
Thanks for your support erlinda.. 😀
Ohya Welcome to my blog..
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.
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…
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.
What’s up mates, how is the whole thing, and what you desire to say about this paragraph, in my view its genuinely amazing designed for me.
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
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.
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
What’s up, just wanted to tell you, I loved this article. It was funny. Keep on posting!
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.