CODEWITHSUNDEEP
javascripthtml
ChocoMartin
ChocoMartin

Reputation: 111

How to change dynamically 'onChange' attribute value depending on select value?

How can I change the value of my onChange="" in a TextField depending on the user's selected value in a ComboBox.

I have these ComboBox:

<div>
    <label>Wafer Type:</label>
    <select name="s1"">
        <option value="1"> First </option>
        <option value="2"> Second </option>
    </select>
</div>

when user select First:

<input type="text" name="lotNo" onchange="function1();">

when user select Second:

<input type="text" name="lotNo" onchange="function1(); function2()">

any recommendation on how can I achived to change the onChange value dynamically based on selected dropdown value.

Thanks in advance.

Upvotes: 2

Views: 2192

Answers (5)

Mamun
Mamun

Reputation: 68933

You can add/remove the event based on the selected value like the following way:

var inputEl = document.querySelector('[name=lotNo]')
function myFunc(el){
  var selVal = el.value;
  if(selVal == "1"){
    inputEl.removeEventListener('change', two); // remove the previous one
    inputEl.addEventListener('change', one); // now add
  }
  else if(selVal == "2"){
    inputEl.removeEventListener('change', one); // remove the previous one
    inputEl.addEventListener('change', two); // now add
  }
}
function one(){
  console.log('Funtion One is called');
}
function two(){
  console.log('Function Two is called');
}

// To work on page load
// Create a new 'change' event
var event = new Event('change');
// Dispatch it on page load.
document.querySelector('select').dispatchEvent(event);
<div>
    <label>Wafer Type:</label>
    <select name="s1" onchange="myFunc(this);">
        <option value="1"> First </option>
        <option value="2"> Second </option>
    </select>
</div>

<input type="text" id="test" name="lotNo" >

Upvotes: 1

Cat
Cat

Reputation: 4226

Here's an alternative to the onchange attribute: a full-fledged event listener.

It automatically has access to the event that triggered it as its first argument (and we call this argument event for easy readability), and the target property of this event will refer to whichever element changed.

Whenever the lotNo input is changed, the listener invokes function1 -- which subsequently invokes function2 if the user has selected Second in the s1 dropdown.

const s1 = document.getElementsByName("s1")[0];
const lotNo = document.getElementsByName("lotNo")[0];

document.addEventListener("change", function1);

function function1(event){
  if(event.target == lotNo){
    console.log("function1 invoked");
    if(s1.value == "2"){ function2(); }
  }
}

function function2(){
  console.log("function2 invoked");
}
<div>
  <label>Wafer Type:</label>
  <select name="s1">
    <option value="1"> First </option>
    <option value="2"> Second </option>
  </select>
</div>
<input type="text" name="lotNo" />

Upvotes: 0

CrazyDev
CrazyDev

Reputation: 157

There is many way to do so. 1)put input in one div and give it id.Now create java script onchange event of select control. now in that put condtion that if option 1 is selected then replace input with your desize onchange events.





$( document ).ready(function() {

$("#s1").on('change', function(){
debugger;
if($("#s1 option:selected").val() == 1)
{
$("#changeinput").html("");
$("#changeinput").html('<input type="text" name="lotNo" onchange="function1();">')
}else
{
$("#changeinput").html("");
$("#changeinput").html('<input type="text" name="lotNo" onchange="function1();function2();">')
}

});

});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <label>Wafer Type:</label>
    
  
    
    <select name="s1" id="s1" >
    <option value="0">Select </option>
        <option value="1"> First </option>
        <option value="2"> Second </option>
    </select>
    
    <br><br>
</div>

<div id="changeinput">
<input type="text" name="lotNo" onchange="function1();">
</div>

Upvotes: 0

Pradeep Sambandam
Pradeep Sambandam

Reputation: 683

You can execute a single onchange function, from there you can execute the function based on the value chosen using a conditional statement. got it?

function mainFunction() {
    if (document.getElementsByName("s1").value == "1") {
       function1();
    }
    else if (document.getElementsByName("s1").value == "2"){
        function1();
        function2();
    }    
}

Upvotes: 2

Talha Talip A&#231;ıkg&#246;z
Talha Talip A&#231;ıkg&#246;z

Reputation: 2090

Assuming your input is:

<input type="text" name="lotNo" onchange="myClickHandler();">

You can call your specific function inside this handler, by checking the select's value which has the myselect id on it:

function myClickHandler() {
    if (document.querySelector("#myselect").value == "1") {
        // first selected, call your function
    }
    else {
        // second selected, call your function    
    }

}

Upvotes: 1

Related Questions