OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to clear <input> and <textarea> fields as <type="text"> using a button?

  • Thread starter Thread starter Halomationdude
  • Start date Start date
H

Halomationdude

Guest
I've been developing a website for the past three weeks using HTML, CSS, and currently JavaScript for a school project. On the "Contact Us" page, I have a "form" (not defined as a form in code) where the user can leave their name, email address, phone number, and description. It looks like this:
enter image description here

The issue that I'm having is that when the user clicks the "Submit" button the four fields are supposed to clear the user's values and the placeholder text would reappear. So far, my code doesn't meet this requirement. The only thing that clears the four fields is when the user clicks the "Contact Us" link at the top right of the page. Currently, this is what I have:

Code:
<input type="button" value="Submit" onclick="Submit_Form()" />

Code:
function Submit_Form() {
  document.getElementById("Name").value = "";
  document.getElementById("Email").value = "";
  document.getElementById("Phone-Number").value = "";
  document.getElementById("Text-Box").value = "";
}

Here is a more detailed example of my existing code: https://jsfiddle.net/Halomationdude14/pmhbxnjk/10/

I have tried a few different things to resolve this issue that I've learned so far such as:


  1. Using the "onload" feature on the containing <div> that encases the form.


  2. Using a <button></button> instead of input.


  3. Using an event listener on the button (with an associated ID) instead of "onclick".

Aside from what I've read in my textbook, most of what I know about JavaScript has been learned from questions on this website. I have tried to format my code to how most people write theirs as seen throughout the Stack Overflow website but nothing has worked so far.

<p>I've been developing a website for the past three weeks using HTML, CSS, and currently JavaScript for a school project. On the "Contact Us" page, I have a "form" (not defined as a form in code) where the user can leave their name, email address, phone number, and description. It looks like this:<br />
<a href="https://i.sstatic.net/ljSLd.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ljSLd.jpg" alt="enter image description here" /></a></p>
<p>The issue that I'm having is that when the user clicks the "Submit" button the four fields are supposed to clear the user's values and the placeholder text would reappear. So far, my code doesn't meet this requirement. The only thing that clears the four fields is when the user clicks the "Contact Us" link at the top right of the page. Currently, this is what I have:</p>
<pre><code><input type="button" value="Submit" onclick="Submit_Form()" />
</code></pre>
<pre><code>function Submit_Form() {
document.getElementById("Name").value = "";
document.getElementById("Email").value = "";
document.getElementById("Phone-Number").value = "";
document.getElementById("Text-Box").value = "";
}
</code></pre>
<p>Here is a more detailed example of my existing code: <a href="https://jsfiddle.net/Halomationdude14/pmhbxnjk/10/" rel="nofollow noreferrer">https://jsfiddle.net/Halomationdude14/pmhbxnjk/10/</a></p>
<p>I have tried a few different things to resolve this issue that I've learned so far such as:</p>
<ol>
<li><p>Using the "onload" feature on the containing <div> that encases the form.</p>
</li>
<li><p>Using a <button></button> instead of input.</p>
</li>
<li><p>Using an event listener on the button (with an associated ID) instead of "onclick".</p>
</li>
</ol>
<p>Aside from what I've read in my textbook, most of what I know about JavaScript has been learned from questions on this website. I have tried to format my code to how most people write theirs as seen throughout the Stack Overflow website but nothing has worked so far.</p>
 

Latest posts

Top