如何使用javascript或jquery将参数值设置为“onClick”函数

Question

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

Answer 1

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> 

Answer 2

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> 

Answer 3

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)
}

Answer 4

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.

NB 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> 

Answer 5

$('#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.