Post navigation

Using modal windows to insert records in a mysql database

Today I’m going to teach to you how to use modal windows. If the word modal windows doesn’t ring a bell. Then here’s my explanation: Modal windows are pop-up windows which can be used to provide information to the user, like error or success messages. It can also be used as a prompt, which means that the user cannot proceed with the next process unless he interacts with the modal window Lastly, it can be used to perform database operations. Let’s go ahead and get started.

Requirements

Wampserver

Jquery

Jquery UI

EZ Sql

PrepareFirst you need to prepare the directory that you will be working on. Extract the zip files from the jquery and jquery ui websites, if you haven’t already extracted them. Then edit the jquery ui css file. Search for .png files. Make sure that they are correctly linked to the images folder for jquery ui. There are 2 ways to do this, first you move the whole directory that is specified in the link. Second, change the part of the link which doesn’t refer to the filename (Ex. jqui/images/). Just paste that under the find. And under replace with, type the address where the images folder is located. Finally, just click on replace all.

On every file that we will be dealing with. We need to link the jquery core, jquery ui, and the jquery ui css. You can either paste those links on a php file and just include them. But if you are too lazy like me, then just copy the codes below. Make sure that you edit them to match the location, and the filename.

First thing that you might have notice in the code for the form is that it doesn’t have a name, action , and method attributes. It’s just plain form, with no attributes since we will be using ajax to talk to the database.

Table

Next, we create a table which will serve as a visual. So that the user will see that the record has indeed been added.

Then we create the javascript that will control the modal window. Things like validation, manipulating database through ajax happens here. Note that the preceding codes will go inside the the document.ready function.

Properties for the modal window. You can edit the values for width and height if it doesn’t fit with the form that you wish to place.

autoOpen: false,
height: 300,
width: 350,
modal: true,

Another property, is the buttons. You can add up as many buttons as you want. But don’t forget to specify what it will do.

buttons: {
}

To create a button, just specify its name enclose it in double quotes. Followed by a colon. Then the usual function declaration.

"Create an account": function() {
},

Inside the create an account button. We call up the checkLength() function using the values for name, email and password as arguments. This simply means that if the user will click on the create an account button. bValid will be equal to false.

When the value of bValid is true. We append the username and email inputted by the user into the table that we created earlier. We also used the ajax() function to insert those valid data into the mysql database. We will create the crud.php file later, so don’t try the script yet because it won’t work.

Next, we now close the create new account button by adding a comma. Then we create another button called cancel. Which has only one purpose in life, to close the modal window.

Cancel: function() {
$( this ).dialog( "close" );
}

Next, we close the buttons, by adding a comma. After that, create a close() function. This will clear all the fields whenever you close the modal window. This is to make sure that the next user who will register will see a blank form.

Finally we close the the dialog() function. Remember that the modal window will not show up immediately after the page has loaded, we will need to call it in order for it to show up. And here’s the code for it.

Next, let’s create a new file called crud.php. This is where the ajax() function will dump all the data that it has fetched from the modal window. The script is pretty simple. First we included the ez sql files. Then we get the value of act from the url. If you scroll up and check the ajax() function above. You will see that the value of act is create. We then check if the values needed by the insert query is not empty. Then we declared an object of the ezsql class and named it to $db. Finally, I created a switch statement for more flexibility. So that I can add actions for edit, list, search and delete later. All in the same file.

Conclusion and Life storyWe learned the basics of using modal window to insert a record in the mysql database, edit the properties of modal window. And use the checklength() and regularexpression() and ajax() functions.

I’m really running out of time now. I still have something to do. That’s why I’m cutting the story short. Maybe I’ll try to make a tutorial for updating records from a modal window next time. For the mean time, you can go ahead and download the files that we used here. Yeah, I really saved that link for those reading from top to bottom. Thanks, see you next time whoever you are.

Thanks for the reply. Not sure that I made myself clear. Currently, you click on the “Create new user” button then in the modal you have to click in the Name field before you can start typing. I want to be able to click on the “Create new user” button and have a modal pop up with focus already set in the Name field so the user can start typing without first having to click in the Name field. In modal_form_insert.php I tried changing $( “#dialog-form” ).dialog( “open” ); to $( “#dialog-form” ).dialog( “open” ).focus(); but that didn’t do it. Thanks for any assistance.