Question posted in
You can find the official documentation here.

empty form fields when I change value of select – Jquery ajax

i have a form contains select category_id which allows hide and show inputs title and name and select type, i want when i change category id value all other fields must be empty.

$(document).on('change', '#category_id', function() {
     $("#divt > input,#divtn > input,#divty > input").val('');
  var stateID = $(this).val();
  //alert(stateID);
  if (stateID == '1') {
     $("#divt").hide();
     $("#divn").hide();
     $("#divty").show();
  }else if(stateID == '2'){
     $("#divt").show();
     $("#divn").show();
     $("#divty").hide();
  }   
}); 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <form id="myform">
     <div class="form-group">
     <label>Categories <span class="text-hightlight">*</span></label>
     <select class="form-control" name="category_id" id="category_id">
        <option>select</option>
        <option value="1">title</option>
        <option value="2">name</option>
     </select>
   </div>
    <div class="form-group" id="divt">
      <label>title <span class="text-hightlight">*</span></label>
      <input type="text" name="title" class="form-control"/>
    </div>
    <div class="form-group" id="divn">
      <label>name <span class="text-hightlight">*</span></label>
      <input type="text" name="name" id="name" class="form-control"/>
    </div>
    <div class="form-group" id="divty">
     <label>type <span class="text-hightlight">*</span></label>
     <select class="form-control" name="type">
        <option></option>
        <option value="1">type a</option>
        <option value="2">type b</option>
     </select>
   </div>
 </form>
 </div>
Tags:

2

Answers


  1. 0

    If you’re trying to empty value of the textboxes, I guess the selector is wrong on line 2

    try

    $("input.form-control").val('');

    or $("#myform input.form-control").val('')

    Login or Signup to reply.
  2. 0

    To reset the select field you need this code

    $("#divty").find('option:first-child').prop('selected', true)
    .end().trigger('chosen:updated');

    Here is the working snippet:

    $(document).on('change', '#category_id', function() {
     $("#divt > input,#divtn > input,#divty > input").val('');
  var stateID = $(this).val();
  //alert(stateID);
  if (stateID == '1') {
     $("#divty").find('option:first-child').prop('selected', true)
    .end().trigger('chosen:updated');
     $("#divt").hide();
     $("#divn").hide();
     $("#divty").show();
  }else if(stateID == '2'){
     $("#divt > input").val('');
     $("#divn > input").val('');
     $("#divt").show();
     $("#divn").show();
     $("#divty").hide();
  }   
}); 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <form id="myform">
     <div class="form-group">
     <label>Categories <span class="text-hightlight">*</span></label>
     <select class="form-control" name="category_id" id="category_id">
        <option>select</option>
        <option value="1">title</option>
        <option value="2">name</option>
     </select>
   </div>
    <div class="form-group" id="divt">
      <label>title <span class="text-hightlight">*</span></label>
      <input type="text" name="title" class="form-control"/>
    </div>
    <div class="form-group" id="divn">
      <label>name <span class="text-hightlight">*</span></label>
      <input type="text" name="name" id="name" class="form-control"/>
    </div>
    <div class="form-group" id="divty">
     <label>type <span class="text-hightlight">*</span></label>
     <select class="form-control" name="type">
        <option></option>
        <option value="1">type a</option>
        <option value="2">type b</option>
     </select>
   </div>
 </form>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search