Guide to seamlessly integrating form data into MySQL using JavaScript and HTML without redirecting the user from the current page

Question

Guide to seamlessly integrating form data into MySQL using JavaScript and HTML without redirecting the user from the current page

Having trouble inserting a new user into MySQL database? I've attempted using both jQuery and pure JavaScript, but it doesn't seem to be working. There's no response when I click on the submit button. Any ideas on what might be causing this issue?

var regBtn = document.getElementById("regBtn");
regBtn.addEventListener("click", submitForm, false);

function submitForm() {

    var acR = document.getElementById("ac2");
    var pw1 = document.getElementById("pw1");
    var shop = document.getElementById("shop");

    var http = new XMLHttpRequest();
    http.open("POST", "http://xyz.php", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "ac=" + acR.value + "&pw1="+pw1.value "&shop="+ shop.value;
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    };
}

javascript ajax

Answer 1

Answer №1

Your JavaScript code had a few issues, but I've cleaned it up and tested it on a local page named xyz.php. This should make the AJAX call work, but you'll need to share your PHP code for assistance with the database queries.

    var regBtn = document.getElementById("regBtn");
    regBtn.addEventListener("click", submitForm, false);

    function submitForm() {

        var acR = document.getElementById("ac2");
        var pw1 = document.getElementById("pw1");

        var http = new XMLHttpRequest();
        // Removed the http:// protocol assuming a local AJAX call
        http.open("POST", "xyz.php", true);
        http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // Retrieve form field values instead of submitting the full element
        // Added plus (+) character before final pw1
        var params = "ac=" + acR.value + "&pw1=" + pw1.value;
        http.send(params);
        http.onload = function() {
            alert(http.responseText);
        }
    }

I've included a screenshot demonstrating Chrome Dev Tools capturing successful AJAX requests

https://i.sstatic.net/rVpUM.png

Answer 2

Your JavaScript code had a few issues, but I've cleaned it up and tested it on a local page named xyz.php. This should make the AJAX call work, but you'll need to share your PHP code for assistance with the database queries.

    var regBtn = document.getElementById("regBtn");
    regBtn.addEventListener("click", submitForm, false);

    function submitForm() {

        var acR = document.getElementById("ac2");
        var pw1 = document.getElementById("pw1");

        var http = new XMLHttpRequest();
        // Removed the http:// protocol assuming a local AJAX call
        http.open("POST", "xyz.php", true);
        http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // Retrieve form field values instead of submitting the full element
        // Added plus (+) character before final pw1
        var params = "ac=" + acR.value + "&pw1=" + pw1.value;
        http.send(params);
        http.onload = function() {
            alert(http.responseText);
        }
    }

I've included a screenshot demonstrating Chrome Dev Tools capturing successful AJAX requests

https://i.sstatic.net/rVpUM.png

Answer 3

Answer №2

Consider utilizing JQuery post method for this task.

var acElement = document.getElementById("ac2");
var pw1Element = document.getElementById("pw1");

$.post( "xyz.php", { account: acElement, password: pw1Element })
.done(function( data ) {
   alert( "Data has been successfully inserted: " + data );
});

The backend is responsible for processing this post request and executing the insert action, for instance in NodeJs using Express framework.

app.post("/xyz", function(req, res, next) {
    var obj = {};
    obj[account] = body.account;
    obj[password] = body.password;
    mysql.insert(obj);

});

Answer 4

Consider utilizing JQuery post method for this task.

var acElement = document.getElementById("ac2");
var pw1Element = document.getElementById("pw1");

$.post( "xyz.php", { account: acElement, password: pw1Element })
.done(function( data ) {
   alert( "Data has been successfully inserted: " + data );
});

The backend is responsible for processing this post request and executing the insert action, for instance in NodeJs using Express framework.

app.post("/xyz", function(req, res, next) {
    var obj = {};
    obj[account] = body.account;
    obj[password] = body.password;
    mysql.insert(obj);

});

Guide to seamlessly integrating form data into MySQL using JavaScript and HTML without redirecting the user from the current page

Answer №1

Answer №2

Similar questions

Difficulty arises when collapsed text in Bootstrap clashes with the footer design

What is the best way to retrieve the duration of an object tag using JavaScript or jQuery?

Switch tabs with JavaScript

Changes are being made to the state, but the updates are not showing up in the user interface of my photo feed

Manipulating CSS Class Properties Using JavaScript

Exploring the usefulness of `bind(this)` within a ReactJS constructor

Dynamic PHP AJAX XML search feature that requires minimal input characters

Ensure the video frame stretches to fit the full width

Strategies for resolving the problem of null values from getParameter() being passed from AJAX to servlet

Managing JSON data retrieval and manipulation with REST API in Node.js and MongoDB

Unable to attach an onClick event handler to <TableRowColumn> element using Material-UI in React

When the input is altered, retrieve all input values within the div and then proceed to update the corresponding

Tips for showcasing timestamps within a Vue.js/Firebase application

The ngOnChanges lifecycle hook is triggered only once upon initial rendering

How to dynamically add list items to a jQuery Mobile list using Ajax requests

The $resource.query function will now return an array of characters instead of a single string when splitting strings

The function get() in p5.js will provide you with an array of pixels that is empty

Screen content of a post request in Node.js

Is the exchange between Ajax/jQuery and PHP a two-way street?

Is there a way to identify if the parent page has completed loading while within an iframe?