I am trying to set parameters to onClick event inside a html button using javascript.

This is how html button looks like:

<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>

param1 = should be the value from a html select element with id='year' and name='year'

param2 = should be the value from a html select element with id='grade' and name='grade'

param3 = should be the value from a html select element with id='subject' and name='subject'

These are the html select options

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

I have no clue how to set values to param1, param2, param3

This is what I tried but it feels wrong.

$('#upload-button').val = $('#year').val;

Can someone please help me?

I need to set values for the parameters (param1, param2, param3) in the function uploadFileIGCSE('param1', 'param2', 'param3') using javascript or jquery

Thank you

I am trying to set parameters to onClick event inside a html button using javascript.

This is how html button looks like:

<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>

param1 = should be the value from a html select element with id='year' and name='year'

param2 = should be the value from a html select element with id='grade' and name='grade'

param3 = should be the value from a html select element with id='subject' and name='subject'

These are the html select options

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

I have no clue how to set values to param1, param2, param3

This is what I tried but it feels wrong.

$('#upload-button').val = $('#year').val;

Can someone please help me?

I need to set values for the parameters (param1, param2, param3) in the function uploadFileIGCSE('param1', 'param2', 'param3') using javascript or jquery

Thank you

• javascript
• jquery
• html

• You should wrap the function in a new anonymous function: onclick="function(){ uploadFileIGCSE('param1', 'param2', 'param3'); }" fnName() will call the function once and whatever that function returns will be bound as onclick handler. – Luuuud Commented May 20, 2019 at 14:10
• I don't quite get what you are trying to say @LuudJacobs. Can you e up with an example? – Jananath Banuka Commented May 20, 2019 at 14:12

5 Answers 5

I can understand your needs. if you really wanted to do this only with HTML element, here is the way.

<button type="button" id="upload-button" 
    onclick="uploadFileIGCSE(
             document.querySelector('#year').value, 
             document.querySelector('#grade').value, 
             document.querySelector('#subject').value)" 
    class="btn btn-success" aria-expanded="false">Upload</button>

Here is the working example

function uploadFileIGCSE(val1, val2, val3){
  document.querySelector('#log').innerHTML = `${val1}, ${val2}, ${val3}`
}

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

<button type="button" id="upload-button" 
        onclick="uploadFileIGCSE(
                 document.querySelector('#year').value, 
                 document.querySelector('#grade').value, 
                 document.querySelector('#subject').value)" 
        class="btn btn-success" aria-expanded="false">Upload</button>
        
<p>log value : (<span id="log"></span>)</p>

You really shouldn't be using inline event listeners like onclick (for maintainability, security and separation of concerns reasons).

Instead, add the listener using the DOM API's HTMLElement.prototype.addEventListener():

document.getElementById('upload-button').addEventListener('click', function() {
  uploadFileIGCSE(year.value, grade.value, subject.value);
})

function uploadFileIGCSE(x,y,z) {
  console.log(x,y,z);
}

document.getElementById('upload-button').addEventListener('click', function() {
  uploadFileIGCSE(year.value, grade.value, subject.value);
})

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

<button type="button" id="upload-button">Upload</button>

try this

<button type="button" id="upload-button" onclick="getOption()" class="btn btn-success"
    aria-expanded="false">Upload</button>

function getOption() {
    var year = document.getElementById("year");
    var year_option = year.options[year.selectedIndex].value;

    var grade = document.getElementById("grade");
    var grade_option = grade.options[grade.selectedIndex].value;

    var subject = document.getElementById("subject");
    var subject_option = subject.options[subject.selectedIndex].value;

    uploadFileIGCSE(year_option, grade_option, subject_option)
}

$('#upload-button').click(function(e) {
    var year = $('#year').val();
    var grade = $('#grade').val();
    var subject = $('#subject').val();

    uploadFileIGCSE(year, grade, subject);
})

You could try something like this.

The click event can simply run an anonymous function. Its only input will be the default event object supplied by the DOM engine. That function can then gather the values from the various elements you're interested in, and make a further call to the uploadFileIGCSE function, passing those values as parameters.

Here's a demo. Note that I've used an unobtrusive event handler using addEventListener() in the JS code, rather than "onclick" within the HTML. This is generally considered to be better practice, as it makes the code easier to read, maintain and debug, and helps to separate the functionality from the presentation.

N.B. you could use jQuery for any/all of this, but equally it's not really necessary, it doesn't really add much value in this situation.

var button = document.getElementById("upload-button");
button.addEventListener("click", function(event) {
  var year = document.getElementById("year").value;
  var grade = document.getElementById("grade").value;
  var subject = document.getElementById("subject").value;
  uploadFileIGCSE(year, grade, subject);
});

function uploadFileIGCSE(year, grade, subject) {
  console.log(year, grade, subject);
}

<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>

<div class="col-md-3">
  <select id="year" name="year" class="form-control">
    <option value="select" disabled="disabled">- Select Year -</option>
    <option value="1">2001</option>
    <option value="2">2002</option>
    <option value="3">2003</option>
  </select>
</div>

<div class="col-md-3">
  <select id="grade" name="grade" class="form-control">
    <option value="select" disabled="disabled">- Select Grade -</option>
    <option value="1">Grade 5</option>
    <option value="2">Grade 6</option>
    <option value="3">Grade 7</option>
  </select>
</div>

<div class="col-md-3">
  <select id="subject" name="subject" class="form-control">
    <option value="select" disabled="disabled">- Select Subject -</option>
    <option value="1">Edexcel</option>
    <option value="2">National</option>
    <option value="3">Other</option>
  </select>
</div>