CODEWITHSUNDEEP
javascripthtml
Geographos
Geographos

Reputation: 1456

HTML Clearing inactive input using javascript

I have the validated question, which makes the input inactive. It works fine, although if you have provided some value earlier and now came to the conclusion, that the question is not necessary and finally made it inactive, the value still remains.

enter image description here

I don't know how to make this input clear when disabled.

My code looks like this:

$("input[name=more_than_single_block]").on('click', function() {
  var blockNumber = $('#cf_number_of_blocks');
  // if is company
  if ($(this).val() == "Yes") {
    // show panel
    blockNumber.show();

    // remove disabled prop
    blockNumber.find('input,select,radio').prop('disabled', false);
  } else {
    // if is not company, hide the panel and 
    add disabled prop
    //blockNumber.hide();
    blockNumber.value = "";

    blockNumber.find('input,select,radio').prop('disabled', true);

  }
});

I don't know why the .value="" doesn't work in this case. I bought it from other examples:

HTML how to clear input using javascript?

https://reactgo.com/clear-input-value-javascript/

clearing an input with javascript

The blockNumber.val = ""; also doesn't work

The full code is available here:

https://jsfiddle.net/9qygs23b/

Is there any way to clear the value this way?

Upvotes: 1

Views: 194

Answers (1)

TechySharnav
TechySharnav

Reputation: 5084

You were setting value on blockNumber, which is <figure> element, not a input. You can use find() and val() functions, to get desired result.

$("input[name=more_than_single_block]").on('click', function() {
  var blockNumber = $('#cf_number_of_blocks');
  // if is company
  if ($(this).val() == "Yes") {
    // show panel
    blockNumber.show();

    // remove disabled prop
    blockNumber.find('input,select,radio').prop('disabled', false);
  } else {
    // if is not company, hide the panel and add disabled prop
    //blockNumber.hide();
    blockNumber.find("input").val("");
    blockNumber.find('input,select,radio').prop('disabled', true);

  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Question 3
<figure class="fig">
  <label>
<div class="order">3</div>
     <p>Is the Property Made Up of More Than a Single Block?<span class="asterisk">&#42;</span></p>
     </label>
  <br>
  <input class="radio-left" name="more_than_single_block" type="radio" value="Yes" required>Yes
  <input class="radio-right" name="more_than_single_block" type="radio" value="No">No
  <br>
</figure>

Question4

<figure class="fig" id="cf_number_of_blocks">
  <label>
       <div class="order">4</div>
       <p>If the Answer to Question 3 is Yes How Many Blocks are Included (A Form Should be Completed for Each Block)<span class="asterisk">&#42;</span>
       </p>
 </label>
  <br>
  <input type="number" min="1" name="number_of_blocks" required>
  <br>
</figure>

Upvotes: 1

Related Questions