HTML Clearing inactive input using javascript

Question

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.

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?

_“I don't know why the .value="" doesn't work in this case. ”_ - because you do not have a plain reference to the DOM element here, but a jQuery object. https://api.jquery.com/val/ — CBroe, Jul 09 '21 at 08:31
But trying to set the value for `blockNumber` likely doesn’t make sense here to begin with - since you are doing `blockNumber.find('input,select,radio')`, it _must_ mean that `blockNumber` itself is not an input field. Please get into the habit of providing _proper_ [mre]s with your questions. — CBroe, Jul 09 '21 at 08:33
I think my question meets the minimal reproductive example, as it includes clearly what is going on and how the code looks like. If I would know what to include here properly, probably I would be able to sort it on my own. — Geographos, Jul 09 '21 at 08:39
We don’t know what your actual HTML code looks like, that this is supposed to operate on. We should not _have to_ determine the fact that you are apparently trying to set the value of the wrong element, from analyzing your JS code. With a _proper_ example, that would have been much more obvious, when we can directly check what element `#cf_number_of_blocks` actually is. — CBroe, Jul 09 '21 at 08:44
OK, I have updated the query and added the js fiddle for my full code: https://jsfiddle.net/9qygs23b/ — Geographos, Jul 09 '21 at 08:46
var blockNumber = $('#cf_number_of_blocks'); It store the input html element in a var variable i.e blockNumber you can not use it in this way blockNumber.value = ""; try with $('#cf_number_of_blocks').value to set or read the value — Jayoti Parkash, Jul 09 '21 at 08:54

score 1 · Accepted Answer · answered Jul 09 '21 at 09:04

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>

It works perfectly! What should I change in order to clear the value for the radio button? — Geographos, Jul 09 '21 at 09:11
@MKR you need to use `.prop('checked', false)` on the radio button. — TechySharnav, Jul 09 '21 at 09:26

HTML Clearing inactive input using javascript

1 Answers1