jquery/php form in modal window

本文关键字：modal window in form php jquery | 更新日期: 2024-01-22

我在模态窗口中有一个窗体。当我通过ajax提交表单时，我没有收到成功消息。我的目标是在提交表单后，在模态中查看php文件中创建的消息

<p><a class='activate_modal' name='modal_window' href='#'>Sign Up</a></p>   
<div id='mask' class='close_modal'></div>
<div id='modal_window' class='modal_window'>
    <form name="field" method="post" id="form">
        <label for="username">Username:</label><br>
        <input name="username" id="username" type="text"/><span id="gif"><span>   
        <span id="user_error"></span><br><br>
        <label for="email">Email:</label><br>
        <input name="email" id="email" type="text"/><span id="gif3"></span>    
        <span id="email_error"></span><br><br>
        <input name="submit" type="submit" value="Register" id="submit"/>
    </form>
</div>

modal.js

    $('.activate_modal').click(function(){
        var modal_id = $(this).attr('name');
        show_modal(modal_id);              
    });
    $('.close_modal').click(function(){
        close_modal();            
    });
$(document).keydown(function(e){
  if (e.keyCode == 27){  
  close_modal();
  }
    });

function close_modal(){       
    $('#mask').fadeOut(500);        
    $('.modal_window').fadeOut(500);    
}
function show_modal(modal_id){
    $('#mask').css({ 'display' : 'block', opacity : 0});
    $('#mask').fadeTo(500,0.7);
    $('#'+modal_id).fadeIn(500);
}

用于注册用户的test.js

$(function() {
    $('#form').submit(function() {
    $.ajax({
       type: "POST",
       url: "test.php",
       data: $("#form").serialize(),
           success: function(data) {
       $('#form').replaceWith(data);
       }
           });
    }); 
});

和PHP文件

<?php
$mysqli = new mysqli('127.0.0.1', 'root', '', 'project');
    $username = $_POST['username'];
    $email = $_POST['email'];
$mysqli->query("INSERT INTO `project`.`registration` (`username`,`email`) VALUES ('$username','$email')");
$result = $mysqli->affected_rows;
if($result > 0) {
    echo 'Welcome';
} else {
    echo 'ERROR!';
}
?>

尝试将AJAX调用的返回代码放入

$('#modal_window')

而不是形式

$('#form')

BTW：为什么不使用jQuery的POST或GET方法呢？它们非常容易使用。。。

试试这样的方法。首先使用jquery编写ajax代码。

<script type="text/javascript">
function submitForm()
{
    var str = jQuery( "form" ).serialize();
       jQuery.ajax({
        type: "POST", 
        url:  '<?php echo BaseUrl()."myurl/"; ?>',
        data:  str,
        format: "json",
        success: function(data) {
            var obj =  JSON.parse(data);
            if( obj[0] === 'error')
            {
                 jQuery("#error").html(obj[1]);
             }else{
                    jQuery("#success").html(obj[1]);
                     setTimeout(function () {
                     jQuery.fancybox.close();
                 }, 2500);
                    }
        } 
      });    
}
</script>

而在php中，编写错误和成功消息的代码如下：

  if(//condition true){
                    echo json_encode(array("success"," successfully Done.."));
                }else{
                    echo json_encode(array("error","Some  error.."));
                }

希望这能帮助你。