Inserting Data into MySQL without calling PHP file inside HTML

Question

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?

Ofcourse you can. Have an insert query in your php which takes data from POST. However validate user input before you actually insert the data. — Dipen Shah
– Dipen Shah, Commented Jul 3, 2015 at 13:41
Of course, what's stopping you. Just pass in the necessary data. — Andrei
– Andrei, Commented Jul 3, 2015 at 13:41
Have you tried this? Looks like a good start. Whats the problem? — Chris Charles
– Chris Charles, Commented Jul 3, 2015 at 13:42
I started with web technologies this week. HTML, JavaScript, CSS and PHP i touched this week for the first time. Because of that it was a general question if it is worth the time to spend trying :) — Mulgard
– Mulgard, Commented Jul 3, 2015 at 13:45

Jesper · Accepted Answer · 2015-07-03 13:46:28Z

<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.

Sjon · Accepted Answer · 2015-07-03 13:46:09Z

1

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();
});

answered Jul 3, 2015 at 13:46

Sjon

5,2156 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

Inserting Data into MySQL without calling PHP file inside HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related