我有ajax表格。当用户提交表单时,javascript必须等待响应。所以我想将button
更改为p
标记。有人知道如何在javascript或jquery中更改标签名称吗?
<form action="addcomment.php" class="ajaxform" >
<input type="text" placeholder="Comment" id="comment" >
<button>Add Comment</button>
</form>
答案 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>