表单不使用Ajax,直接发布到PHP

时间:2016-02-15 10:02:06

标签: javascript php jquery ajax

我使用ajax将表单发布到php文件但由于某些原因我无法弄清楚,它不是使用ajax而是直接发布到php。

我的表格:

  <form id="editform" name="editform" action="ajaxeditform.php" method="post">
      <input type="hidden" name="aid" id="aid" readonly class="form-control col-md-7 col-xs-12"/>
      <input type="text" name="number" id="tailnumber" readonly class="form-control col-md-7 col-xs-12"/>
      <input type="text" name="type" id="type" class="form-control col-md-7 col-xs-12" placeholder="e.g. C172" />
      <input type="text" name="colormarkings" id="colormarkings" class="form-control col-md-7 col-xs-12" />
      <button type="submit" class="btn btn-success">Update info</button></div>
  </form>

我的jquery:

 $('#editform').on('submit', function(e){
    e.preventDefault();

    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        dataType: 'json',
        cache: false,
    })
    .success(function(response) {
        // remove all errors
        $('input').removeClass('error').next('.errormessage').html('');

        if(!response.errors && response.result) {

                new PNotify({
                            title: 'Success',
                            text: 'Info updated successfully',
                            type: 'success'
                        });

        } else {

            $.each(response.errors, function( index, value) {
                // add error classes
                $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
            });

        }
    });
});

1 个答案:

答案 0 :(得分:1)

的变化: -

Form opening tag is not proper,如下所示: -

<form id="editform" name="editform" action="ajaxeditform.php" method="post">

尝试更改您的jquery代码第一行,如下所示: -

$('Form#editform').on('submit', function(e){$('.btn-success').click(function(e){

还添加jquery库(检查是否添加了它?)。例如,在jQuery代码之前添加此代码: -

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

在您的代码中添加$(document).ready(function(){。如下所示: -

$(document).ready(function(e){
  ........ //your code
});