jQuery add/remove hidden input field to form on click

I used this little code with a reservation form… to put it simple… the user that wanted to make a reservation could opt in/out of receiving a confirmation SMS a few hours before the scheduled date/time…

Real time display input value in div with jQuery

I used this simple trick to display the name of a person after he sends the form data via Ajax and I needed a different response(not from Ajax), so, I set the response message to display:none via css and get the name or other informations in real time… when the form is submitted… the div becomes visible and shows the result… like Thank you {Name} for sending us etc. …

You can see a live demo here.

Send data to PHP via AJAX and get response

This is the simple script that I use every time I build one page sites… I use this code to update, delete, modify, add data to Mysql or other DB’s…

This code also get the class or id of the clicked link and can display a result there or in another div… this script can also be modified to play other important parts in the web app…

Hope it helps.

jQuery (Ajax) Contact form with all elements

This is my default CONTACT form built with jQuery and CSS.
The form uses a jQuery call to a PHP script that inserts data into a Mysql DB and sends two emails of confirmation, all this under the hood… meanwhile, there is a CSS only animation that displays a message that the data is been sent to the server and shows a positive message if that data was sent without errors and an error message if there was an error.

jQuery + CSS – Activate DIV background colour and deactivate other DIV’s bg colour

This little code delivers all the magic, if you are into one page websites/apps like me, this short code will simply save you lots of time.
This code simply activates(changes the style) of an DIV that is clicked on and removes the same style applied to other DIV(active button) in case it has another active style applied to another DIV.
It can be combined with a little CSS code to display a beautiful color transition.
You can see the code running on this little jsFiddle I made: https://jsfiddle.net/cosminr/ampjtwjp/

jQuery load() external file inside div

Sometimes I use the jQuery load() function to display dynamic content inside html elements. As the description says:

load() Description: Load data from the server and place the returned HTML into the matched element.

I provided a working example that loads a simple html file with html tags and another php files that contains variables.

Here is the jQuery code:

Here is the PHP code that deals with the two variables:

Live Demo Here

jQuery .on() method with multiple event handlers

If you need multiple event handlers attached to the same selector executing the same function, you could use:

Learn more about jQuery events here.

What does this function really do? We have two div elements on our page and two different classes .field and .spn. When we click or mouseover over the .field class, the .spn div is showing the “Hello world!” text added via jQuery .text() method.

Try it Yourself / Demo

Fixed Navbar that Disappears on Scroll Down (jQuery + Bootstrap)

In this post we will create a fixed navbar that disappears when the user scrolls down and reappears upon scrolling up using Bootstrap and jQuery.

Try it Yourself / Demo

You can alter the fadeIn() and fadeOut() or change them to other jQuery effect.

Change the background-color and the hover color and so on from the CSS file to fit your project needs and aesthetics.

jQuery sidebar menu with show/hide link

This tutorial shows how to implement a jQuery sidebar menu with a show/hide link. The menu is using jQuery and css to handle the functionality.

See a live DEMO.

To make it work, all you need to do is edit the links showed in the menu/demo version and include all the files needed: jQuery, font-awesome(optional).

See a live DEMO.