Question

我正在尝试使用ajax在bootstrap模式中提交表单。我的表单已成功提交，但ajax中的成功语句未执行。该页面被重定向到一个空白页面{{msg“：”ok“}。我从控制器和视图粘贴代码。请帮忙。

控制器

dist/

查看

dist/autoNumeric.min.js

HTML

$update_profile_details = $this->userp_m->edit_profile_m($uname,$uemail,$data1,$new_email);

            if($update_profile_details == true)
            {
                $status['msg'] = 'ok';
            }
            else
            {
                $status['msg'] = 'err';
            }

            echo json_encode ($status);

Answer 1

您必须编写如下所示的jquery代码而不是函数。

删除 function submitContactForm(e){}

添加 $(document).on('submit', '#myform', function(e) { })

$(document).on('submit', '#myform', function(e) {
    e.preventDefault();
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    if (name.trim() == '') {
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    } else if (email.trim() == '') {
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    } else if (email.trim() != '' && !reg.test(email)) {
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    } else {
        $('.submitBtn').prop("disabled", true);
        $('.modal-body').css('opacity', '.5');
        var myFormData = new FormData();
        e.preventDefault();
        var inputs = $('#myForm input[type="file"]');
        $.each(inputs, function(obj, v) {
            var file = v.files[0];
            var filename = $(v).attr("data-filename");
            var name = $(v).attr("name");
            myFormData.append(name, file, filename);
        });
        var inputs = $('#myForm input[type="text"],input[type="email"]');
        $.each(inputs, function(obj, v) {
            var name = $(v).attr("name");
            var value = $(v).val();
            myFormData.append(name, value);
        });
        var xhr = new XMLHttpRequest;
        xhr.open('POST', '<?php echo base_url(); ?>index.php/User/user_index_c/edit_profile_c/', true);
        xhr.send(myFormData);
        xhr.onload = function() {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                    $('#inputName').val('');
                    $('#inputEmail').val('');
                    $('.statusMsg').html('<span style="color:green;">Changes have been saved successfully.</p>');
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                }
            }
        };
    }
});

如果不起作用，请告诉我。

Answer 2

试试这个：在你的file.js中：

$(document).ready(function () {
    $('#submit').click(function () {
         var name= $("#inputName").val();
         var mail = $("#inputEmail").val();
         var img = $("#image_file").val();
         $.post("User/user_index_c/edit_profile_c", {send_name:name,send_mail:mail, send_igm:img},
         function (data) {
             if (data.trim() != "ok") {
                alert('error');
              }
              else{
                  //action for "success" exemple: alert("send with success!"); and insert a code for clean fields
              }
          });
      });
  });

在您的控制器方法中：

$uname = $this->input->post("send_name");
$uemail = $this->input->post("send_mail");
$new_email = $this->input->post("send_igm");

$update_profile_details =    $this->userp_m->edit_profile_m($uname,$uemail,$data1,$new_email);

if($update_profile_details == true){
    echo 'ok';
        }
        else
        {
            echo 'err';
        }

我希望我有所帮助

使用ajax和codeigniter在bootstrap模式中提交表单而不更改页面

2 个答案: