Question

I have a jsfiddle http://jsfiddle.net/4Pc4B/10/. In the jsfiddle, type in a question in the textarea and then click on the “Add Question” button. This adds the question in a new row underneath but the problem is that when this happens, the textarea at the top still displays the question. I want it so that if the user has clicked on the “Add Question” button AND if the question is added in a new row, then the textarea on top should go blank. How can this work?

Below is code to make the textarea blank:

var area = document.getElementsByTagName('textarea');
for (var i = area.length-1; i>=0; i--) {
if ('questionText'===area[i].name) area[i].value = "";
}

Where do I display this code?

Thanks

Answer 1

Simply add:

$('#questionTextArea').val('');

Below the line:

$question.append($questionText);

JS Fiddle demo.

---

Edited in response to question from OP, user1182476, in comments, below:

By the way, If I have a radio button which is selected but after adding a table row I want all the radio buttons to be unchecked, how do I do this?

To un-check all radio buttons:

$('input:radio:checked').prop('checked',false);

It seems that you, essentially, want to reset the form back to its default state, though, and to do that you might find it easier to simply use:

$('#enter')[0].reset();

JS Fiddle demo.

Or:

document.getElementById('enter').reset();

JS Fiddle demo.

Inserting either of these lines, as shown in the linked demos, instead of the line supplied in the first version of this answer (so after the same line as before: $question.append($questionText);).

The reason for using [0] in the first example, and document.getElementById() in the latter, is because the reset() method works on the plain JavaScript DOM node, not the jQuery element.