Edit Database entry with AJAX and return edited data

Question

I have the following form:

 <?php 
        echo "<strong>".$Event_data_fetched['event_subject']."</strong><br />";

        echo   '<form id="Event_Editing" action="#" method="post">
                    Event-Type:<br />
                    <select name="edited_event_type">
                        <option>'.$Event_type.'</option>
                        <option>'.$Unselected_1.'</option>
                        <option>'.$Unselected_2.'</option>
                    </select><br /><br />

                    Event-Subject:<br />
                    <input type="text" name="edited_event_subject" value="'.$Event_data_fetched['event_subject'].'"/><br /><br />

                    <input id="Edit_Event" type="submit" name="Edit_Event" value="Speichern">
                </form>';               
    ?>

The form is meant to display data, from a row in the database and offer the user the option to edit said data. And I already have a query that handles the data and rewrites the edited data in the Database, when the form is submitted:

if(isset($_POST['Edit_Event'])){
        $New_Type_Value = $_POST['edited_event_type'];
        $New_Subject_Value = $_POST['edited_event_subject'];

        if($New_Type_Value == "Meet"){
            $New_Type_Value = 1;
        }
        else if($New_Type_Value == "Clubday"){
            $New_Type_Value = 2;
        }
        else if($New_Type_Value == "Surprise-Event"){
            $New_Type_Value = 3;
        }

        $edit_data_query = "UPDATE b6vjp_event
                            SET event_type_id = $New_Type_Value,
                                event_subject = '$New_Subject_Value'
                            WHERE id = $Event_id";

        mysqli_query($GLOBALS['connect'], $edit_data_query);
    }

Now I want to put this block of code into a separate .php File.

My ultimate goal is to post the form to an AJAX script, that then sends the data to a separate file, where it edits the DB with the new data. After it has been inserted the newly edited data should be given back and written back into the form. I also need to post a variable with the ID of the row. Otherwise, the query won't know where to insert the edited data.

I googled a bunch and tried a lot of things, but don't seem to find anything specifically working for me. I did stumble across a code that looks like a good start but not what I want to do:

 <script type='text/javascript'>
    /* attach a submit handler to the form */
    $("#Event_Editing").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get the action attribute from the <form action=""> element */
    var $form = $( this ),
        url = $form.attr( 'action' );

    /* Send the data using post with element id name and name2*/
    var posting = $.post( url, { name: $('#name').val(), name2: $('#name2').val() } );

    /* Alerts the results */
    posting.done(function( data ) {
        alert('success');
    });
    });
</script>

My biggest Problem is that I'm not that good at AJAX. Does anybody know how I would go about doing this?

Answer 1

You can set up the AJAX call like so:

<?php 
echo "<strong>".$Event_data_fetched['event_subject']."</strong><br />";

echo   '<form id="Event_Editing" action="#" method="post">
            Event-Type:<br />
            <select name="edited_event_type">
                <option>'.$Event_type.'</option>
                <option>'.$Unselected_1.'</option>
                <option>'.$Unselected_2.'</option>
            </select><br /><br />

            Event-Subject:<br />
            <input type="text" name="edited_event_subject" value="'.$Event_data_fetched['event_subject'].'"/><br /><br />

            <input id="Edit_Event" type="submit" name="Edit_Event" value="Speichern" onclick='editData();'>
        </form>';        

?>


<script>

    function editData(){
        var value = document.getElementById('Event_Editing').value;

        $.ajax({
            url : 'your-backend-file-with-DB-Query.php',
            method : 'POST',// OR GET
            data: {value:value},
            dataType: 'json',
            success:function(data) {

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                alert("responseText: "+xhr.responseText);
            }

        }); 

    }

</script>

Then in your backend file you can receive the values like so:

<?php

/*CONNECTION TO DB*/

$value = $_POST['value'];

/*Now you can use this value in your Query and update the database*/

?>

Answer 2

If your current code works fine without any issue then,

you can just use echo json_encode($_POST); at the end of your code in PHP file to return data that you have updated in your DB.

In your javascript code try,

posting.done(function( data ) {
       //Prits data you returned on console.
        console.log(data);
    });