douke6424
2015-11-14 07:31
浏览 67
已采纳

通过ajax将表单变量从load <div>传递到同一个<div>中?

I'm trying to pass the variables from the form which was loaded from jquery clicked. Into the same div. I tried test it but none of them works. Here's my script :

Javascript

//login
function login(){
    $('#prop_form').load('inc/prop_form_login.php');
    $('.axn_btn').hide();
}

$(document).ready(function(){
    $("form").on('click', '#submit', function(e){
       e.preventDefault();
       var jsURL = $(this).serialize()+"&lang=$_GET[lang]";
       submit(jsURL);
    });
});

function submit(jsURL){
    $.ajax({
        url:'login_chk.php',
            type :'POST',
            success: function(data){
                $('#prop_form').html(data);
            }
    });
}

HTML

<div id="prop_form">
<div class="axn_btn">
<a onClick="login()">login</a>
</div>
</div>

login_chk.php

<?
session_start();
error_reporting(E_ALL);
print_r($_POST[data]);exit();//for testing purpose
.
.
.
?>

I expect the login form data to display in the #prop_form. But the page refresh with return data from login_chk.php.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dongxun3424 2015-11-14 09:30
    已采纳

    Finally, the script is working now. Thank you very much for @khairul.ikhwan and @Hakan Kose. You guys are great!

    Here is the script:

    //login 
    function login(){ 
        $('#prop_form').load('inc/prop_form_login.php', function(){
            $("#login_form").on('click', '#submit', function(e){ 
                e.preventDefault(); 
                var jsURL = $('form').serialize()+"&lang=<?=$_GET[lang]?>"; 
                submit(jsURL); 
            });
        }); 
        $('.axn_btn').hide(); 
    } 
    
    function submit(jsURL){
        $.ajax({
            url:'login_chk.php',
                type :'POST',
                data: {data: jsURL},
                success: function(data){
                    $('#prop_form').html(data);
                }
        });
    }
    

    I can't accept both of your codes in the same post. But please know that you guys are part of the solution.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • douche3791 2015-11-14 08:41

    You load the form on click but you are binding the onclick event to the submit button on document ready. The form is still not loaded yet. Perhaps you can try move belows code to the callback after you load the login form in the function login()

    Edit : use belows code see if it work.

    //login 
    function login(){ 
        $('#prop_form').load('inc/prop_form_login.php', function(){
            $("form").on('click', '#submit', function(e){ 
                e.preventDefault(); 
                var jsURL = $(this).serialize()+"&lang=$_GET[lang]"; 
                submit(jsURL); 
            });
        }); 
        $('.axn_btn').hide(); 
    } 
    
    function submit(jsURL){ 
        $.ajax({ 
            url:'login_chk.php', 
            type :'POST', 
            success: function(data){ 
                $('#prop_form').html(data); 
            } 
        }); 
    }
    
    评论
    解决 无用
    打赏 举报
  • douli8428 2015-11-14 08:43

    EDIT This must do the job;

    function login(){
        $('#prop_form').load('inc/prop_form_login.php');
        $('.axn_btn').hide();
    }
    
    $(document).ready(function(){
        $("form").on('click', '#submit', function(e){
           e.preventDefault();
           var getLang = <?php echo "'" . $_GET['lang'] . "'"?>;
           var jsURL = $(this).serialize()+"&lang=" + getLang;
           submit(jsURL);
        });
    });
    function submit(jsURL){
        $.ajax({
            url:'login_chk.php',
                type :'POST',
                data: {data: jsURL},
                success: function(data){
                    $('#prop_form').html(data);
                }
        });
    }
    

    Than for example in your login_chk.php

    <?php 
        // This echo will be showed in you success function as data
        echo $_POST["data"];
    ?>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题