Insert data into MYSQL using jquery modal form

Question

I have a page shown below that displays a list of user records from a database with a button. When I clicked on that button display a jquery modal form with a form that allows someone to enter their user information.

My problem is when I click on the 'Add New User' button on the modal form the data should be insert to the database. But that data is not going to database.

This is the code in users.php page with modal form dialog

 <body>

    <h1>User Management System</h1>

    <div id="manage_user">
        <form action="" method="">

           // Here I display a table with user details.................

            <button id="FormSubmit">Add New User</button>
        </form>
    </div>

    <div id="dialog" class="new_user_dialog_box" title="Add New User">
        <p>Fill this form with your details and click on 'Add New User' button to register.</p>

        <p class="validateTips">All form fields are required.</p>

        <div id="new_user_form">
            <table>
                <tr>
                    <td>Name :</td>
                    <td><input type="text" name="name" value="" id="name" /></td>
                </tr>               
                <tr>
                    <td>Address :</td>
                    <td><input type="text" name="address" value="" id="address" /></td>
                </tr>               
                <tr>
                    <td>City :</td>
                    <td><input type="text" name="city" value="" id="city" /></td>
                </tr>
            </table>
        </div>
    </div>

 </body>

The Javascript/jQuery script is

        if ( bValid) { 

            jQuery.ajax({
                type: "POST", // HTTP method POST or GET
                url: "process.php", //Where to make Ajax calls
                dataType:"text", // Data type, HTML, json etc.
                data:bValid, //Form variables
                success:function(response){
                    //on success, hide  element user wants to delete.
                    //$('#item_'+DbNumberID).fadeOut("slow");
                },
                error:function (xhr, ajaxOptions, thrownError){
                    //On error, we alert user
                alert(thrownError);
                }
            });
            $(this).dialog("close");                    
        }

Any help here is much appreciated.

Thank you.

There are several steps between clicking the button and data being inserted into the database. Which step is failing? Is the AJAX call being made to the server? Does it contain the expected data? What is the server's response? Is the PHP code being executed as expected? Are there any errors in the JavaScript console? Are there any errors in the PHP logs? — David
– David, Commented Jun 18, 2013 at 14:38
@David thanks for response. There is not any errors in JavaScript console. After completing form fields from modal form dialog it is closing and don't where data is going' — TNK
– TNK, Commented Jun 18, 2013 at 14:47
If you're not familiar with browser debugging tools, this is a good time to familiarize yourself with them. Using something like Chrome developer tools or Firebug (whatever browser you use should have something), monitor the requests and responses (perhaps on a tab called "net" or "network activity" or something of that nature). This will tell you if anything is actually being sent to the server, what exactly is being sent, and what the server's response is. — David
– David, Commented Jun 18, 2013 at 14:50
In All menu on firebug there is a tab called response and there is a message like this error in post array — TNK
– TNK, Commented Jun 18, 2013 at 14:59

David · Accepted Answer · 2013-06-18 15:09:38Z

1

It looks like you're not actually sending data in your POST. Look at this line in your AJAX call:

data:bValid, //Form variables

What is bValid? From the looks of the code above that line, it's just a boolean. But the data in an AJAX POST needs to contain key/value pairs corresponding to the form elements. Try something like this instead:

dataType: 'JSON',
data: { name: $('#name').val(), address: $('#address').val(), city: $('#city').val() }

This would send a JSON object of key/value pairs, which get their values from the HTML elements with the ids name, address, and city in your form.

answered Jun 18, 2013 at 15:09

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

TNK Over a year ago

I just tried it and there is an alert SyntaxError: JSON.parse: unexpected character

TNK Over a year ago

Then I found data is going to database. But not display in users.php page on the same time. If data is make to display I need to reload the page.

TNK Over a year ago

Can I know the reason for this? Thank you.

David Over a year ago

@TNK: Well, are you updating the page? AJAX requests don't reload the page, so any updates to the page content will need to be done manually. Conversely, reloading the page will also update the content.

David Over a year ago

@TNK: No. If you have additional specific questions then you can create a new question on Stack Overflow for that purpose. But if you're looking for someone to teach you web development then that's too broad for the scope of Stack Overflow. I'll be happy to help with specific additional questions, but it sounds like what you need is to find some beginner tutorials on PHP, JavaScript, jQuery, web development in general. And Stack Overflow doesn't really provide that. The scope of this comment thread has already exceeded the scope of the original question.

|

Collectives™ on Stack Overflow

Insert data into MYSQL using jquery modal form

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related