Display success message in popup dialog after form submit

Question

I am new to jQuery. I want to open a form in a popup dialog. When the user submits the form data should be inserted into MySQL database & success message should be displayed in the dialog.

I could do dialog with form but how to load success message?

<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
    <button id="dialog_trigger">open the dialog</button>
    <div id="dialog" style="display:none;" title="Dialog Title">
        <form id="form1">
            <input type='text' name='data' id='data'/>
            <input type='submit' id='submit'/>
        </form>
    </div>
    <script>
        $( "#dialog_trigger" ).click(function() {
            $( "#dialog" ).dialog( "open" );
        });
        $("#dialog").dialog({
            autoOpen: false,
            position: 'center' ,
            title: 'EDIT',
            draggable: false,
            width : 350,
            height : 200, 
            resizable : true,
            modal : true,
        });
        $( "#submit" ).click(function() {
        // help    
        });
    </script>
</body>

PHP:

$data=$_REQUEST['data'];
$q= mysqli_query($c,"INSERT INTO report (data) VALUES ('$data')") or die(mysqli_error());
if($q){
    echo "Your report is submitted!"; //this should appear in popup dialog
}

Answer 1

Use jQuery form plugin or similar to submit data via AJAX call.

Your data entry point should return some JSON encoded value, for example

echo json_encode(array('message' => 'Thank you for your submission'));

Now, from JavaScript side use the returned message to fill modal content, like

$("#message").text(message);

Display success message in popup dialog after form submit

Question

1 answers

solution1
0 2015-05-10 12:21:04

Display success message in popup dialog after form submit

Question

1 answers

solution1 0 2015-05-10 12:21:04

solution1
0 2015-05-10 12:21:04