Calling PHP file using AJAX

Question

I'm trying to call a php file using the $.ajax() function in jQuery however it is not working. The following code is run when a button on the page is clicked:

if($error === false) {
        alert($error);
        $.ajax({
            url: '/new-user.php',
            type: 'POST',
            data: {
                name: $('#name').val(),
                email: $('#name').val(),
                password: $('#name').val()
            }
        });

This is my form:

<form onClick="return false;" class="reg-form">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">First Name</label>
                <input type="text" id="name" class="form-control" autofocus="autofocus">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="text" id="email" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="password-confirm">Confirm Password</label>
                <input type="password" id="password-confirm" class="form-control">
            </div>
        </div>
    </div>

    <button class="btn trans reg-btn">Sign Up</button>

    <div class="reg-msg">
        <span id="password-error-msg">Passwords do not match.</span>
    </div>

</form>

I have set the form's onClick to return false so that the form does not reload the page when submitted so that the jQuery can run.

Any help is greatly appreciated.

What does 'not working' mean? Is the php script not being called? — GrandmasterB
– GrandmasterB, Commented Aug 30, 2013 at 17:59
Definitely onClick="return false;" should be removed. It's useless — u_mulder
– u_mulder, Commented Aug 30, 2013 at 17:59
Other than you're only sending the name entry in your php, what errors or issues are you having? What do you expect to happen, and what actually happens? — aynber
– aynber, Commented Aug 30, 2013 at 17:59
if your button that contains the click handler is inside your form, the onClick return false line could be conflicting — A.O.
– A.O., Commented Aug 30, 2013 at 18:00
Wanting it to run the php file, if I remove the onlick return false, how do I stop the form from reloading the page? — stu177
– stu177, Commented Aug 30, 2013 at 18:00

A.O. · Accepted Answer · 2015-09-18 16:53:21Z

19

The main reason why people use forms is so that you can define an

action (in your case a php script),

method (GET or POST) and a

submit button that captures all the information in the form and automatically sends it to the server.

This is nice when you have 20-30 inputs or you are handling multiple file inputs. In your case you are handling the data retrieval in your ajax function, you have no submit button, action or method defined so you could make things a lot easier by not using a form at all....

    $.ajax({
        url: '/new-user.php',
        type: 'POST',
        dataType: "json",
        data: {
            name: $('#name').val(),
            email: $('#email').val(),
            password: $('#password').val()
        }
    }).done(function(data){
            alert(JSON.stringify(data));
    });

I've left out the formatting divs for simplicity...

<input type="text" id="name" class="form-control" autofocus="autofocus">
<input type="text" id="email" class="form-control">
<input type="password" id="password" class="form-control">

The above code will grab the data in your inputs, send it to the php script and output the data that is sent back from your php script in the alert.

And most importantly your page will NOT refresh!

edited Sep 18, 2015 at 16:53

answered Aug 30, 2013 at 18:18

A.O.

3,7636 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sebastien Over a year ago

Good point there @A.O. why use a form that dont do form stuff!!

stu177 Over a year ago

It seems now I'm having a problem just trying any sort of AJAX request. For example: $('.reg-btn').click(function(){ $.post('new-user.php'); }); Does nothing at all. Should this not simply run 'new-user.php'?

Robert Sinclair Over a year ago

calls the php file no problem, but no return is displayed.. strange.

evan.stoddard · Accepted Answer · 2013-08-30 18:41:03Z

I actually serialize my form data because it's less code. Plus you can use it with multiple forms. For instance you can have a hidden input which holds a task number and have one php script to delegate tasks. Or you can have another variable for the submit function to pass a your script's location. Therefore I submit my forms like the following.

HTML:

<form onsubmit="submitForm('#myForm'); return false;" id='myForm'>
     <input type='text' name='name'/>
     <input type='text' name='email'/>
     <input type='text' name='password'/>
     <input type='submit'/>
</form>

Javascript:

function submitForm(formId){
     var formData = $.(formId).serialize();

     $.ajax({
        url: '/script.php',
        type: 'POST',
        data: formData,
        success:function(response){
           alert(response);
       }
   });

}

Vidz · Accepted Answer · 2015-08-18 07:16:12Z

1

Please try the following code:

$(".reg-btn").click(function(e)
{
    e.preventDefault();
    $.ajax({
        url: '/new-user.php',
        type: 'POST',
        data: {
            name: $('#name').val(),
            email: $('#name').val(),
            password: $('#name').val()
        },
        success:function(response){
           //Do something here...
        }
   });
});

Please note that you don't have a submit button on your form. So return false is of no use..

edited Aug 18, 2015 at 7:16

Vidz

6271 gold badge8 silver badges16 bronze badges

answered Aug 30, 2013 at 18:04

vinayjags

671 silver badge8 bronze badges

2 Comments

stu177 Over a year ago

All that happens is that the page refreshes.

vinayjags Over a year ago

try adding the below code: $(".reg-btn").click(function(e){ e. preventDefault(); ...... Edited my code to reflect the same

Collectives™ on Stack Overflow

Calling PHP file using AJAX

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related