How to clear the input field completely?

Question

I have two fields which appear as the data is already entered before:

On certain condition an if condition is called and these value needs to be cleared. I tried to pass blank string inside val() so that it becomes empty but it is not working, data is still displayed:

<div class="col-md-12 fromDates" style="margin-bottom: 10px; display: block;">
   <label for="fromDate">From Date</label>
   <input type="text" id="assessFrom" required="" name="assessFrom">
</div>
<div class="col-md-12 toDates" style="margin-bottom: 10px; display: block;">
   <label for="fromDate">To Date</label>
   <input type="text" id="assessTo" required="" name="assessTo">
</div>

if (assessmentType == "firm" || assessmentType == "product") {
  $('.fromDates').val('');
  $('.toDates').val('');
}

you can use a cleverer selector which will get the inputs inside your classes, like: $('.fromDates input') instead of $('.fromDates'). — briosheje
– briosheje, Commented Nov 30, 2018 at 11:41

Rory McCrossan · Accepted Answer · 2018-11-30 11:40:47Z

4

.fromDates and .toDates are div elements which have no value.

Instead you need to clear the value of the input elements within them:

if (assessmentType == "firm" || assessmentType == "product") {
  $('.fromDates input, .toDates input').val('');
}

Alternatively you could use the id on the inputs directly:

if (assessmentType == "firm" || assessmentType == "product") {
  $('#assessFrom, #assessTo').val('');
}

answered Nov 30, 2018 at 11:40

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Comments

user10249871 · Accepted Answer · 2018-11-30 11:44:44Z

1

when you have Id why you are using class to clear the data from input field,

$('#assessFrom').val('');
$('#assessTo').val('');

and if you still want to use javascript

document.getElementById('assessFrom').value = '';
document.getElementById('assessTo').value = '';

answered Nov 30, 2018 at 11:44

user10249871

Comments

Monica Acha · Accepted Answer · 2018-11-30 11:44:20Z

0

Use the selector as input elements

$('#assessFrom').val('');
$('#assessTo').val('');

edited Nov 30, 2018 at 11:44

answered Nov 30, 2018 at 11:43

Monica Acha

1,0869 silver badges16 bronze badges

Comments

Beginner · Accepted Answer · 2018-11-30 11:43:04Z

I hope the below code will solve the issue, you can change the if condition based on your condition.

function check(){
  if(true){
   var item = document.getElementById("assessFrom");
   item.value = "";
  }
}

<div class="col-md-12 fromDates" style="margin-bottom: 10px; display: block;">
   <label for="fromDate">From Date</label>
   <input type="text" id="assessFrom" required="" name="assessFrom" value="08-07-2018">
</div>
<div class="col-md-12 toDates" style="margin-bottom: 10px; display: block;">
   <label for="fromDate">To Date</label>
   <input type="text" id="assessTo" required="" name="assessTo" value="12-01-2018">
</div>

<button onclick="check()">Check</button>

Downvote isn't mine, but there's a couple of code smells here; the onclick attribute, the if (true)

Collectives™ on Stack Overflow

How to clear the input field completely?

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related