Form Submission through Ajax and PHP

Question

I have one html page as below and a PHP code after that.I just use this for testing of form submission through AJAX.

HTML PAGE:

$('#but1').click(function(){
    $('#frm1').submit(function(){
       var dataString = $(this).serializeArray();
       var formURL = $(this).attr("action");
       alert(dataString);
          $.ajax({  
            type: "POST",
            data: dataString,
            url: formURL,
            success: function(response) {  
                $('#pid').val(response);
                      }         
                });
             });
           });

 <form id="frm1" action="test1.php">
    <input type="text" id="test" name="test" />
</form>

<button id="but1">Click</button>
<p id="pid"></p>

TEST1.PHP

echo $_POST['test'];

The above code is not working at all and i am not getting any response from AJAX call. I am new to AJAX and PHP. Please help me in this.

Answer 1

Try the following instead:

$('#but1').click(function(e){
    e.preventDefault();
    $('#frm1').submit();
});    
$('#frm1').submit(function(e){
    e.preventDefault();
    var dataString = $(this).serializeArray();
    var formURL = $(this).attr("action");
    alert(dataString);
    $.ajax({  
        type: "POST",
        data: dataString,
        url: formURL,
        success: function(response) {  
            $('#pid').val(response);
        }       
    });
});

You need to separate your click and submit event callbacks and only call the submit function from the click callback, then set the callback on the form submit... also you need to prevent the default action from clicking the submit button

Answer 2

Currently, when you click the button, you bind a submit handler to the form. You never submit the form, so that handler never fires.

Paragraphs do not have values. Only form controls do.

1. Move the button inside the form. Clicking it will then submit the form
2. Remove the click handler from the button. Bind the submit handler when the form exists, not when the button is clicked.
3. Change $('#pid').val(response); to $('#pid').text(response);

Answer 3

Best thing to do is handle the submit event of the form, rather than the click event of the button. This massively improves the accessibility of the form by keeping the default behaviour of enter key to submit the form when a field is focussed. Change your button to traditional submit like so

<form id="frm1" action="test1.php">
    <input type="text" id="test" name="test" />
    <button type="submit" id="but1">Click</button>
</form>

Then change the JS to handle submit and return false to stop default browser action.

$(document).on('submit', '#frm1', function(){
   var dataString = $(this).serializeArray();
   var formURL = $(this).attr("action");
   alert(dataString);
   $.ajax({  
     type: "POST",
     data: dataString,
     url: formURL,
     success: function(response) {  
         $('#pid').val(response);
     }
   });
 return false;
 });

Answer 4

If you keep your form the same, you would just need to listen to a $('#but1').click() .

$('#but1').click(function(e) {
    e.preventDefault();
    var $form = $('#frm1');

    var dataString = $form.serializeArray();
    var formURL = $form.attr("action");

    $.ajax({
        type: "POST",
        data: dataString,
        url: formURL,
        success: function(response) {  
            $('#pid').val(response);
        }       
    });
});

However, I would recommend changing your form to act more like a form. This way, if a user doesn't have JavaScript, the form will still be submitting data to test1.php .

<form id="frm1" action="test1.php">
    <input type="text" id="test" name="test" />
    <input type="submit" value="Click" />
</form>

Which would change your jQuery to:

$('#frm1').submit(function(e) {
    e.preventDefault();
    var $form = $(this);

    // AJAX, etc.
});

And a basic JSFiddle to show both examples.

Answer 5

ajax is not calling in your code. You have missed click and submit event. If you want to submit ajax call by clicking button then
Try this:

 $('#but1').click(function(e){
            var dataString = $("#frm1").serializeArray();
            var formURL = $("frm1").attr("action");
            alert(dataString);
            $.ajax({
                type: "POST",
                data: dataString,
                url: formURL,
                success: function(response) {
                    $('#pid').val(response);
                }
            });
    });
});