'How do you get form data to submit using AJAX?

I am trying to get a form to submit. I am using HTML, JS, PHP, and AJAX here. Since it will not submit, I assume something is wrong with my insert function, however I cannot figure out what the problem is. Whenever I click "submit" nothing changes. Nothing moves. The information doesnt get added.

<!doctype html>

<html>

<head> 

<script src="./js/jquery-3.6.0.min.js">. 

</head>

<body>

<form onsubmit="return(insertPeople())">

First name: <input type=text id=firstname><br>
Last name: <input type=text id=lastname><br>
Phone number: <input type=text id=telephonenumber><br>
<input type=submit value=submit>

</form>

<div id=showpeople></div>

<script>

function insertPeople(){

val = $("#showpeople").val();

$.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
$("#showpeople").html(data);
});

return(false);
}

function showpeople(){
$.get("./week7ajax.php",{"cmd":""}, function(data){
$("#showpeople").html(data);
});
return(false);
}

showpeople();

</script>

</body>


</html>
javascriptphphtmlajax


Solution 1:[1]

Give this a shot. I fixed some missing quotations, indented a few lines, and removed some unnecessary code.

<form onsubmit="insertPeople(); return false;">

First name: <input type="text" id="firstname"><br>
Last name: <input type="text" id="lastname"><br>
Phone number: <input type="text" id="telephonenumber"><br>
<input type="submit" value="submit">

</form>

<div id="showpeople"></div>

<script>

function insertPeople() {
    val = $("#showpeople").val();
        $.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
        $("#showpeople").html(data);
    });
}

function showpeople() {
    $.get("./week7ajax.php",{"cmd":""}, function(data){
        $("#showpeople").html(data);
    });
}

showpeople();

</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wolfpunkjs

Related Questions