Question

我正在尝试从jquery点击加载的表单中传递变量。进入同一个div。我尝试过测试但没有一个可以工作。这是我的剧本：

的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
.
.
.
?>

我希望登录表单数据显示在#prop_form中。但是页面刷新了login_chk.php的返回数据。

Answer 1

EDIT 这必须做好工作;

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);
            }
    });
}

例如，在login_chk.php

中

<?php 
    // This echo will be showed in you success function as data
    echo $_POST["data"];
?>

Answer 2

您在单击时加载表单，但是您将onclick事件绑定到文档就绪的提交按钮。表单仍未加载。在函数login（）

中加载登录表单后，也许可以尝试将下面的代码移到回调中

编辑：使用以下代码查看是否有效。

//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); 
        } 
    }); 
}

Answer 3

最后，脚本现在正在运行。非常感谢@ khairul.ikhwan和@Hakan Kose。你们真棒！

这是脚本：

//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);
            }
    });
}

我无法接受同一帖子中的两个代码。但请知道你们是解决方案的一部分。

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

3 个答案: