CODEWITHSUNDEEP
javascriptif-statement
Sathyaprakash Murugan
Sathyaprakash Murugan

Reputation: 35

Set value to zero based on user input form condition using javascript

I have created a simple calculator. I have set the user input with if-else condition to show / hide input form fields using radio buttons. Here is the code:

    Amount Saved For retirement : Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
    <div id="ifYes" style="visibility:hidden">
        <div class="i_container">
         <div class="i_row">
            <label id="saved_amount_label_id" for="saved_amount_input_id1">Saved Amount For Retirement (₹)</label>
            <span><input class="form-control" name="saved_amount_input_name1" id="saved_amount_input_id1" type="number" step="50000" value="0" min="0" max="10000000" oninput="showValSavedAmount(this.value)" /></span>
         </div>
         
      </div>
      <div class="i_container">
         <div class="i_row">
            <label for="retirement_return_input_id1">Expected Return Percentage (%)</label>
            <span><input class="form-control" name="retirement_return_input_name1" id="retirement_return_input_id1" type="number" value="12" min="5" max="30" step="0.5" oninput="showValRetirementReturn(this.value)" /></span>
         </div>
         
      </div>

    </div>

Javascript:

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
    }
    else document.getElementById('ifYes').style.visibility = 'hidden';

}

I need to set the value back to zero if the condition "NO" has been selected after given some input value in fields set to visible if they clicked "YES".

Upvotes: 1

Views: 417

Answers (1)

Tushar Shahi
Tushar Shahi

Reputation: 20441

Set the values to 0 in your else condition

function showValRetirementReturn(){

}
function showValSavedAmount(){

}

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
        }
    else {
    document.getElementById('ifYes').style.visibility = 'hidden';
document.getElementById('saved_amount_input_id1').value ="0";
document.getElementById('retirement_return_input_id1').value ="0";
}
}
Amount Saved For retirement : Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
    <div id="ifYes" style="visibility:hidden">
        <div class="i_container">
         <div class="i_row">
            <label id="saved_amount_label_id" for="saved_amount_input_id1">Saved Amount For Retirement (₹)</label>
            <span><input class="form-control" name="saved_amount_input_name1" id="saved_amount_input_id1" type="number" step="50000" value="0" min="0" max="10000000" oninput="showValSavedAmount(this.value)" /></span>
         </div>
         
      </div>
      <div class="i_container">
         <div class="i_row">
            <label for="retirement_return_input_id1">Expected Return Percentage (%)</label>
            <span><input class="form-control" name="retirement_return_input_name1" id="retirement_return_input_id1" type="number" value="12" min="5" max="30" step="0.5" oninput="showValRetirementReturn(this.value)" /></span>
         </div>
         
      </div>

    </div>

Upvotes: 1

Related Questions