Close

Code Snippets

TUTORIAL: Submit Online HTML Form to Both MySQL and Email Using PHP

In 2011, online survey giant, SurveyMonkey, acquired Wufoo Forms for 35 million. SurveyMonkey itself does 113 million  a year in revenue.

And, it’s valued at nearly 1.35 billion.

Both of these services serve a simple purpose: creating online forms. And, they’re not the only players in the market.

How much of that market would you need to siphon off to make more money than you probably ever imagined?

It’s what I tell developers all the time.

Focus on one thing. Get really good at it. Cash in on that one skill until it runs dry.

Lather. Rinse. Repeat.

So, would you like to learn how to build a badass HTML form that submits data to both MySQL and email?

Study this video. It could be your way out:

Get the source code as a supporting listener on Patreon.

Subscribe to the Podcast

[saf]

P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, source code and exclusive courses on Patreon.

June 22, 2016

jQuery Smooth Scroll to Anchor Using animate()

I always get a kick out of jQuery… especially animation methods.

It’s one of those things that just wows clients… and truthfully, I feel pretty cool watching the animations run on a site.

That said, much of what you can do with jQuery animations is more than “eye-candy”… they help enhance the user experience.

This is one such animation: smoothing scrolling to an anchor tag.

Instead of that abrupt flash you get as default behavior in a browser… you get a nice smooth scroll that gives a site visitor some context about what they just clicked and where they’re ending up.

Here’s how to do it:

And, if you’d give me a likey-like I’d sure appreciate it!

And like I said the source code is available on Patreon for the smart folks who support the show. (You know you wanna join them.)

P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, podcast episodes and more on johnmorrisonline.com, @jpmorris on Twitter and youtube.com/johnmorrisvideo.

Subscribe to the Podcast

[saf]

May 25, 2016

PHP Fatal Error [FIX]: Call to a Member Function Fetch_Assoc On a Non-Object

I remember this annoying error like it was yesterday.

It always baffled me a bit when I first started learning PHP (I know… N00B!): Fatal error: call to a member function fetch_assoc() on a non-object.

It was always the line number that tripped me up.

Anyhoo, here’s what’s really going on and how to kill this error dead once and for all:

And, if you’d give me a likey-like I’d sure appreciate it!

And like I said the source code is available on Patreon for the smart folks who support the show. (You know you wanna join them.)

P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, podcast episodes and more on johnmorrisonline.com, @jpmorris on Twitter and youtube.com/johnmorrisvideo.

Subscribe to the Podcast

[saf]

May 18, 2016

jQuery: Find An Anchor By Its HREF

jQuery selectors can be a bit tricky.

:first-child, :last-child, nth-of-type, is it zero-based, why is it grabbing that element when I expected this one. Fun stuff.

On a recent project, I needed to find an anchor tag by its href so I could then replace it with my own URL… and that got me thinking about jQuery selectors again.

So, let’s run through some and try to clear up some confusion. Here’s this week’s Tech Tutorial:

And, if you’d give me a likey-like I’d sure appreciate it!

And like I said the source code is available on Patreon for the smart folks who support the show. (You know you wanna join them.)

P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, podcast episodes and more on johnmorrisonline.com, @jpmorris on Twitter and youtube.com/johnmorrisvideo.

Subscribe to the Podcast

[saf]

May 11, 2016

3 Ways to Verify an Email Address Using HTML, jQuery and PHP

When you verify an email address, there’s really three things you want to do:

  1. Don’t submit the form unless the email address is valid
  2. Give hints about what’s wrong and how to fix it
  3. Make sure malicious data doesn’t get into your database

Well, here’s a handy little snippet that does all three using HTML, jQuery and PHP. Feel free to use this how you need in your projects. And, if you want it you can get the source code as a supporting listener on Patreon.

Anyway, here’s the video… see what you think:

And, if you’d give ol’ JMO a like I’d appreciate it!

And like I said the source code is available on Patreon for the ever-awesome folks who support the show. (Hint: Be awesome. Join them.)

P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, podcast episodes and more on johnmorrisonline.com, @jpmorris on Twitter and youtube.com/johnmorrisvideo.

Subscribe to the Podcast

[saf]

May 4, 2016

How to Get the First Value In An Array Using PHP When You Don’t Know the Keys

Arrays are like that crazy uncle who gets a little too drunk at Christmas and starts telling inappropriate jokes at the dinner table.

You love ’em… but you hate ’em.

You can efficiently store and grab tera-tons of data with them… but when you just want to get the value of the 2nd element in the 3rd dimension of one… you feel like you gotta break out the code-jitsu to get at it.

Have no fear! Captain JMO is here!

I just cranked out a new video for you showing you several different ways to get at different keys and values in an array.

Technically, I made it to get at the FIRST value in an array WHEN you don’t know what the keys will be. But, you can use these functions and fancy combinations thereof to get a whole slew of data in your arrays.

Plus, I slipped in a little advice on why seeing the several different methods I used is important even if you already know how to do this.

Hint: I squash those know-it-all developers egos like annoying little mosquitos.

Anyway, here’s the link… judge for yourself:

And, if you’d give ol’ JMO a like I’d appreciate it!

Oh and the source code is available on Patreon for the ever-awesome folks who support the show. (Hint: Be awesome. Join them.)

P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, podcast episodes and more on johnmorrisonline.com, @jpmorris on Twitter and youtube.com/johnmorrisvideo.

Subscribe to the Podcast

[saf]

April 27, 2016

Grizzly Bear Rips Freelancer to Shreds. You Take His Job

Subscribe to the Podcast

[saf]

Here’s the big thing to get to succeed as a freelance web developer:

If you and your buddy are hiking in the forest and are suddenly attacked by a grizzly bear… you don’t need to be the fastest guy in the world. You just need to be faster than your buddy.

There’s your uber-secret, stop-the-presses secret to success.

Freelancing is a competition. To win, you don’t need to be perfect… you just need to be better than the next guy. And, let me tell you… most of your competition is epicly bad at this.

The grizzly would be five bites into a thigh bone before they took two steps.

You just need to do some simple things that others aren’t willing to do. Here’s my 5-point “dominate freelance sites” checklist. Don’t overlook this. It’s nothing earth-shattering… the gold is in the doing:

1. Pick a Niche

Ohmahgawd John! Quit talking about this niche thing. It’s all you ever talk about… blah, blah, blah… I get it.

Do you?

I get that response all the time. THEN, I check their profile:

“I’m a highly motivated web developer with experience in HTML, CSS, PHP, MySQL, Javascript and NodeJS”.

Zzzzzzzzzzzzz.

Everybody says that… and it means NOTHING to a client. They don’t even know what half that stuff is. They do not “understand the words that are comin’ out of yo mouth!”

What is the end result you deliver?

“A profit-generating membership site your members will love.”

“A smooth registration form that’s a dream to complete.”

“A dead simple blog you’ll crank out quality content on.”

NOW you’re speaking my language.

Pick a niche, specialize in it and best the best at it. This is the 2nd most important thing you can do to be a wealthy freelancer (#1 is coming).

2. Build a Compelling Profile

You can’t make people hire you. There’s no magic secret to make every client hire you every time. Instead, it’s about making your best case… and, believe me, most freelancers do NOT.

Here’s some obvious stuff most aren’t doing:

  1. Fill out the whole profile.
  2. Use a professional-looking picture
  3. Write more than two sentences in your description
  4. Have a portfolio
  5. Take relevant tests

Brain-busting stuff I know… but you’d be shocked how many freelancers just don’t do it. Then, of course, come to me bewildered about why they’re not getting clients.

Here’s a hint…

If you’re not willing to spend more than 10 minutes on your own profile… chances are you’re not going to put much effort into my project. True or not… that’s what a client thinks when they see it.

Now, I have a video (I’ll tell you about in a moment) where I give you my 3-step formula for writing my service description that I’ve found works like gangbusters… but simply being complete is yuuuuuuuuuge!

3. Bid Intelligently

Here’s another head-scratcher…

I get a lot of freelancers who complain to me about all the “junk projects” on Upwork or Freelancer.com, etc.

Ya know…

You can filter all that junk out right? In fact, there’s a filter right on Upwork when you search for projects… that lets you only see projects from clients who actually hired someone before.

And you can toggle it between:

  • No hires
  • 1-9 hires
  • 10+ hires

IMAGE

So start off by only toggling the 10+ hires option.

Those are presumably the cream of the crop in terms of clients… and avoid all that junk. Plus, there’s filters for client Experience Level, project Budget, Job Type and a lot more.

Finding the right projects to bid on is the “dirty secret” to winning at bidding.

Of course, writing your bid is a whole other animal. But, I recently made a video for you where I go into that. I’ll get to that in a minute.

4. Do Good Work

The #1 most important thing you will do to have success as a freelancer is to do make your clients over the moon about working with you.

It’s about the code you write…

It’s about how fast you get stuff done…

It’s about how well you communicate…

It’s about how easy you are to work with…

It’s about how reliable you are…

It’s the WHOLE thing. You can’t use one to Trump the other. All of them combined will ensure clients love you, hire you again and again and tell everyone they know about you.

But, you’ve likely heard a lot about that… so let’s move onto:

5. Build a Funnel

This is the thing almost every developer balks at:

I just want to put up my profile and get work.

I don’t want to do all this marketing stuff.

Selling is evil.

(Said in my whiniest Gilbert Gottfried voice)

But, it’s THE fastest way to start getting clients.

Let’s say you build those dream-like AJAX forms…

Put a video on YouTube showing how you built. The exact code. Point people to your profile at the end of it if they just want it done for them. Throw a $1/day in YouTube advertising at it for a month or two until it gains traction.

Just don’t give away the source code like I do.

And, that’s it.

You’ll start getting viewers, subscribers and eventually clients. And it’s cheap and easy as hell.

Don’t be afraid of this.

You don’t need to be Tom Cruise. You just need to have something that actually works and be able to explain it fairly well. And, clients will see you can do exactly what they need and want to hire.

I get multiple quote requests every single month doing this.

So, that’s all simple stuff… but the trick is in DOING it.

Now I mentioned a video where I get into more detail about this. It’s a 30-minute whopper where I go into a lot more detail about these five steps, including:

  • My 3-part formula for writing my service description
  • How to write your bids to get hired
  • The critical part of your profile everybody gets wrong

And a bunch more.

It’s this month’s Patreon-Only e-course. If you want to keep going with this and get access to the video, just become a supporting listener of $10 or more per month over on Patreon… and you’ll get it.

I’m finishing editing it and it’ll be up on Patreon in the next few days.

So, be sure to jump in right away.

Here’s where to go:

http://www.JohnMorrisOnline.com/Patreon

You’ll also get access to all my other Patreon-only courses, all my source code and priority Q&A access.

No reason not to:

http://www.JohnMorrisOnline.com/Patreon

See ya over there!

P.P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, podcast episodes and more on johnmorrisonline.com, @jpmorris on Twitter and youtube.com/johnmorrisvideo.

April 21, 2016

How to Create a Contact Form Using PHP

When you create a contact form in PHP, there’s a couple key parts you need to make sure are in place so the person actually using the form doesn’t want to suddenly get into knife-throwing (at your head) afterward.

You need validation that make sense and is easy to understand.

I prefer the kind that shows up all at the top of the form, because when you have a long form and missed one checkbox and have to go hunting through the form like you’re looking for a lost sock… knife-throwing becomes a viable option.

Next, you need to make sure when there is an error, you don’t lose all the data you entered already.

Nothing will get knives, bricks, cars, kitchen sinks, those big bats with spikes on them… thrown at your head faster than making me re-enter all the form field data again because I forgot to check whether I like chocolate bunnies or not.

With all that in mind, I humbly present to you MY contact form tutorial:

It’s possible this could be YOUR contact form… meaning you’re obviously cool like me and think the way it’s built is perfect.

Or, you may to prefer to hurl insults at me on YouTube about it.

Either way, there’s 100 ways to skin a cat (but why would you)… and this is just one. Use it if you like it.

P.S. Ah yes! That pesky source code. You can get that as a supporting listener of the podcast. Learn how to do that here: http://www.JohnMorrisOnline.com/patreon

P.P.S. If you liked the show, give it a like and share with the communities and people you think will benefit. And, you can always find all my tutorials, podcast episodes and more on johnmorrisonline.com, @jpmorris on Twitter and youtube.com/johnmorrisvideo.

Subscribe to the Podcast

[saf]

April 20, 2016

How to Use the PHP DateTime Class Instead of the PHP Date Function

In this PHP tutorial, you learn how to use the PHP DateTime class introduced in PHP 5.2 instead of the PHP date function. Watch the tutorial below:


Links mentioned in the video:

Get the source code for this video as a supporting listener of the John Morris Show on Patreon

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

November 19, 2015

How to Create a Custom Error 404 Not Found Page

In this PHP tutorial, you’ll learn how to create a custom 404 page not found error page. Watch the tutorial below:

Links mentioned in the video:

Get the source code for this video as a supporting listener of the John Morris Show on Patreon

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

November 5, 2015

How to Send Mail Using PHP

In this PHP tutorial, you’ll learn how to send mail using PHP. Watch the tutorial below:

Links mentioned in the video:

Get the source code for this video as a supporting listener of the John Morris Show on Patreon

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

October 29, 2015

How to Parse XML With SimpleXML and PHP

In this PHP tutorial, you’ll learn how to parse XML using SimpleXML and PHP.

Watch the tutorial below:

Links mentioned in the video:

Get the source code for this video as a supporting listener of the John Morris Show on Patreon

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

October 22, 2015

How to Create a Zebra Striped Table With Odd Even Row Colors Using PHP

In this PHP tutorial, you’ll learn how to create a zebra striped table by adding odd and even classes in a loop using PHP.

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

Get the source code for this video as a supporting listener of The John Morris Show on Patreon

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

October 14, 2015

Add Active Navigation Class to Menu Item Based on URL Using jQuery

In this jQuery tutorial, you’ll learn how to add an active class to a menu item based on the page URL using jQuery… so you can highlight that menu item. You’ll learn:

  • how use the jQuery addClass() method
  • how to get the current page’s URL path in JavaScript
  • how to split a URL in an array of parts
  • how to use the JavaScript pop() method
  • how to target an element based the value of a specified attributed using jQuery

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>About</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Contact</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Keep Calm and jQuery On!</h1>
</body>
</html>

jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();

// Account for home page with empty path
if ( path == '' ) {
path = 'index.php';
}

var target = $('nav a[href="'+path+'"]');
// Add active class to target link
target.addClass('active');
});

html, body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 100%;
}

nav {
background: #000;
color: #fff;
}

nav a {
color: #fff;
text-decoration: none;
}

nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}

nav ul li {
display: inline-block;
margin-right: -5px;
}

nav ul li a {
display: block;
padding: 10px 15px;

}

nav ul li a:hover,
nav ul li a.active {
background: #555;
}

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 20, 2015

Set DIV Height to 100% of Its Parent Using jQuery

In this jQuery tutorial, you’ll learn how to set the height of a DIV to 100% of its parent. You’ll learn:

  • how to set variables and target selectors
  • how to get and set div height using height()
  • how to target multiple selectors at once

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery DIV 100% Height of Container</title>
<style>
.container {
overflow: hidden;
border: 1px solid red;
}

.left, .right {
border: 1px solid #000;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// Get the height of our container
var container_height = $('.container').height();

// Set target DIVs height to container height
$(".left, .right").height(container_height);
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<p>One paragraph of text. This is the shorter div.</p>
</div>
<div class="right">
<p>Multiple</p>
<p>Paragraphs</p>
<p>Of</p>
<p>Text</p>
<p>This is the longer div.</p>
</div>
</div>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 11, 2015

jQuery Tutorial: How to Build a jQuery Accordion

In this jQuery tutorial, you’ll learn how to build a jQuery accordion. You’ll learn:

  • how to slideUp() and slideDown() different elements
  • how to use relative selectors to target elements in jQuery
  • how to use the click event to trigger functionality on click

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Accordion</title>
<style>
html, body {
font-size: 100%;
}

.accordion {
margin: 50px;
}

.accordion dt,
.accordion dd {
padding: 10px;
border: 1px solid #000;
}

.accordion dt a,
.accordion dd a {
display: block;
color: #000;
font-weight: bold;
}

.accordion dt {
background-color: #ccc;
}

.accordion dd {
margin: 0;
border-top-width: 0;
border-bottom-width: 0;
font-size: 1rem;
}

.accordion dd:last-of-type {
border-bottom-width: 1px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){

// Hide all panels to start
var panels = $('.accordion > dd').hide();

// Show first panel on load (optional). Remove if you want
panels.first().show();

// On click of panel title
$('.accordion > dt > a').click(function() {
var $this = $(this);

// Slide up all other panels
panels.slideUp();

//Slide down target panel
$this.parent().next().slideDown();

return false;
});
});
</script>
</head>
<body>
<dl class="accordion">
<dt><a href="">Panel 1</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nisl quam, convallis ac lacus vel, mollis bibendum ante.</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Suspendisse potenti. In ullamcorper posuere nibh, in pretium metus porttitor vitae. Aenean felis libero, condimentum sagittis.</dd>

<dt><a href="">Panel 3</a></dt>
<dd>Laoreet quis, auctor in orci. Ut gravida nibh vitae lorem egestas, vel commodo mi gravida. Curabitur elementum dolor id lacus.</dd>
</dl>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 6, 2015

Responsive Web Design: Building a Responsive Menu

In this responsive web design tutorial, you’ll learn how to build a responsive menu. You’ll learn:

  • how to target different breakpoints with media queries
  • how to write the CSS to “flip” the menu from vertical to horizontal view at those breakpoints
  • how to use jQuery to create a responsive navigation icon that toggles the mobile menu

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
background: #000;
overflow: hidden;
}
.header {
float: left;
color: #fff;
padding: 15px;
overflow: hidden;
}
.logo {
font-size: 24px;
}
.handle {
float: right;
background: #222;
color: #fff;
border: none;
font-size: 18px;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
display: none;
}
nav a {
text-decoration: none;
color: inherit;
}
nav ul {
overflow: hidden;
color: #fff;
margin: 0;
padding: 0;
text-align: center;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
}
nav ul li {
float: right;
display: inline-block;
padding: 20px;
}
nav ul li:hover {
background-color: #222;
}
section {
box-sizing: border-box;
line-height: 1.5em;
width: 70%;
margin: 0 auto;
padding: 20px;
}
@media screen and (max-width: 767px) {
.header {
float: none;
}
nav ul {
background: #222;
max-height: 0;
width: 100%;
}
nav ul.show {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
.handle {
display: inline;
}
section {
width: 100%;
}
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.handle').on('click', function(){
$('nav ul').toggleClass('show');
});
});
</script>
</head>
<body>
<nav>
<div class="header">
<a class="logo">Demo</a>
<button class="handle">
<i class="fa fa-bars"></i>
</button>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section id="content">
<h1>Responsive navigation is da bomb!</h1>
<p>Mobile users around the world thank you!</p>
</section>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

August 8, 2015

jQuery Tutorial: Submit a Form and Post Data Using jQuery and AJAX

In this jQuery tutorial, you’ll learn how to submit a form, post the data and format the response using jQuery and AJAX:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>Get Data From a MySQL Database Using jQuery and PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Set form variable
var form = $('#search_form');

// Hijack form submit
form.submit(function(event){
// Set username variable
var username = $('#username').val();

// Check if username value set
if ( $.trim(username) != '' ) {
// Process AJAX request
$.post('process.php', {name: username}, function(data){
// Append data into #results div
$('#results').html(data);
});
}

// Prevent default form action
event.preventDefault();
});
});
</script>
</head>
<body>
<span>Search by name: </span>
<form method="POST" action="process.php" id="search_form">
<input type="text" id="username" name="name">
<input type="submit" id="submit" value="Search">
</form>
<div id="results"></div>
</body>
</html>

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');

// Check if $_POST is set
if ( empty ( $_POST['name'] ) ) {
echo "Yo! Something ain't legit!";

exit;
}
// Connec to MySQL
$mysqli = new mysqli('localhost', 'YOUR_USERNAME', 'YOUR_PASSWORD', 'YOUR_DATABASE');

// Check connection
if ( mysqli_connect_errno() ) {
echo "Can't connect: " . mysqli_connect_error();
}

$stmt = $mysqli->prepare("SELECT * FROM ajaxget WHERE name = ?");
$stmt->bind_param("s", $_POST['name']);
$stmt->execute();

$result = $stmt->get_result();

while( $row = $result->fetch_object() ) {
$rows[] = $row;
}
?>
<ul>
<?php foreach ( $rows as $row ) : ?>
<li><?php echo $row->name; ?>: <?php echo $row->favorite_food; ?></li>
<?php endforeach; ?>
</ul>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

July 30, 2015

jQuery Tutorial: AJAX Load Content With No Page Refresh

Here’s how to load content into a div on click using the AJAX load method:

Here’s the code I used in the video:

<h1>About</h1>
<p>This is the about page</p>

<h1>Home</h1>
<p>This is the home page</p>

<DOCTYPE html>
<html>
<head>
<title>Load a Page With AJAX and No Refresh</title>
<style>
#nav ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: inline-block;
padding: 10px 15px;
}
#content {
padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('#nav ul li a'),
container = $('#content');

// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');

// Load target page into container
container.load(target + '.php');

// Stop normal link behavior
return false;
});
});
</script>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" data-target="home">Home</a></li>
<li><a href="#" data-target="about">About</a></li>
</ul>
</nav>
<div id="content">
<?php include('home.php'); ?>
</div>
</body>
</html>

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

July 23, 2015