Ajax call to a php file is not working

Question

I am trying to implement a simple form which will eventually connect to a database and make entries in it. In the tag,I am calling the php file which will connect me to the database in the back-end.

index.html

<html>
<head>
<script>
function submitForm(formId){

    //var formData= $.(formId).serialize();
    $.ajax({
        url:'new-user.php',
        type:'POST',
        data:{
            user_name=$("#user_name").val(),
            password=$("#password").val();
        }
        success:function(response){
            alert(response);
        }
    });
}
</script>
</head>

<body>
<form onsubmit="submitForm('#myForm');" id='myForm'>
User Name: <input type="text" name="user_name" id="user_name" />
Password: <input type="text" name="password" id="password" />
<input type="submit"/>
</form>
</body>

</html>

new-user.php

<?php include 'database.php';?>

<?php 
mysqli_query($connect,"create table login(User_name varchar(50) NOT NULL,Password varchar(50) NOT NULL)");
$user_name=$_POST['user_name'];
$password=$_POST['password'];
if(empty($user_name)){
    $name_error="name is required";
}

mysqli_query($connect,"Insert into login(User_name,Password) values('$user_name','$password')");
if(mysqli_affected_rows($connect)>0){
    echo "<p>Credentials added</p>";
    echo "<a href='index.html'>Go back</a>";
}else{
    echo "<p>Error</p>";
    echo mysqli_error($connect);
}
?>

database.php

<?php
$connect=mysqli_connect('localhost','root','','testdb');
if(mysqli_connect_errno($connect)){
    echo 'failed to connect';
}
?>

The above is not creating any table in the testdb database.Neither,it is generating any alert messages.The Url however changes after clicking the submit button as http://localhost/try2/?user_name=aayushi&password=ded but after that nothing happens. This is my first php code, so I don't really know what's the meaning of this exactly.

You want `success` instead of `suceess`. That'll at-least solve the alert problem. — , Apr 23 '17 at 19:52
And to address the redirect problem http://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission — , Apr 23 '17 at 19:53
@aayushi are you importing the jQuery lib before your script tag? Because I can't see that there. Plus you can call the ajax method on DOM ready which you haven't done there either. Plus I don't see the need of using multiple PHP tags in a solely PHP file, i.e: `new-user.php` — Ayan, Apr 24 '17 at 05:43
Your `new-user.php` has other flaws too. One of them being, whenever you try to insert a credential you will have a new table created with the name `login`. I assume you don't want that to happen because suppose you have 1000 users then you will 1000 tables with the name `login`. Although as far I know, mysql won't let that happen and will throw some error. — Ayan, Apr 24 '17 at 06:00
One more tip, try to use the console to look for errors that is occuring when you perform the actions. — Ayan, Apr 24 '17 at 06:03

score 1 · Accepted Answer · 2017-04-23T21:09:25.950

1

Okay, since no one seems to actually be reading your code, there's a couple of syntax errors that I missed until I threw it into PhpStorm

Change your function to this:

function submitForm(formId){

    $.ajax({
        url:'/new-user.php',
        type:'POST',
        data:{
            user_name: $("#user_name").val(),
            password: $("#password").val()
        }
    })

        .complete(function (response) {
            alert(response)
        })

   return false; // Prevents the form from submitting the standard way
}

EDIT: Change the form to this:

<form onsubmit="return submitForm('#myForm');" id='myForm'>

edited Apr 23 '17 at 21:09

answered Apr 23 '17 at 20:00

So, even the first time the table is not getting created and in the url I have provided the relative path to the file – Aayushi Apr 23 '17 at 20:02
And I have addressed all the typos, but no changes now too – Aayushi Apr 23 '17 at 20:03
even if I create a table manually and remove that create query from my code, then also the values are not getting inserted in the table – Aayushi Apr 23 '17 at 20:08
if I do this action, then it works fine!! I had implemented the same code using action, then it was making all the entries in the database.But I need to implement it using ajax and I dont know what the problem is with that ajax call – Aayushi Apr 23 '17 at 20:13
@aayushi What exactly is the URL to `new-user.php`? – Apr 23 '17 at 20:14
at first it was in a different folder named action, now I have moved it in the same folder as the other codes and using /new-user.php, but seems to make no changes to the end results – Aayushi Apr 23 '17 at 20:17
What's your folder structure like? If the URL to new-user.php is /new-user.php that would mean it's not in any folders at all. – Apr 23 '17 at 20:25
xampp/htdocs/try2/ , inside try2 there are all the files- index.html,new-user.php,database.php – Aayushi Apr 23 '17 at 20:27
And I also don't understand that why is my URL showing the username and password values when I am using the POST method.Is this the correct behavior? – Aayushi Apr 23 '17 at 20:30
I've updated my answer, I fixed a few syntax errors and prevented the redirect. – Apr 23 '17 at 20:33
@aayushi It's not the correct behavior. What's happening is that your form is being submitted the standard way, because it doesn't automatically know you want to use AJAX. It then shows the parameters in the URL because it defaults to GET. – Apr 23 '17 at 20:37
the same thing is happening, even after trying the updated code! @Xuzurs – Aayushi Apr 23 '17 at 20:38
Alright alright, let me spin up a database quick and try the code. – Apr 23 '17 at 20:42
@aayushi Check the change to the form, it's working for me now. – Apr 23 '17 at 21:10
@aayushi I've tested this a few times now and it works for me. You are loading jQuery somewhere right? – Apr 24 '17 at 19:20
yes,thanks it worked!I was missing some libraries.can you please tell me whether your url is coming the right way? – Aayushi Apr 24 '17 at 19:36
@aayushi What exactly do you mean? – Apr 24 '17 at 19:37
my url is still showing the values of username and password even though I am using POSt – Aayushi Apr 24 '17 at 19:50
@aayushi That means your form is still being submitted the standard way. AJAX won't change the page. Try moving your script to the bottom of the page, just before the `
` tag
– Apr 24 '17 at 19:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142544/discussion-between-aayushi-and-xuzurs). – Aayushi Apr 24 '17 at 19:57

score 0 · Answer 2 · answered Apr 23 '17 at 19:54

0

In your ajax method, the success property is wrong
It is written as suceess, when it was supposed to be success

Also, to avoid refreshing the page, insert return false; at the end of the function submitForm

answered Apr 23 '17 at 19:54

Christian Valentin

502
2
11

1

This doesn't address the issue at all: The data isn't being committed. – Apr 23 '17 at 19:56
even after doing those, nothing is happening and no tables are getting created in the database – Aayushi Apr 23 '17 at 19:57

Ajax call to a php file is not working

2 Answers2