Question

我在Jquery中动态创建表单，这个表单需要使用AJAX提交。我可能做了一些愚蠢的事情，所以非常感谢你的帮助。

我在点击链接时动态创建表单：

$('.edit_item').click(function(){
    $(this).closest('table').wrap("<form id='update_project' name='update_project' method='POST'>");
    var input_name = $(this).closest('tr').find("td:eq(0)");
    var input_submit = $(this).closest('tr').find("td:eq(1)");
    input_name.html("<input type='text' id='update_name' name='update[]' value='"+input_name.text()+"' />");
    input_submit.html("<input type='submit' value='update' id='update_submit' name='update_submit' />");
});

提交表单时：

$('#update_project').live("submit", function(e){      
    e.preventDefault();        
    $.post('project/update', $(this).serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

不幸的是，页面正在刷新（它不应该），并且没有返回。

谢谢！

Answer 1

我会将提交更改为按钮：

 input_submit.html("<input type='button' value='update' id='update_submit' name='update_submit' />

并且活动现场折旧（http://api.jquery.com/live/）：

$('#update_submit').click(function(e){      
    $.post('project/update', $('#update_project').serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

Answer 2

请原谅我，如果我的答案太基础了 - 你的编码非常先进，但你错过了一些事情。我最好过于迂腐，而不是提供足够的信息来立即解决你的问题。

当用户点击update按钮时，页面会刷新，因为您使用的是.submit方法。如果您不希望表单刷新，请使用Stephen King的上述答案：

将<input>类型更改为type="button"，然后
将("#yourbuttonID").click()事件用于$ .post您的表单数据。

同样如上所述，请注意.live()已被弃用，因此只需切换.on()

试试这个：

$('.edit_item').click(function(){
    $(this).closest('table').wrap("<form id='update_project' name='update_project' method='POST'>");
    var input_name = $(this).closest('tr').find("td:eq(0)");
    var input_submit = $(this).closest('tr').find("td:eq(1)");
    input_name.html("<input type='text' id='update_name' name='update[]' value='"+input_name.text()+"' />");
    input_submit.html("<input type='button' value='update' id='update_submit' name='update_submit' />");
});

$(document).on("click", "#update_submit", function(e){
    $.post('your_processor_filename.php', $(this).closest('form').serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

请注意，您需要使用.closest('form')选择器来序列化表单数据。

我还会使用$(document).on('click'...来确保找到您的注入按钮。

我不熟悉您要将表单数据发送到的文件类型以进行处理，但project/update对我来说不是熟悉的文件类型。确保它是可以处理数据的代码页，例如.PHP文件。看看我上面的例子 - 或者，更好的......

举例来说，创建一个名为“your_processor_filename.php”的.PHP文件（即我在上面输入的代码中引用的文件名）。将它放在同一个文件夹中，在顶部输入以下内容：

//echo 'Got to the PHP side';

echo '<pre>';
print_r($_POST);
echo '</pre>';
die();

这将回显您发送的内容，并允许您查看数据并确认AJAX正在运行。

请注意，您的HTML必须包含ID为complete_msg的div才能看到返回消息，例如：

<div id="complete_msg"></div>

在jQuery中提交动态表单

2 个答案: