CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3html-select
Orik3ll0
Orik3ll0

Reputation: 77

Reset button and bootstrap validation on Option change in select

I have select with options. On option change i show different divs and use bootstrap validator before submit. If input is empty and press on button it goes to disable. And on option change button is not activating. How can I reset inputs and button on option change?

$('#shexsselect').on('change', function() {
  value = $(this).val();
  if (value == 1) {
    //do something
  } else {
    //do something
  }
});

$(document).ready(function() {
  $('#form_fin').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon',
      invalid: 'glyphicon',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      pinofsv: {
        message: 'The username is not valid',
        validators: {
          notEmpty: {
            message: 'for label 2'
          },
        }
      },
      shexsselect: {
        validators: {
          notEmpty: {
            message: 'choose'
          }
        }
      },
      voen: {
        validators: {
          notEmpty: {
            message: 'for label2'
          }
        }
      }
    }
  });
});
<form name="form_fin" id="form_fin" action="" method="POST">
  <div class="col-sm-12">
    <div class="form-group" id="shexsdiv">
      <label>Selectionn: </label>
      <select class="form-control " name="shexsselect" id="shexsselect" required>
        <option value='' selected disabled>Choose</option>
        <option value='1'>First</option>
        <option value='2'>Second</option>
      </select>
    </div>
  </div>
  <div class="col-sm-12" id="voendiv">
    <div class="form-group">
      <label>label2:</label>
      <input type="text" class="form-control " name="voen" id="voen">
    </div>
  </div>
  <div class="col-sm-12" id="fin_input">
    <div class="form-group">
      <label>Label2:</label>
      <div class="input-group">
        <input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
  </div>
</form>

I tried excluded: [':disabled'], but it did not help and by jquery tried to reset and clear, but doesn not help

Upvotes: 1

Views: 848

Answers (1)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21756

Add onchange inside your select and there you call your function to reset values of input fields.

Below is working code:

function resetFields() {
  document.getElementById("voen").value = "";
  document.getElementById("pinofsv").value ="";
}
<form name="form_fin" id="form_fin" action="" method="POST">
  <div class="col-sm-12">
    <div class="form-group" id="shexsdiv">
      <label>Selectionn: </label>
      <select onchange="resetFields()" class="form-control " name="shexsselect" id="shexsselect" required>
        <option value='' selected disabled>Choose</option>
        <option value='1'>First</option>
        <option value='2'>Second</option>
      </select>
    </div>
  </div>
  <div class="col-sm-12" id="voendiv">
    <div class="form-group">
      <label>label2:</label>
      <input type="text" class="form-control " name="voen" id="voen">
    </div>
  </div>
  <div class="col-sm-12" id="fin_input">
    <div class="form-group">
      <label>Label2:</label>
      <div class="input-group">
        <input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
  </div>
</form>

Read here more about onchange event

Upvotes: 1

Related Questions