0

What is the Easiest way and method to insert values into a mysql database by using form in popup window without reloading the page?

I have a form that pop's up in a window to ask the user to inter information. Now once the information is correctly interred, the user will click OK button and must remain on the page without the page reload and with the new data displayed on the page.

Is there a way to make that insert method happen?

Please assist!.

McElie
  • 140
  • 3
  • 12
  • 2
    Use AJAX. jQuery AJAX works great! – Rasclatt Jan 15 '15 at 07:37
  • BTW, you don't insert values into a MySQL database thru forms. You use SQL requests. These indeed might be generated by some software driven by some HTML form. – Basile Starynkevitch Jan 15 '15 at 07:38
  • 1
    http://www.sanwebe.com/2012/04/ajax-add-delete-sql-records-jquery-php this tutorial explains it really well. Remember to use preparedstatements instead of raw input to prevent SQL injections. You don't want to be in the rank of the most common vulnerabilities – Álvaro Gómez Jan 15 '15 at 07:39
  • @Rasclatt, Thank you for your answer. Would you please show an illustration of what you have just said? I have a page that runs multiple form with different popup windows as well. – McElie Jan 15 '15 at 07:42
  • Just do a search for jQuery AJAX and you should get all the examples you need. – Rasclatt Jan 15 '15 at 07:45
  • Thank you @ÁlvaroGómez, your link teaches me almost everything I need to know! Thank you. I hope that will also work well for the dialog box or popup windows? – McElie Jan 15 '15 at 07:50
  • 1
    I think you can do that with JQuery UI, but I'm not sure. At the end all gets reduced to open the link where the .php script or whatever back-end technology you choose so it can parse the args with the input of the form and execute the query in the database, so there shouldn't be a problem with that – Álvaro Gómez Jan 15 '15 at 07:55
  • @Thank you David. That is also well – McElie Jan 15 '15 at 08:52

1 Answers1

1

You can do this with AJAX and jQuery 

$(document).ready(function() {

        // send add record Ajax call request to YourResponse.php 

        $("#YourSubmitButton").click(function (e) {
                e.preventDefault();

                 var firstField = $('#firstField').val();   
                var secondField = $('#firstField').val(); // As many fields you have on your Form

                if(Here your validation will work)
                {
                    alert("Please fill all fields!");
                    return false;
                }


                var dataString = 'firstField='+ firstField + '&secondField='+ secondField ; //build a post data structure
                jQuery.ajax({
                type: "POST", // HTTP method POST or GET
                url: "YourResponse.php", //PHP Page where all your query will write
                dataType:"text", // Data type, HTML, json etc.
                data:dataString, //Form Field values
                success:function(data){
                    $("#YourDivId").html(data); //Your Div Id Where Your listing is placed 
                    $("#PopUPDiv").hide(); // Hide Div after success


                }
                });
        });

In YourResponse.php page you fire your Insert query and after that fire Select query just "print_r" your result array.

If you still need help feel free to comment. I will be there.

Sunil Pachlangia
  • 2,033
  • 2
  • 15
  • 25