How can I use a button onchange event to run the selected button's onclick function?

user_16471750 0
Viewed 977

When a radio button within an HTML form is selected, I am hoping that it will run the onclick function that I have linked to it. I tried using onclick instead of onchange earlier but it's not working with the radio buttons. Does anyone have any advice/tips I can use to resolve this issue?

function select(id, job, salary, someBool) {
  console.log(id, job, salary, someBool);
}
<form class="choice">
  <input type="radio" id="librarian" name="profession" value="lib" onclick="select('#professionSelect', 'Librarian', 4850, true);">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" onclick="select('#professionSelect', 'Motorcycle Mechanic', 2800, true)">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" onclick="select('#professionSelect', 'Actor', 3100, true)">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" onclick="select('#professionSelect', 'Teacher', 4500, true)">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" onclick="select('#professionSelect', 'Doctor', 13000, true)">
  <label for="doctor">Doctor: $13,000/month</label><br>
  <input type="radio" id="fire" name="profession" value="fi" onclick="select('#professionSelect', 'Firefighter', 3700, true)">
  <label for="fire">Firefighter: $3,700/month</label><br>
  <input type="radio" id="engineer" name="profession" value="engi" onclick="select('#professionSelect', 'Computer Engineer', 9400, true)">
  <label for="engineer">Computer Engineer: $9,400/month</label><br>
</form>

Would something like this work?

    $(".choice").change(function() {
        $(this).onclick();
    });
onchange onclick html jquery javascript
4 Answers

I just figured out that you are basically trying to pass data from HTML itself.

So, Best way is to use data- attribute property to do so and set your values on that and handle the rest in Javascript instead of writing a click event their itself.

const professions = document.querySelectorAll("input[name='profession']");

function select(id, job, salary, someBool) {
  console.log(id, job, salary, someBool);
}


professions.forEach((profession)=>{  
  profession.addEventListener('click',(e)=>{
    const professionData = profession.getAttribute('data-profession');
  const dataArray = professionData.split(",");
  
  select(profession.id,dataArray[1],dataArray[2],dataArray[3]);
  })

});
<form class="choice">
  <input type="radio" id="librarian" name="profession" value="lib" data-profession="'#professionSelect', 'Librarian', 4850, true">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" data-profession="'#professionSelect', 'Motorcycle Mechanic', 2800, true">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" data-profession = "'#professionSelect', 'Actor', 3100, true">
  <label for="actor">Actor: $3,100/month</label><br>
</form>

Try this code. And to know more about data- attribute you can use this w3school resource.

https://www.w3schools.com/tags/att_data-.asp

user_69389690

You'll need to use the change event on each individual radio element by using the name attribute. Here's a basic example of how you could do this:

$('input:radio[name=profession]').change(function(el) {
        select(this.getAttribute("id"), this.getAttribute("salary"));
 });

function select(profession, salary) {
    console.log(profession + ", " + salary)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="choice">
  <input type="radio" id="librarian" name="profession" value="lib" salary="4850">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" salary="2800">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" salary="3100">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" salary="4500">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" salary="13000">
  <label for="doctor">Doctor: $13,000/month</label><br>
  <input type="radio" id="fire" name="profession" value="fi" salary="3700">
  <label for="fire">Firefighter: $3,700/month</label><br>
  <input type="radio" id="engineer" name="profession" value="engi" salary="9400">
  <label for="engineer">Computer Engineer: $9,400/month</label><br>
</form>

user_90408660

select seems to be a word you cannot use in your HTML inline event listener. Use any other non reserved keyword it works.

Also, both onclick and onchange attributes should work here. Here is an example using both of them:

function boo(name,salary){
console.log(name,salary);
}
function body(name,salary){
console.log(name,salary);
}
function select(name,salary){
console.log(name,salary);
}
<form class="choice">
<input type="radio" id="librarian" name="profession" value="lib" onchange="body('lib',4850)">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" onchange="select('mechanic',2800)">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" onchange="boo('actor',3100)">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" onchange="boo('teacher',4500)">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" onclick="boo('doctor',13000)">
  <label for="doctor">Doctor: $13,000/month</label><br>
</form>

In the above example I have used both select and body, both are not keywords in JS. But will not work in inline event handlers.

You can use them directly in JS though, as below:

let select = function(){
  console.log(event.target.value);
}
let body = function(){
  console.log(event.target.value);
}
document.querySelector('#librarian').onchange = select;
document.querySelector('#librarian2').onchange = body;
<input type="radio" id="librarian" name="profession" value="lib"  />
  <label for="librarian">Librarian: $4,850/month</label>
    <input type="radio" id="librarian2" name="profession" value="lib2"  />
  <label for="librarian2">Librarian2: $4,850/month</label>

Probably, why the docs recommend against using inline event handlers.

Keep your JS and HTML separate.

user_101401240

a way to do that:

const 
  myForm = document.forms['choice']
, data =
  { lib  : { id: '#professionSelect', job: 'Librarian',           salary:  4850, someBool: true }
  , mech : { id: '#professionSelect', job: 'Motorcycle Mechanic', salary:  2800, someBool: true }
  , act  : { id: '#professionSelect', job: 'Actor',               salary:  3100, someBool: true }
  , tea  : { id: '#professionSelect', job: 'Teacher',             salary:   500, someBool: true }
  , doc  : { id: '#professionSelect', job: 'Doctor',              salary: 13000, someBool: true }
  , fi   : { id: '#professionSelect', job: 'Firefighter',         salary:  3700, someBool: true }
  , engi : { id: '#professionSelect', job: 'Computer Engineer',   salary:  9400, someBool: true }
  }
myForm.oninput = e =>
  {
  console.clear()
  console.log( data[myForm.profession.value] )
  }
label {
  display : block;
  float   : left;
  clear   : left;
  margin  : .3em 1em;
  }
<form name="choice" >
  <label> <input type="radio" name="profession" value="lib"  > Librarian: $4,850/month            </label>
  <label> <input type="radio" name="profession" value="mech" > Motorcycle Mechanic: $2,800/month  </label>
  <label> <input type="radio" name="profession" value="act"  > Actor: $3,100/month                </label>
  <label> <input type="radio" name="profession" value="tea"  > Teacher: $4,500/month              </label>
  <label> <input type="radio" name="profession" value="doc"  > Doctor: $13,000/month              </label>
  <label> <input type="radio" name="profession" value="fi"   > Firefighter: $3,700/month          </label>
  <label> <input type="radio" name="profession" value="engi" > Computer Engineer: $9,400/month    </label>
</form>

user_106690100
Related