如何在javascript或jquery中更改标记名称?

时间:2016-06-06 12:35:48

标签: javascript jquery html

我有ajax表格。当用户提交表单时,javascript必须等待响应。所以我想将button更改为p标记。有人知道如何在javascript或jquery中更改标签名称吗?

<form action="addcomment.php"  class="ajaxform" >
     <input type="text" placeholder="Comment" id="comment" >
     <button>Add Comment</button>
</form>

5 个答案:

答案 0 :(得分:1)

您应该考虑让所有标记都已创建,而不是“更改”标记,然后更改其可见性。

HTML:

<form action="addcomment.php"  class="ajaxform" >
     <input type="text" placeholder="Comment" id="comment" >
     <button>Add Comment</button>
     <p style="display: none;">Loading ...</p>
</form>

JS:

$( document ).ready(function() {
    $( "button" ).click(function() {
        // hide <button> and show <p>
        $("button").hide();
        $("p").show();
    });
});

答案 1 :(得分:1)

使用.replaceWith

$( "button" ).one( "click",function() {

    $(this).replaceWith('<p>' + $(this).html() +'</p>')

})

$( "button" ).one( "click",function() {

    $(this).replaceWith('<p>' + $(this).html() +'</p>')

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form action="addcomment.php"  class="ajaxform" >
     <input type="text" placeholder="Comment" id="comment" >
     <button>Add Comment</button>
</form>

答案 2 :(得分:0)

将文本段落附加到按钮的父级,然后删除按钮本身。

$("button").click(function() {
  $(this).parent().append($("<p>Loading Text</p>"));
  $(this).remove();
  $.ajax({ ... });
});

答案 3 :(得分:0)

只需禁用按钮以防止在ajax进程中多次单击:

$( "button" ).click(function() {
  var obj = $(this);
  obj.attr("disabled","disabled");
  $.ajax({ 
         ... 
       success: function() {
         obj.removeAttr("disabled");
       }
  });
});

答案 4 :(得分:0)

// Add your javascript here
$(function() {
  var form = $(".ajaxform");
  form.submit(function(event) {

    form.hide(); //hide the form 
    $("#loadingIndicator").text("loading text").show();

    $.ajax({
      type: "POST",
      url: "addcomment.php",
      data: $(".ajaxform").serialize(), // serializes the form's elements.
      success: function(data) {
        form.show()
        $("#loadingIndicator").hide();
      },
      error: function (error) {
            form.show();
       }
    });

    event.preventDefault(); // avoid to execute the actual submit of the form.

  });


});
#loadingIndicator{
  display:none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <p id="loadingIndicator"></p>
<form action="addcomment.php"  class="ajaxform" >
     <input type="text" placeholder="Comment" id="comment" >
     <button>Add Comment</button>
</form>