Submit Ajax Form via php without document.ready

Question

I am submitting a number of forms on my page via php using Ajax. The code works great in forms preloaded with the page. However, I need to submit some dynamic forms that don't load with the page, they are called via other javascript functions. Please, I need someone to help me review the code for use for forms that don't load with the page. Also the 'failure' condition is not working. The code is below:

<script type="text/javascript">

 feedbar = document.getElementById("feedbar");

jQuery(document).ready(function() { 

$('#addressform').on('submit', function (e) {

      $.ajax({
        type: 'post',
        url: 'data/process.php',
        data: $('#addressform').serialize(),
        success: function () {
            feedbar.innerHTML='<div class="text-success">New Addressed Saved Successfully</div>';
        },
        failure: function () {
            feedbar.innerHTML='<div class="text-danger">Error Saving New Address</div>';
        }
      });
      e.preventDefault();
    });

});

Thanks.

Try with removing jQuery(document).ready and post jquery code after the div — Sherin Jose
– Sherin Jose, Commented Feb 20, 2014 at 11:31
try like this: $(document).on('submit', '#addressform',function (e) { — Awlad Liton
– Awlad Liton, Commented Feb 20, 2014 at 11:31
Used @Jai : $(document).on('submit', 'form', function (e) { One more thing: I need to echo feedback from the php scripts processing these forms as different forms will require different feedback. Can someone pls help me with echoing feedback from php script to 'success' and 'error' function in the ajax? Thanks. — user1015309
– user1015309, Commented Feb 20, 2014 at 13:23

Awlad Liton · Accepted Answer · 2014-02-20 11:41:54Z

1

You need to bind event by existing html (e.g body). Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()

see api: https://api.jquery.com/on/

Try like this:

$("body").on('submit', '#addressform',function (e) {

      $.ajax({
        type: 'post',
        url: 'data/process.php',
        data: $('#addressform').serialize(),
        success: function () {
            feedbar.innerHTML='<div class="text-success">New Addressed Saved Successfully</div>';
        },
        failure: function () {
            feedbar.innerHTML='<div class="text-danger">Error Saving New Address</div>';
        }
      });
      e.preventDefault();
    });

});

edited Feb 20, 2014 at 11:41

answered Feb 20, 2014 at 11:32

Awlad Liton

9,3513 gold badges30 silver badges53 bronze badges

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

1 Comment

Quentin Over a year ago

This could be a decent answer if you explained what you had changed and why instead of just providing code to copy/paste without understanding.

Jai · Accepted Answer · 2014-02-21 06:41:43Z

0

you can delegate to document:

$(document).on('submit', '#addressform', function (e) {
    $.ajax({
      type: 'post',
      url: 'data/process.php',
      data: $(this).serialize(), // <----serialize with "this"
      success: function () {
          feedbar.innerHTML='<div class="text-success">New Addressed Saved Successfully</div>';
      },
      error: function () { //<----use error function instead
          feedbar.innerHTML='<div class="text-danger">Error Saving New Address</div>';
      }
    });
    e.preventDefault();
  });
});

As you have posted this line as below:

I need to submit some dynamic forms that don't load with the page

What i understand with this line is you want a common submit function for all forms which are generated dynamically, then you can do this:

$(document).on('submit', 'form', function (e) {
    $.ajax({
      type: 'post',
      url: 'data/process.php',
      data: $(this).serialize(), // <----"this" is current form context
      success: function () {
          //some stuff
      },
      error: function () { //<----use error function instead
          //some stuff          
      }
    });
    e.preventDefault();
  });
});

For your last comment:

You can try to get the text in ajax response like this:

success: function (data) {
   feedbar.innerHTML='<div class="text-success">'+ data +'</div>';
},
error: function (xhr) { //<----use error function instead
   feedbar.innerHTML='<div class="text-danger">' + xhr.responseText + '</div>';
}

if Success:

here in success function you get the response in data which is the arguement in success function, this holds the response which it requested to the serverside.

if Error:

Same way if something goes wrong at the serverside or any kind of execption has been occured then xhr which is the arguement of error function holds the responseText.

And finally i suggest you that you can place your response in feedbar selector using jQuery this way:

var $feedbar = $('#feedbar');

so in success function:

$feedbar.html('<div class="text-success">'+ data +'</div>');

so in error function:

$feedbar.html('<div class="text-success">'+ xhr.responseText +'</div>');

edited Feb 21, 2014 at 6:41

answered Feb 20, 2014 at 11:39

Jai

74.8k12 gold badges77 silver badges104 bronze badges

4 Comments

user1015309 Over a year ago

Thanks. I love your method as I dont have to have multiple functions for multiple forms. However, I used it and I'm getting back the success function but the php script is not processed.

Jai Over a year ago

where is your php script? you should also add it in your question post.

user1015309 Over a year ago

It's all good now. Just one more thing: I need o get different feedback from different forms using this same script. Could you please help me with a way to echo back feedback from my php script that process this pages- That way I can have dynamic feedback like- User Registered Successfully or User Updated Successfully, depending on which form is being processed. Thank you.

Jai Over a year ago

You can get the response in success function returned from your serverside. see the updates.

Collectives™ on Stack Overflow

Submit Ajax Form via php without document.ready

2 Answers 2

1 Comment

For your last comment:

if Success:

if Error:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

For your last comment:

if Success:

if Error:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related