0

I have a form page here:

const currencyField = new AutoNumeric('.currency', 'Brazilian');

let tags = [{
    "value": "California",
    "color": "#800000"
  },
  {
    "value": "Texas",
    "color": "#000080"
  },
  {
    "value": "Florida",
    "color": "#f58230"
  },
  {
    "value": "New York",
    "color": "#ffff00"
  },
  {
    "value": "Pennsylvania",
    "color": "#0082c8"
  },
  {
    "value": "Illinois",
    "color": "#000000"
  },
  {
    "value": "Ohio",
    "color": "#4a8722"
  },
  {
    "value": "Georgia",
    "color": "#5d0909"
  },
  {
    "value": "North Carolina",
    "color": "#03440e"
  }
]


$('#tags_field').tagsinput({
  typeahead: ({
    source: tags.map(t => t.value),
    afterSelect: function() {
      this.$element[0].value = '';
      updateTagsinput()
    }
  }),
  tagClass: function(item) {
    return 'badge badge-info';
  }
})


function updateTagsinput() {

  $(`#tags_field_DIV .bootstrap-tagsinput > span.badge`).each(function() {
    $(this).each(function() {
      $(this).addClass('mx-1')
      let tag = tags.find(x => x.value == $(this)[0].innerText)
      if (tag) {
        $(this).css('background-color', `${tag.color}`)
        $(this).css('color', `${blackOrWhiteTextColor(tag.color)}`)
      }
    })
  })
}

function blackOrWhiteTextColor(cor) {
  cor = chroma(cor).brighten(3).hex();
  corRGB = hexToRgb(cor);
  if (corRGB.r * 0.299 + corRGB.g * 0.587 + corRGB.b * 0.114 > 186) {
    return "#000000";
  } else {
    return "#ffffff";
  }
}

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ?
    {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16),
    } :
    null;
}

function clearForm() {
  $('#form').trigger("reset");
  $("#tags_field").tagsinput('removeAll');
}

function randomize(clear = true) {
  if (clear)
    clearForm()
  $('#text_field_1').val(`${(Math.trunc(Math.random() * 99999999)).toString(36)}`)
  $('#text_field_2').val('Lorem ipsum dolor sit amet.')
  currencyField.set(Math.random() * 99999999)
  for (let i = 0; i < tags.length; i++) {
    if (Math.random() < 0.2) {
      $('#tags_field').tagsinput('add', tags[i].value);
    }
  }

  if (Math.random() > 0.3) {
    $('#option_field').prop("checked", true)
  } else {
    $('#option_field').prop("checked", false)
  }

  $(`#checkList > li`).each(function() {
    if (Math.random() < 0.13) {
      $(this).children(":first").children(":first").prop("checked", true)
    } else {
      $(this).children(":first").children(":first").prop("checked", false)
    }
  });
  updateTagsinput()
}
<head>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" rel="stylesheet" type="text/css" />
  <style>
    .bootstrap-tagsinput {
      width: 100%;
    }
  </style>
</head>

<body>
  <div>
    <form class="m-2" id="form" action="" method="post" autocomplete="off">
      <div class="form-group">
        <label for="text_field_1">Text Field #1</label>
        <input type="text" class="form-control" id="text_field_1" name="text_field_1">
      </div>
      <div class="form-group">
        <label for="text_field_2">Text Field #2</label>
        <textarea class="form-control" id="text_field_2" name="text_field_2" rows="3"></textarea>
      </div>
      <div class="form-row vertical-align">
        <div class="form-group col-4" id="adicionarProjetoCustoEstimadoDIV">
          <label for="currency_field">Currency Field</label>
          <input type="text" class="form-control currency" id="currency_field" name="currency_field">
        </div>
        <div class="form-group col-4" id="tags_field_DIV">
          <label for="tags_field">Tags Field</label>
          <input type="text" class="form-control tagsinput" data-role="tagsinput" id="tags_field" name="tags_field">
        </div>
        <div class="form-group col-4" id="option_field_DIV" style="text-align:center;">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="option_field" name="option_field">
            <label class="form-check-label" for="option_field">Check Field.</label>
          </div>
        </div>
      </div>
      <hr>
      <div>
        <label class="h6">Categoria(s)</label>

        <ul class="chk" id="checkList" style="columns: 3">
          <li style="display:inline-block;">
            <div id="checkOptions" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_1" name="Option #1">
              <label class="custom-control-label" for="option_1">
                                            Option #1
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_2" name="Option #2">
              <label class="custom-control-label" for="option_2">
                                            Option #2
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_3" name="Option #3">
              <label class="custom-control-label" for="option_3">
                                            Option #3
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_4" name="Option #4">
              <label class="custom-control-label" for="option_4">
                                            Option #4
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_5" name="Option #5">
              <label class="custom-control-label" for="option_5">
                                            Option #5
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_6" name="Option #6">
              <label class="custom-control-label" for="option_6">
                                            Option #6
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_7" name="Option #7">
              <label class="custom-control-label" for="option_7">
                                            Option #7
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_8" name="Option #8">
              <label class="custom-control-label" for="option_8">
                                            Option #8
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_9" name="Option #9">
              <label class="custom-control-label" for="option_9">
                                            Option #9
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_10" name="Option #10">
              <label class="custom-control-label" for="option_10">
                                            Option #10
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_11" name="Option #11">
              <label class="custom-control-label" for="option_11">
                                            Option #11
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_12" name="Option #12">
              <label class="custom-control-label" for="option_12">
                                            Option #12
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_13" name="Option #13">
              <label class="custom-control-label" for="option_13">
                                            Option #13
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_14" name="Option #14">
              <label class="custom-control-label" for="option_14">
                                            Option #14
                                        </label></div>
          </li><br>
          <li style="display:inline-block;">
            <div id="checkCategorias" class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input checkboxCategorias" id="option_15" name="Option #15">
              <label class="custom-control-label" for="option_15">
                                            Option #15
                                        </label></div>
          </li>
        </ul>

      </div>
      <button type="button" id="clearButton" onclick="clearForm();blur()" class="d-none d-sm-inline-block btn btn-info">Clear form</button>
      <button type="button" id="rendomizeButton" onclick="randomize();blur()" class="d-none d-sm-inline-block btn btn-info">Randomize data</button>
      <button type="button" id="rendomizeButton" onclick="randomize(false);blur()" class="d-none d-sm-inline-block btn btn-info">Randomize data without clear</button>
    </form>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.6.0/autoNumeric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>

At the bottom of the page I have 3 buttons to 1) clear the form; 2) clear the form then fill with random data; 3) fill with random data (without cleaning before)

This is the function to randomize data:

function randomize(clear = true) {
    if (clear) 
        clearForm()
    $('#text_field_1').val(`${(Math.trunc(Math.random() * 99999999)).toString(36)}`)
    $('#text_field_2').val('Lorem ipsum dolor sit amet.')
    currencyField.set(Math.random() * 99999999)
    for (let i = 0; i < tags.length; i++) {
        if (Math.random() < 0.2) {
            $('#tags_field').tagsinput('add', tags[i].value);
        }
    }
    
    if (Math.random() > 0.3) {
        $('#option_field').prop("checked", true)
    } else {
        $('#option_field').prop("checked", false)
    }
    
        $(`#checkList > li`).each(function () {
        if (Math.random() < 0.13) {
            $(this).children(":first").children(":first").prop("checked", true)
        } else {
            $(this).children(":first").children(":first").prop("checked", false)
        }
    });
    updateTagsinput()
}

My problem is, even with my instruction at the function being clear the form BEFORE filling it with random data, the field with AutoNumeric (Currency Field) seems to being filled before the form is cleaned. I can't understand what this is happening. There is no async functions.

When the randomize function is called without the clear command, the field currency is filled. But when you try to clear the form before fill it, the execution is being in inverse order: the form is filled on Currncy Field, and then it is cleaned right after.

Barmar
  • 741,623
  • 53
  • 500
  • 612
Rafael Leite
  • 75
  • 7
  • 1
    `autonumeric.js` uses `setTimeout()` to run its form reset code, so it runs asynchronously after `randomize()`. It does this to solve the problem [here](https://stackoverflow.com/questions/8152904/call-a-function-after-form-reset/8152960#8152960) – Barmar Dec 13 '22 at 17:22

0 Answers0