CODEWITHSUNDEEP
javascriptphpmysql
Mulgard
Mulgard

Reputation: 10589

Inserting Data into MySQL without calling PHP file inside HTML

I have a form:

<form method="post" action="insert.php">
    <input type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input type="text" name="nickname" placeholder="Spitzname" required>
    <br>
    <input type="email" name="email" placeholder="Email" required>
    <br>
    <input type="submit" value="Speichern">
</form>

As you can see my action is action="insert.php" so that calls my insert.php. A new url is created and it is opened in the browser.

But what if i dont want that? I want to stay on the same site where the form is and i would prefer not to call any php directly. i would prefer to call a javascript function. For example, my select i do with ajax:

function getData() {
    $.ajax({
        url: "queries.php",
        data: {action: "retrieve_data"},
        dataType: "json",
        type: "post",
        success: function(output) {
            // do stuff
        }
    });   
}

Can i also do something like that with the insert?

Upvotes: 0

Views: 720

Answers (2)

Jesper
Jesper

Reputation: 3834

<html>
<body>
<form method="post" action="insert.php" id="insertForm">
    <input type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input type="text" name="nickname" placeholder="Spitzname" required>
    <br>
    <input type="email" name="email" placeholder="Email" required>
    <br>
    <input type="button" id="insertData" value="Speichern">
</form>
<script type="text/javascript" src="lib/js/jquery-2-1-3.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#insertData').click({ inputs:$('#insertForm :input') }, getData);
    });

    function getData(o) {
        var values = {};
        o.data.inputs.each(function() {
            values[this.name] = $(this).val();
        });

        $.ajax({
            url: "queries.php",
            data: {action: "retrieve_data", firstname: values['firstname'], lastname: values['lastname'], nickname: values['nickname'], email: values['email']},
            dataType: "json",
            type: "post",
            success: function(output) {
                // do stuff
            }
        });
    }
</script>
</body>
</html>

Here you go, you can always edit is as you want, or what values are optional and such.
Remember i've used a type="button" so the page doesn't reload, so the action could just stay empty.

Upvotes: 1

Sjon
Sjon

Reputation: 5155

Since you seem to be using jQuery, this is easy; as explained in the documentation. If you give your form id=insertForm this should work:

$("#insertForm").submit(function(e){
    $.ajax({
        url: "/insert.php",
        type: "post",
        data: $(this).serialize();
    });

    e.preventDefault();
});

Upvotes: 1

Related Questions