问题
--UPDATED--
I want to empty message in a textarea in callback.
Can anyone tell me how to empty it please?
I tried $("#message").empty(), but it does not empty it.
Thanks in advance.
<form method="post" id="form" action="index.php/admin/messages/insertShoutBox">
<input name="user" id="nick" value="admin" type="hidden">
<p class="messagelabel"><label class="messagelabel">Message</label>
<textarea id="message" name="message" rows="2" cols="40"></textarea>
<input disabled="disabled" id="send" value="Sending..." type="submit"></p>
</form>
Full code
$("#form").submit(function(){
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
//we deactivate submit button while sending
$("#send").attr({ disabled:true, value:"Sending..." });
$("#send").blur();
//send the post to shoutbox.php
$.ajax({
type: "POST",
url: "index.php/admin/dashboard/insertShoutBox",
data: $('#form').serialize(),
complete: function(data){
messageList.html(data.responseText);
updateShoutbox();
$('#message').val('').empty();
//reactivate the send button
$("#send").attr({ disabled:false, value:"SUBMIT !" });
}
});
}
else alert("Please fill all fields!");
//we prevent the refresh of the page after submitting the form
return false;
});
回答1:
$('#message').val('');
Explanation (from @BalusC):
textarea is an input element with a value. You actually want to "empty" the value. So as for every other input element (input, select, textarea) you need to use element.val('');.
Also see docs
回答2:
$('#message').html('');
You can use this method too. Because everything between the open and close tag of textarea is html code.
回答3:
.html(''). was the only method that solved it for me.
回答4:
for set empty all input such textarea select and input run this code:
$('#message').val('').change();
回答5:
//since you are using AJAX, I believe that you can't rely in here with the submit //empty the action, you can include charset utf-8 as jQuery POST method uses that as well I think
HTML
<input name="user" id="nick" value="admin" type="hidden">
<p class="messagelabel"><label class="messagelabel">Message</label>
<textarea id="message" name="message" rows="2" cols="40"></textarea>
<input disabled="disabled" id="send" value="Sending..." type="submit">
JAVACRIPT
//reset the form to it's original state
$.fn.reset = function () {
$(this).each (function() {
this.reset();
});
//any logic that you want to add besides the regular javascript reset
/*$("select#select2").multiselect('refresh');
$("select").multiselect('destroy');
redo();
*/
}
//start of jquery based function
jQuery(function($)
{
//useful variable definitions
var page_action = 'index.php/admin/messages/insertShoutBox';
var the_form_click=$("#form input[type='submit']");
//useful in case that we want to make reference to it and update
var just_the_form=$('#form');
//bind to the events instead of the submit action
the_form_click.on('click keypress', function(event){
//original code, removed the submit event handler.. //$("#form").submit(function(){
if(checkForm()){
//var nick = inputUser.attr("value");
//var message = inputMessage.attr("value");
//seems more adequate for your form, not tested
var nick = $('#form input[type="text"]:first').attr('value');
var message = $('#form input[type="textarea"]').attr('value');
//we deactivate submit button while sending
//$("#send").attr({ disabled:true, value:"Sending..." });
//This is more convenient here, we remove the attribute disabled for the submit button and we change it's value
the_form_click.removeAttr('disabled')
//.val("Sending...");
//not sure why this is here so lonely, when it's the same element.. instead trigger it to avoid any issues later
.val("Sending...").trigger('blur');
//$("#send").blur();
//send the post to shoutbox.php
$.ajax({
type: "POST",
//see you were calling it at the form, on submit, but it's here where you update the url
//url: "index.php/admin/dashboard/insertShoutBox",
url: page_action,
//data: $('#form').serialize(),
//Serialize the form data
data: just_the_form.serialize(),
// complete: function(data){
//on complete we should just instead use console log, but I;m using alert to test
complete: function(data){
alert('Hurray on Complete triggered with AJAX here');
},
success: function(data){
messageList.html(data.responseText);
updateShoutbox();
var timeset='750';
setTimeout(" just_the_form.reset(); ",timeset);
//reset the form once again, the send button will return to disable false, and value will be submit
//$('#message').val('').empty();
//maybe you want to reset the form instead????
//reactivate the send button
//$("#send").attr({ disabled:false, value:"SUBMIT !" });
}
});
}
else alert("Please fill all fields!");
//we prevent the refresh of the page after submitting the form
//return false;
//we prevented it by removing the action at the form and adding return false there instead
event.preventDefault();
}); //end of function
}); //end jQuery function
</script>
回答6:
A comment to jarijira
Well I have had many issues with .html and .empty() methods for inputs o. If the id represents an input and not another type of html selector like
or use the .val() function to manipulate.
For example: this is the proper way to manipulate input values
<textarea class="form-control" id="someInput"></textarea>
$(document).ready(function () {
var newVal='test'
$('#someInput').val('') //clear input value
$('#someInput').val(newVal) //override w/ the new value
$('#someInput').val('test2)
newVal= $('#someInput').val(newVal) //get input value
}
For improper, but sometimes works For example: this is the proper way to manipulate input values
<textarea class="form-control" id="someInput"></textarea>
$(document).ready(function () {
var newVal='test'
$('#someInput').html('') //clear input value
$('#someInput').empty() //clear html inside of the id
$('#someInput').html(newVal) //override the html inside of text area w/ string could be '<div>test3</div>
really overriding with a string manipulates the value, but this is not the best practice as you do not put things besides strings or values inside of an input.
newVal= $('#someInput').val(newVal) //get input value
}
An issue that I had was I was using the $getJson method and I was indeed able to use .html calls to manipulate my inputs. However, whenever I had an error or fail on the getJSON I could no longer change my inputs using the .clear and .html calls. I could still return the .val(). After some experimentation and research I discovered that you should only use the .val() function to make changes to input fields.
来源：https://stackoverflow.com/questions/2078146/how-to-empty-the-message-in-a-text-area-with-jquery