How to auto click button on input field onchange in javascript-CodePudding

The button should be clicked automatically when amount is >0 and dropdown is selected

<html>
  <head>
    <script>
      document.getElementById("changeLanguage").onchange = function() {
        if (inputtxt.value.length == 0) {
          $('#bt').trigger('click');
        }
      };
    </script>
  </head>

  <body>
    <label for="fname">Amount</label><input type="number" id="amt" name="amt">
    <select onchange="changeLanguage(this.value)">
      <option value="Choose" selected="selected">Choose</option>
      <option value="IT">Italian</option>
      <option value="FR">France</option>
    </select>
    <button type="button" id="bt">Click Me!</button>
  </body>

</html>

I have tried using above code, but didn't work.

CodePudding user response：

If amount means value then you should compare inputtxt.value > 0 in if condition.

document.getElementById("changeLanguage").onchange = function() { 
  if (inputtxt.value > 0) {
    $('#bt').trigger('click'); 
  } 
};

CodePudding user response：

You have a few places to adjust.

First you should see the error message

Uncaught TypeError: Cannot set properties of null (setting 'onchange')

This is because you didn't set your select element id attribute.

So replace

<select onchange="changeLanguage(this.value)">

with

<select id="changeLanguage" onchange="changeLanguage(this.value)">

In addition, if you already have jquery, it is recommended not to use inline event, and there is actually no changeLanguage method.

So replace

<select id="changeLanguage" onchange="changeLanguage(this.value)">

with

<select id="changeLanguage">

When you make adjustments, you will find that the change event is listening, but you should see an error message

Uncaught ReferenceError: inputtxt is not defined

This is because you didn't declare the inputtxt variable.

So please add this line

const inputtxt = document.getElementById('amt').value;

The complete code is shown below

document.getElementById('changeLanguage').onchange = function() {
  const inputtxt = document.getElementById('amt').value;
  if (inputtxt.length == 0) {
    $('#bt').trigger('click');
  }
};

But I observed that you have used jquery, you can refer to the following code.

$('#changeLanguage').on('change', () => {
  if ($('#amt').val().length == 0) {
    $('#bt').trigger('click');
  }
});

e.g.

$('#changeLanguage').on('change', () => {
  if ($('#amt').val().length == 0) {
    $('#bt').trigger('click');
  }
});

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <label for="fname">Amount</label>
  <input type="number" id="amt" name="amt">
  <select id="changeLanguage">
    <option value="Choose" selected="selected">Choose</option>
    <option value="IT">Italian</option>
    <option value="FR">France</option>
  </select>
  <button type="button" id="bt">Click Me!</button>
</body>

</html>

CodePudding user response：

i think you can just trigger the function instead of the click action

document.getElementById("changeLanguage").addEventListener(
  'change',
  function(e) {
        if (e.currentTarget.value.length === 0) {
          submit()
        }
)

)

<body>
  <label for="fname">Amount</label>
  <input type="number" id="amt" name="amt">
  <select id="changeLanguage">
    <option value="Choose" selected="selected">Choose</option>
    <option value="IT">Italian</option>
    <option value="FR">France</option>
  </select>
  <button type="button" id="bt" onclick="submit()">Click Me!</button>
</body>