在ajaxSubmit之后用“结果”替换表单

时间:2016-01-16 01:01:59

标签: javascript php jquery forms

我正在尝试使用POST响应的结果动态替换表单。对于这个例子,我正在结束一个公告,并希望"关闭公告"提交按钮/表单将被简单的"公告已关闭"它的成功。 POST工作正常,我可以按预期返回结果,而不是在特定的div中。

我认为$ post-> ID将是一个唯一ID,因此我可以删除该div,但我不知道如何将其传递给ajaxSubmit函数。

<div id="<?php echo $post->ID;?>">
  <form action="" method="post" id="openclose">
    <input type="hidden" name="id" value="<?php echo $post->ID;?>"/>
    <input type="hidden" name="action" value="ocVehicleWanted"/>
    <input type="hidden" name="oc" value="close">
    <button type="submit" style="padding:1px;background-color:#c41f1f;" >Close Announcement</button>
  </form>
</div>

这是我目前的jQuery,唯一不起作用的部分是用于替换$ post-&gt; ID div中的表单数据的.html(数据)。此当前代码替换为页面输出的所有表单div。我每页有25个。

jQuery('#openclose').submit(ajaxSubmit);

function ajaxSubmit(){

var vehicledata = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: vehicledata,
success:function(data){
jQuery("#openclose").html(data);
}
});

return false;
}

2 个答案:

答案 0 :(得分:0)

将ID更改为类,因为ID在页面中必须是唯一的

您可以通过以this开头,使用parent()或使用replaceWith()以及其他几种方式,以多种方式替换整个表单

function ajaxSubmit() {
    var $form = jQuery(this);// cache form as jQuery object
    var vehicledata = $form.serialize();
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: vehicledata,
        success: function(data) {
            // replace form parent html
            $form.parent().html(data);
            // or replaace form element
            $form.replaceWith(html);
        }
    });
}

答案 1 :(得分:0)

  

您的文档中不得有多个value属性具有相同的class

您可以使用.bind()选择器。

this将在函数表达式中提供jQuery('.openclose').submit(ajaxSubmit); function ajaxSubmit() { var vehicledata = jQuery(this).serialize(); jQuery.ajax({ type: "POST", url: "/wp-admin/admin-ajax.php", data: vehicledata, success: function(data) { jQuery(this).html(data); }.bind(this) }); return false; } 上下文,该函数将在调用函数后使用。

试试这个:

<div id="<?php echo $post->ID;?>">
  <form action="" method="post" class="openclose">
    <input type="hidden" name="id" value="<?php echo $post->ID;?>" />
    <input type="hidden" name="action" value="ocVehicleWanted" />
    <input type="hidden" name="oc" value="close">
    <button type="submit" style="padding:1px;background-color:#c41f1f;">Close Announcement</button>
  </form>
</div>
\s*