CODEWITHSUNDEEP
javascripthtmlbuttonreset
B Johnson
B Johnson

Reputation: 191

Reset Input and Textarea fields without form.reset

For a few reasons, I can't have a <form> tag on the page, but I do have <form> elements like <input>, <textarea>, and <button>. I have a reset button and I need to reset everything inside the input and textareas when I click the button. There's also quite a few input boxes.

Additionally, there is a php script that fills in <span> tags with requested information that I would also like to make blank again when pressing the button.

Some example code below

HTML

<button id="reset" onclick="resetFields()">Reset Fields</button>

<input id="myID" type="text">

<input id="myID2" type="text">

<span id="mySpan">Some text here</span>
<span id="mySpan2">Some text here</span>

Upvotes: 1

Views: 5089

Answers (3)

Piyush
Piyush

Reputation: 1162

If you use jquery, you can do something along the lines of

$("input[type='text'],textarea").val('');
$("#mySpan,#mySpan2").text('');

Upvotes: 1

D. Walsh
D. Walsh

Reputation: 1983

http://jsbin.com/gamubageke/edit?html,js,console,output

<script>
function resetFields() {
  var x = document.querySelectorAll(".resettable");
  x.forEach(el => {
    el.value='';
    el.innerHTML='';
  })
}

</script>

<body>
<button id="reset" onclick="resetFields()">Reset Fields</button>

<input id="myID" type="text" class="resettable">

<input id="myID2" type="text" class="resettable">

<span id="mySpan" class="resettable">Some text here</span>
<span id="mySpan2" class="resettable">Some text here</span>
</body>

Upvotes: 1

tfidelis
tfidelis

Reputation: 453

I think that is what you want:

function resetFields(){
    var inputArray = document.querySelectorAll('input');
    inputArray.forEach(function (input){
        input.value = "";
    });

    var textAreaArray = document.querySelectorAll('textArea');
    textAreaArray.forEach(function (textArea){
        textArea.innerHTML = "";
    });

    var spanArray = document.querySelectorAll('span');
    spanArray.forEach(function (span){
        span.innerHTML = "";
    });

}

Upvotes: 4

Related Questions