1

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>
phez
  • 31
  • 3
  • Replace your "onsubmit" in the form with **onsubmit="insertPeople(); return false;"** – wolfpunkjs Apr 14 '22 at 00:48
  • (1) instead of `"firstname,lastname,telephonenumber" : val,` please properly serialize your form data and then re-try the ajax . For reference, see this [SO link](https://stackoverflow.com/questions/24007780/jquery-ajax-form-data-serialize-using-php) (2) please post the PHP as well (masking all db credentials first) – Ken Lee Apr 14 '22 at 01:57

1 Answers1

0

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>
wolfpunkjs
  • 111
  • 3