How to reset the value of my input items from a drop down list

Question

I do simple volume calculations for shapes. Every time the user selects a different figure reset the select value to an empty field. I've tried reset() but it clears all options. I would like it to be done automatically, and not with a button each time I select a different option.

<form action="javascript:calculate()" onchange="javascript:upform()">

<label for="id_shapes">List</label>
<select id="id_shapes" > 
    <option value="sphere" selected>sphere</option>
    <option value="cone">cone</option>
</select>

<br><br>
<div id="id_inputs_sphere" >
    <label for="id_radius">radius</label>
    <input id="id_radius" type="number" min="0" step="any">
    <h2><em>formula: = 4/3*&Pi;*R<sup>3</sup></em></h2>
</div>


<div id="id_inputs_cone" hidden>
    <label for="id_radius2">radius</label>
    <input id="id_radius2" type="number" min="0" step="any">
    <label for="id_height2">height</label>
    <input id="id_height2" type="number" min="0" step="any">
    <h2><em>formula: = 1/3*&Pi;*R<sup>2</sup>*H</em></h2>

</div>

<input type="submit" value="Calculate">
<p id="id_output"></p>
</form>

<script>  

function upform() {
        
        document.getElementById("id_inputs_sphere").hidden = true;
        document.getElementById("id_inputs_cone").hidden = true;

        let shape = document.getElementById("id_shapes").value;
        switch (shape) {
            case "sphere":
                document.getElementById("id_inputs_sphere").hidden = false;
                break;
            case "cone":
                document.getElementById("id_inputs_cone").hidden = false;
                break;
        }
    }

    

    

function calculate() {

let shape = document.getElementById("id_shapes").value;
let area = 0;
switch (shape) {
    case "sphere":
        let radius = document.getElementById("id_radius").value;
        area = 4/3 * Math.PI * radius**3;
        document.getElementById("id_output").innerHTML = "result = " + area;
        break;
    case "cone":
        let radius2 = document.getElementById("id_radius2").value;
        let height2 = document.getElementById("id_height2").value;
        area = 1/3 * Math.PI * radius2**2 * height2
        document.getElementById("id_output").innerHTML = "result = " + area;
        break;        
}
}

General Grievance · Accepted Answer · 2023-05-08 15:02:38Z

1

You can do this with an event listener and some function that list every item you want to clear e.g:

the function:

const clear_inputs = ()=>{
    let inputs = document.querySelectorAll('input[type="number"]');
      console.log(inputs);
      inputs.forEach(element=>{
      element.value = "";
      })
    }

Keep in mind that this particular function get all the inputs that have the type "number" so if you want to get other input types or an especific one you might want to specify those elements with their own id property.

the event listener:

 document.getElementById("id_shapes").addEventListener("change",()=>{
    clear_inputs();
    })

this event listener is triggered by your select box which list your shapes.

here's the jsfiddle if you want to check it out.

edited May 8, 2023 at 15:02

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Jan 30, 2023 at 20:15

stan chacon

7681 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

New_guy_in_here Over a year ago

Can i also do this with <p id="id_output"></p>?

stan chacon Over a year ago

yes just include the element inside the clear function

New_guy_in_here Over a year ago

u mean like that ? const clear_inputs = ()=>{ let inputs = document.querySelectorAll('input[type="number"]','p'); console.log(inputs); inputs.forEach(element=>{ element.value = ""; }) } document.getElementById("id_shapes" , "id_output").addEventListener("change",()=>{ clear_inputs(); })

stan chacon Over a year ago

after the for each just add document.getElementById("id_output").innerHTML = ""; that will clear the P

New_guy_in_here Over a year ago

I have a lot to learn... that was a too difficult task for me. Thank you for your time, thanks a million.

paliz · Accepted Answer · 2023-05-08 15:12:42Z

add id="myform" to form

<form action="javascript:calculate()" id="myForm" onchange="javascript:upform()">
       
       </form>

and look here

 function calculate() {

 let shape = document.getElementById("id_shapes").value;
 let area = 0;
 switch (shape) {
   case "sphere":
    let radius = document.getElementById("id_radius").value;
    area = 4/3 * Math.PI * radius**3;
    document.getElementById("id_output").innerHTML = "result = " + area;
    break;
case "cone":
    let radius2 = document.getElementById("id_radius2").value;
    let height2 = document.getElementById("id_height2").value;
    area = 1/3 * Math.PI * radius2**2 * height2
    document.getElementById("id_output").innerHTML = "result = " + area;
      break;        
}

    //add this line
  document.getElementById('myForm').reset();
}

Collectives™ on Stack Overflow

How to reset the value of my input items from a drop down list

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related