HTML Input value still exists when disabled

Question

I would like to remove my input value when disabled.

I found some solution here:

but it didn't work in my case.

My code looks like this:

                          <figure class="question">
                                <label>
                                    <div class="order">5</div>
                                        <p class="question_title">Live stream<span class="asterisk">&#42;</span></p>
                                </label>
                                <br>
                                <input name="live_stream" class="radiobtn" type="radio" value="Yes">Yes
                                <input name="live_stream" class="radiobtn" type="radio" value="No">No 
                                <br>
                            </figure>
                            <script>
                                $("input[name=live_stream]").on('click', function() {
                                    var autoRefresh = $('#autorefresh');
                                        if ($(this).val() == "No") {
                                            autoRefresh.show();
                                            autoRefresh.find('input,select,radio').prop('disabled', false);
                                        } else {
                                            autoRefresh.find('input,select,radio').prop('disabled', true); 
                                            autoRefresh.find('input,select,radio').val()= null ;
                                        }
                                });
                            </script>
                            <figure class="question" id="autorefresh">
                                <label>
                                    <div class="order">6</div>
                                        <p class="question_title">Autorefresh frequency (in seconds)<span class="asterisk">&#42;</span></p>
                                </label>
                                <input type="number" id="autoref" name="autorefresh" min="10" max="900" message="Give value between 10 and 900 seconds">
                            </figure>

Is it achievable by JQuery or at least pure HTML?

Some of the code shown doesn't make much sense. Please provide a more detailed explanation of expected behvior — charlietfl
– charlietfl, Commented Sep 6, 2021 at 16:20
Always check the browser console for errors. Invalid left-hand side in assignment — fdomn-m
– fdomn-m, Commented Sep 6, 2021 at 16:33

Dheirya Tyagi · Accepted Answer · 2021-09-06 16:22:38Z

You are so close. The problem is in your line autoRefresh.find('input,select,radio').val()= null ;. This is not valid jQuery. Instead, try replacing that line with this:

autoRefresh.find('input,select,radio').val('');

This clears the input value. Full working code:

$("input[name=live_stream]").on('click', function() {
  var autoRefresh = $('#autorefresh');
  if ($(this).val() == "No") {
    autoRefresh.show();
    autoRefresh.find('input,select,radio').prop('disabled', false);
  } else {
    autoRefresh.find('input,select,radio').prop('disabled', true);
    autoRefresh.find('input,select,radio').val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure class="question">
  <label>
    <div class="order">5</div>
    <p class="question_title">Live stream<span class="asterisk">&#42;</span></p>
  </label>
  <br>
  <input name="live_stream" class="radiobtn" type="radio" value="Yes">Yes
  <input name="live_stream" class="radiobtn" type="radio" value="No">No
  <br>
</figure>
<figure class="question" id="autorefresh">
  <label>
     <div class="order">6</div>
     <p class="question_title">Autorefresh frequency (in seconds)<span class="asterisk">&#42;</span></p>
  </label>
  <input type="number" id="autoref" name="autorefresh" min="10" max="900" message="Give value between 10 and 900 seconds">
</figure>

Collectives™ on Stack Overflow

HTML Input value still exists when disabled

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related